七爪源码:JavaScript 中的对象(附示例)

JavaScript 中的对象用于以“键：值”对的格式存储数据集合。 包含在一个对象中，我们可以有任意数量的变量和/或函数，这些变量和/或函数被称为对象属性和方法。

创建对象

让我们举个例子！ 要将变量 car 初始化为对象，我们使用花括号 {}：

var car = {};

我们现在有一个空对象，可以通过开发者工具控制台访问，只需输入我们的变量名：

car// {} [object]

一个空对象并不是那么有用，所以让我们用一些数据来更新它：

var car = {
  name: 'Tesla',
  model: 'Model 3',
  weight: 1700,
  extras: ['heated seats', 'wood decor', 'tinted glass'],
  details: function() {
    alert('This ' + this.name + ' is a ' + this.model + ' it weighs ' + this.weight + 'kg and includes the following extras: ' + this.extras[0] + ', ' + this.extras[1] + ' and ' + this.extras[2] + '.');
  },
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
};

让我们在我们的开发者工具控制台中访问这些数据：

car.name         // Tesla
car.model        // Model 3
car.weight       // 1700
car.extras[1]    // wood decor
car.details()    // This Tesla is a Model 3 it weighs 1700kg and includes the following extras: heated seats, wood decor and tinted glass.
car.display()    // This car is a Tesla.

如您所见，每个名称/值对必须用逗号分隔，并且每种情况下的名称和值用冒号分隔。 语法将始终遵循以下模式：

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

对象成员的值几乎可以是任何东西 - 在我们的汽车对象中，我们有两个字符串、一个数字、一个数组和两个函数。 前四项是数据项，称为对象的属性。 最后两项是允许对象使用该数据做某事的函数，被称为对象的方法。

这种对象被称为对象字面量 - 我们在创建对象时就已经写出了对象的内容。 这与从类实例化的对象进行比较，我们稍后会看一下。

点符号

上面，您已经看到使用点符号访问对象的属性和方法。 对象名称 car 充当命名空间——需要先输入它才能访问对象中的任何内容。 然后你写一个点，后面跟着你想访问的项目——这可以是一个简单属性的名称，一个数组属性的项目，或者对对象方法之一的调用，例如：

car.name
car.extras[1]
car.details()

删除属性

我们可以使用 delete 运算符来删除属性，如下所示：

car.model
// Tesla 3delete car.modelcar.model
// undefined

方括号

例如，如果我们的对象中有一个多字属性，例如：

var user = {
  name: "Richard",
  age: 32,
  "likes steaks": true  // a multiword property name must be quoted
};

我们无法使用点符号访问多字属性：

user.likes potatoes     // syntax error!

这是因为点要求键是有效的变量标识符。 那是没有空间和其他限制。

另一种方法是使用方括号，它适用于任何字符串：

let user = {};// set
user["likes steaks"] = true;// get
alert(user["likes steaks"]); // true// delete
delete user["likes steaks"];

更新对象成员

我们可以通过简单地用新值声明您想要设置的属性来更新对象中的值，如下所示：

user.age          // 32
user.age = 33     // 33
user.age          // 33

您还可以创建对象的全新成员。 例如：

user.surname = 'Smithessson';
// user
{name: "Richard", age: 33, likes steaks: true, surname: "Rembert"}

什么是“this”？

您可能已经注意到在我们前面的示例中使用了“this”这个词。 请参阅以下内容：

display: function() {
  alert('This car is a ' + this.name + '.');
}

this 关键字指代正在编写代码的当前对象 - 所以在这种情况下 this 等价于 car。

为什么不直接写汽车呢？ 编写结构良好的面向对象代码是最佳实践，这样做非常有用。 它将确保在成员的上下文发生变化时使用正确的值（例如，两个不同的汽车对象实例可能具有不同的名称，但在显示自己的信息时希望使用自己的名称）。

例如：

var car1 = {
  name: 'Tesla',
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
}
var car2 = {
  name: 'Toyota',
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
}

在这种情况下，car1.display() 将输出“This car is a Tesla”。并且 car2.display() 将输出“This car is a Toyota.”，尽管这两种情况下方法的代码完全相同。

由于 this 等于代码所在的对象 - 当您动态生成对象（例如使用构造函数）时，this 变得非常有用，这超出了本文的范围！

概括

就是这样！您现在应该对如何在 JavaScript 中使用对象有了一个很好的了解 - 包括创建自己的简单对象以及访问和操作对象属性。您还将开始看到对象作为存储相关数据和功能的结构是如何非常有用的。

例如，如果您试图将汽车对象中的所有属性和方法作为单独的变量和函数来跟踪，那将是非常低效的，并且我们会冒与其他具有相同名称的变量和函数发生冲突的风险.对象让我们将信息安全地锁定在它们自己的包中。

关注七爪网，获取更多APP/小程序/网站源码资源！