简介

数据类型和数据结构对于所有编程语言都是通用的。在 JavaScript 中，数据类型包括：Number、String、Boolean、undefined、null、bigint和symbol。其他数据结构包括Object、Array、Map和sets。本文将解释什么是对象、基本对象语法及其创建方式、如何访问对象的属性和方法、对象方法、“this”关键字以及何时使用它。

什么是对象？

对象是一种非原始数据类型，用于存储复杂的数据集合。它充当以键值对形式存储数据的实体。它由函数和变量组成，称为方法和属性。就像数组一样，任何表达式都可以输入到对象值中。因此，在创建对象时，您可以选择为它们提供称为属性的静态值或称为方法的动态值。

在 JavaScript 中创建对象

创建对象的方法有很多种。它们可以通过使用对象字面量语法、构造函数、ECMAScript 6 类和 _ object.create 方法来创建。让我们逐一来认识它们。

对象字面量语法

这是在 JavaScript 中创建对象的最明显的方法。它涉及声明一个变量并为分配给该变量的值命名。这就是我们所说的对象以键值对形式存储数据的意思。例如，下面的代码具有三个属性；name、  job和birthYear以及方法calcAge：

此语法允许为值分配称为键的名称。例如，键“name”的值为“John Samuels”。这就是 JavaScript 对象语法的样子。

构造函数

创建对象的另一种方法是使用函数来构建对象。该函数称为构造函数。函数表达式或函数声明可用于创建构造函数。然而，箭头函数不能用作构造函数，因为它没有自己的“this”关键字，而这对于构造函数来说是必不可少的。然后使用 new 运算符调用该函数。

在下面的代码中，使用name、  job和birthYear参数创建了一个名为“Individual”的函数。然后使用 new 运算符调用该函数。当使用 new 运算符调用构造函数时（如下面的代码所示），将创建一个空对象，并将“this”关键字设置为该空对象，然后将其链接到原型并由函数返回。如果您看一下下面的代码，就会发现属性是在构造函数内使用“this”关键字声明的，新的空对象将包含所有这些属性，然后将其作为 john() 返回 。

我们还可以在构造函数上定义方法，然后该构造函数创建的每个对象都可以访问这些方法。这通常称为原型继承。所有函数都存在原型属性，包括构造函数。例如，在下面的代码中，calcAge _method 已在构造函数_Individual 的prototype 属性上定义。 使用构造函数创建的john  _object 将访问 _calcAge方法。

ES6 类 

ECMAScript 6 引入了使用 class 关键字在 JavaScript 中创建对象。ES6 类允许我们使用更现代的语法在构造函数上执行相同的操作。类就像一个函数，并且像函数一样，类可以通过类表达式或声明来创建。

在下面的代码中，创建了一个Individual _class，其中包含构造函数方法。构造函数方法的功能类似于使用“this”关键字声明属性的构造函数。calcAge方法是在构造函数方法之外定义的，它会自动添加到类的prototype 属性中，然后使用类 Individual创建的任何对象都可以继承该属性。

Object.create。 

Object.create是一个与 ES6 类和构造函数不同的函数，可以原型继承。但是，不使用new运算符来调用函数，并且不需要构造函数。相反，object.create函数用于手动将对象的原型设置为我们创建的任何其他对象。

在下面的代码中，使用对象字面量语法创建了一个名为individual的对象。 对象内部定义了一个名为 property 的方法，其中包含要设置的属性的参数。对象中还定义了calcAge方法。 然后创建一个名为john的对象，并使用 _object.create _method 将这个空对象的原型设置为Individual 对象。

object.create方法很重要 ， 因为它还可以用于实现类之间的继承。

访问和修改对象的属性和值

我们从上面的插图中看到了创建对象的各种方法。了解如何访问和修改对象的属性和值对您来说也很重要。有两种常见的方法可以做到这一点：使用点表示法和括号表示法。除了这两种方式之外，还可以通过解构来访问对象的值。让我们一一考虑。

直接访问 

这种从对象访问数据的方法很简单。我们所要做的就是在对象和我们想要访问的属性之间使用点运算符。例如：在下面的代码中，使用点表示法从对象中检索属性名称，然后将其记录到控制台。

该方法还可用于向对象添加新属性。例如，下面的代码使用等于运算符将名为birthYear_、值为“2002”的属性添加到john对象。

括号表示法 

使用括号访问属性或将其添加到对象。点表示法和括号表示法之间的区别在于，任何表达式都可以放在括号内。请参阅下面的示例：

解构 

解构是 JavaScript 中的一项功能，允许您从对象甚至数组中检索数据并将其存储在变量中。当我们从 Web API 接收通常存储在对象中的数据时，这非常有用。解构对象的语法与解构数组所使用的语法非常相似。唯一的区别是在解构对象时，您应该使用花括号，如下所示：

在上面的代码中，大括号位于关键字const之后，大括号内的变量名称与属性名称相同。然后使用变量来形成句子，如上所示。 但是，我们可以像这样更改变量名称：

因此，在上面的代码中，新变量名称的定义方式与我们在对象文本中定义属性的方式类似。

但是，如果我们要检索的属性在对象上不存在怎么办？通常在这种情况下，它应该向我们显示未定义。然而，当解构我们的对象时，我们可以给这样的变量一个默认值，如下所示：

在上面的代码中，属性birthYear不存在，但我们使用等号和括号为其指定了默认值2002。

对象方法和“this”关键字

方法本质上是一个函数，它是对象的属性。它们可以比作对对象执行的操作。例如，下面代码中的calcAge方法计算对象 john的年龄并返回它。然后它会输出到控制台。

“this”关键字在 JavaScript 中的作用与在其他编程语言中的作用不同。它更像是为每个函数创建的特殊变量。“this”关键字指向调用它的函数。这意味着它获取对象的值。然而，“this”关键字的值不是静态的。它取决于函数的调用方式，其值是在函数执行或调用时赋值的。函数可以作为对象（即方法）的属性来调用，在这种情况下，它指向调用该方法的对象。

在上面的例子中，'this'关键字指向john对象，它是调用*calcAge*方法的对象。 函数也可以正常调用。也就是说，它不是对象的属性。在这种情况下，如果处于严格模式，则“this”关键字将是未定义的，否则它将指向全局对象，在浏览器的情况下是Window。 箭头函数没有自己的“this”关键字。在箭头函数中使用“this”关键字将仅指向其外部或父函数。

在上面的示例中，箭头函数func指向外部calcAge方法。 最后，需要注意的是，如果一个函数被作为事件监听器调用，那么“this”关键字将始终指向处理函数所附加的 DOM 元素。

何时在代码中使用对象

由于对象是存储数据（通常是复杂数据）的容器，因此建议在我们想要这样做时使用它们。此外，与数组不同，对象中的数据不需要结构化。这意味着如果我们想存储非结构化数据，对象是我们最好的选择。我们还可以决定以类似对象的方式组织代码。这称为面向对象编程（OOP）。

结论

本文试图向您简要概述 JavaScript 中的对象。这包括对象是什么、它们的语法和它们是如何创建的、我们如何访问对象属性、它们的方法和“this”关键字，以及何时应该在代码中使用对象。当然，关于 JavaScript 中的对象还有很多东西需要学习，例如原型如何工作以及 JavaScript 中的面向对象编程。如果您想了解更多信息，可以访问MDN了解更多信息。