JavaScript笔记：对象

桃扇骨 2022-07-16 10:14 238阅读 0赞

## 语法 ##

对象的文字语法：

var myObj = { 
        key: value
        // ... 
    };

构造形式：

var myObj = new Object(); 
    myObj.key = value;

构造形式和文字形式生成的对象是一样的。唯一的区别是，在文字声明中你可以添加多个键 / 值对，但是在构造形式中你必须逐个添加属性。

用上面的“构造形式”来创建对象是非常少见的，一般来说你会使用文字语法，绝大多数内置对象也是这样做的。

## 类型 ##

对象是 JavaScript 的基础。

在 JavaScript 中一共有六种主要类型(术语是“语言类型”)：

string • number • boolean • null • undefined • object

注意，简单基本类型(string、boolean、number、null 和 undefined)本身并不是对象。

实际上，JavaScript 中有许多特殊的对象子类型，我们可以称之为复杂基本类型。

函数就是对象的一个子类型(从技术角度来说就是“可调用的对象”)。JavaScript 中的函数是“一等公民”，因为它们本质上和普通的对象一样(只是可以调用)，所以可以像操作其他对象一样操作函数(比如当作另一个函数的参数)。

数组也是对象的一种类型，具备一些额外的行为。数组中内容的组织方式比一般的对象要稍微复杂一些。

**内置对象**

JavaScript 中还有一些对象子类型，通常被称为内置对象。有些内置对象的名字看起来和简单基础类型一样，不过实际上它们的关系更复杂，我们稍后会详细介绍。

• String • Number • Boolean • Object • Function • Array • Date • RegExp • Error

这些内置对象从表现形式来说很像其他语言中的类型(type)或者类(class)，比如 Java 中的 String 类。

但是在 JavaScript 中，它们实际上只是一些内置函数。这些内置函数可以当作构造函数 (由 new 产生的函数调用)来使用，从而可以构造一个对应子类型的新对象。举例来说：

var strPrimitive = "I am a string"; 
    typeof strPrimitive; // "string" 
    strPrimitive instanceof String; // false
    
    var strObject = new String( "I am a string" ); 
    typeof strObject; // "object"
    strObject instanceof String; // true
    
    // 检查 sub-type 对象
    Object.prototype.toString.call( strObject ); // [object String]

从代码中可以看到，strObject 是由 String 构造函数创建的一个对象。  
原始值 “I am a string” 并不是一个对象，它只是一个字面量，并且是一个不可变的值。 如果要在这个字面量上执行一些操作，比如获取长度、访问其中某个字符等，那需要将其 转换为 String 对象。

幸好，在必要时语言会自动把字符串字面量转换成一个 String 对象，也就是说你并不需要显式创建一个对象。JavaScript 社区中的大多数人都认为能使用文字形式时就不要使用构造形式。

null 和 undefined 没有对应的构造形式，它们只有文字形式。  
相反，Date 只有构造，没有文字形式。

对于 Object、Array、Function 和 RegExp(正则表达式)来说，无论使用文字形式还是构造形式，它们都是对象，不是字面量。在某些情况下，相比用文字形式创建对象，构造形式可以提供一些额外选项。由于这两种形式都可以创建对象，所以我们首选更简单的文字形式。建议只在需要那些额外选项时使用构造形式。

Error 对象很少在代码中显式创建，一般是在抛出异常时被自动创建。也可以使用 new Error(..) 这种构造形式来创建，不过一般来说用不着。

## 内容 ##

之前我们提到过，对象的内容是由一些存储在特定命名位置的(任意类型的)值组成的，我们称之为属性。

var myObject = { 
        a: 2
    };
    myObject.a; // 2
    myObject["a"]; // 2

如果要访问 myObject 中 a 位置上的值，我们需要使用 . 操作符或者 \[\] 操作符。.a 语法通常被称为“属性访问”，\[“a”\] 语法通常被称为“键访问”。实际上它们访问的是同一个位置，并且会返回相同的值 2，所以这两个术语是可以互换的。在本书中我们会使用最常见的术语“属性访问”。

这两种语法的主要区别在于 . 操作符要求属性名满足标识符的命名规范，而 \[“..”\] 语法可以接受任意 UTF-8/Unicode 字符串作为属性名。举例来说，如果要引用名称为 “Super- Fun!” 的属性，那就必须使用 \[“Super-Fun!”\] 语法访问，因为 Super-Fun! 并不是一个有效的标识符属性名。

在对象中，属性名永远都是字符串。如果你使用 string(字面量)以外的其他值作为属性名，那它首先会被转换为一个字符串。即使是数字也不例外，虽然在数组下标中使用的的确是数字，但是在对象属性名中数字会被转换成字符串，所以当心不要搞混对象和数组中数字的用法。

var myObject = { };
    myObject[true] = "foo"; 
    myObject[3] = "bar"; 
    myObject[myObject] = "baz";
    
    myObject["true"]; // "foo"
    myObject["3"]; // "bar"
    myObject["[object Object]"]; // "baz"

**可计算属性名**

如果你需要通过表达式来计算属性名，那么我们刚刚讲到的 myObject\[..\] 这种属性访问语法就可以派上用场了，如可以使用myObject\[prefix + name\]。但是使用文字形式来声明对象时这样做是不行的。

ES6 增加了可计算属性名，可以在文字形式中使用 \[\] 包裹一个表达式来当作属性名:

var prefix = "foo";
    var myObject = {
        [prefix + "bar"]:"hello", 
        [prefix + "baz"]: "world"
    };
    myObject["foobar"]; // hello
    myObject["foobaz"]; // world

**属性与方法**

如果访问的对象属性是一个函数，有些开发者喜欢使用不一样的叫法以作区分。由于函数很容易被认为是属于某个对象，在其他语言中，属于对象(也被称为“类”)的函数通常被称为“方法”，因此把“属性访问”说成是“方法访问”也就不奇怪了。

从技术角度来说，函数永远不会“属于”一个对象。

确实，有些函数具有 this 引用，有时候这些 this 确实会指向调用位置的对象引用。但是这种用法从本质上来说并没有把一个函数变成一个“方法”，因为 this 是在运行时根据调用位置动态绑定的，所以函数和对象的关系最多也只能说是间接关系。

即使你在对象的文字形式中声明一个函数表达式，这个函数也不会“属于”这个对象—— 它们只是对于相同函数对象的多个引用。

**数组**

数组也支持 \[\] 访问形式，不过就像我们之前提到过的，数组有一套更加结构化的值存储机制(不过仍然不限制值的类型)。数组期望的是数值下标，也就是说值存储的位置(通常被称为索引)是整数。

数组也是对象，所以虽然每个下标都是整数，你仍然可以给数组添加属性：

var myArray = [ "foo", 42, "bar" ]; 
    myArray.baz = "baz"; 
    myArray.length; // 3
    myArray.baz; // "baz"

你完全可以把数组当作一个普通的键 / 值对象来使用，并且不添加任何数值索引，但是这并不是一个好主意。数组和普通的对象都根据其对应的行为和用途进行了优化，所以最好只用对象来存储键 / 值对，只用数组来存储数值下标 / 值对。

注意:如果你试图向数组添加一个属性，但是属性名“看起来”像一个数字，那它会变成一个数值下标(因此会修改数组的内容而不是添加一个属性)：

var myArray = [ "foo", 42, "bar" ]; 
    myArray["3"] = "baz"; 
    myArray.length; // 4
    myArray[3]; // "baz"

**复制对象**

JavaScript 初学者最常见的问题之一就是如何复制一个对象。看起来应该有一个内置的 copy() 方法，是吧？实际上事情比你想象的更复杂，因为我们无法选择一个默认的复制算法。

如何准确地表示 myObject 的复制呢?

首先，我们应该判断它是浅复制还是深复制。对于浅拷贝来说，复制出的新对象中 a 的值会复制旧对象中 a 的值，也就是 2，但是新对象中 b、c、d 三个属性其实只是三个引用，它们和旧对象中 b、c、d 引用的对象是一样的。对于深复制来说，除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。这时问题就来了，anotherArray 引用了 anotherObject 和 myObject，所以又需要复制 myObject，这样就会由于循环引用导致死循环。

对于 JSON 安全(也就是说可以被序列化为一个 JSON 字符串并且可以根据这个字符串解 析出一个结构和值完全一样的对象)的对象来说，有一种巧妙的复制方法：

var newObj = JSON.parse( JSON.stringify( someObj ) );

当然，这种方法需要保证对象是 JSON 安全的，所以只适用于部分情况。

**属性描述符**

在 ES5 之前，JavaScript 语言本身并没有提供可以直接检测属性特性的方法，比如判断属性是否是只读。

但是从 ES5 开始，所有的属性都具备了属性描述符。

var myObject = { 
        a:2
    };
    Object.getOwnPropertyDescriptor( myObject, "a" );
    // {
    // value: 2,
    // writable: true,
    // enumerable: true,
    // congurable: true 
    // }

如你所见，这个普通的对象属性对应的属性描述符(也被称为“数据描述符”，因为它只保存一个数据值)可不仅仅只是一个 2。它还包含另外三个特性：writable(可写)、 enumerable(可枚举)和 configurable(可配置)。

在创建普通属性时属性描述符会使用默认值，我们也可以使用 Object.defineProperty(..) 来添加一个新属性或者修改一个已有属性(如果它是 configurable)并对特性进行设置。

var myObject = {};
    Object.defineProperty( myObject, "a", {
        value: 2,
        writable: true, 
        configurable: true, 
        enumerable: true
    } );
    myObject.a; // 2

我们使用 defineProperty(..) 给 myObject 添加了一个普通的属性并显式指定了一些特性。 然而，一般来说你不会使用这种方式，除非你想修改属性描述符。

Writable：是否可以修改属性的值

var myObject = {};
    Object.defineProperty( myObject, "a", {
        value: 2,
        writable: false, // 不可写! 
        configurable: true,
        enumerable: true
    } );
    myObject.a = 3;
    myObject.a; // 2

如你所见，我们对于属性值的修改静默失败(silently failed)了。如果在严格模式下，这种方法会出错。

Configurable：可配置，可以使用 defineProperty(..) 方法来修改属性描述符

configurable修改为false后，下一次调用 defineProperty(..) 会产生一个 TypeError 错误，不管是不是处于严格模式，尝试修改一个不可配置的属性描述符都会出错。  
注意：如你所见，把 configurable 修改成 false 是单向操作，无法撤销!

除了无法修改，configurable:false 还会禁止删除这个属性，`delete myObject.a;` 语句无效。

Enumerable：属性是否会出现在对象的属性枚举中

这个描述符控制的是属性是否会出现在对象的属性枚举中，比如说 for..in 循环。如果把 enumerable 设置成 false，这个属性就不会出现在枚举中，虽然仍然可以正常访问它。相对地，设置成 true 就会让它出现在枚举中。

用户定义的所有的普通属性默认都是 enumerable，这通常就是你想要的。但是如果你不希望某些特殊属性出现在枚举中，那就把它设置成 enumerable:false。

**不变性**

有时候你会希望属性或者对象是不可改变(无论有意还是无意)的，在 ES5 中可以通过很多种方法来实现。

很重要的一点是，所有的方法创建的都是浅不变形，也就是说，它们只会影响目标对象和它的直接属性。如果目标对象引用了其他对象(数组、对象、函数，等)，其他对象的内容不受影响，仍然是可变的。

1、对象常量

结合 writable:false 和 configurable:false 就可以创建一个真正的常量属性(不可修改、重定义或者删除)。

var myObject = {};
    Object.defineProperty( myObject, "FAVORITE_NUMBER", {
        value: 42,
        writable: false,
        configurable: false 
    } );

2、禁止扩展

如果你想禁止一个对象添加新属性并且保留已有属性，可以使用 Object.preventExtensions(..)。

var myObject = { 
        a:2
    };
    Object.preventExtensions( myObject );
    myObject.b = 3;
    myObject.b; // undefined

在非严格模式下，创建属性 b 会静默失败。在严格模式下，将会抛出 TypeError 错误。

3、密封

Object.seal(..) 会创建一个“密封”的对象，这个方法实际上会在一个现有对象上调用 Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。

所以，密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性(虽然可以修改属性的值)。

4、冻结

Object.freeze(..) 会创建一个冻结对象，这个方法实际上会在一个现有对象上调用 Object.seal(..) 并把所有“数据访问”属性标记为 writable:false，这样就无法修改它们的值。

这个方法是你可以应用在对象上的级别最高的不可变性，它会禁止对于对象本身及其任意直接属性的修改(不过就像我们之前说过的，这个对象引用的其他对象是不受影响的)。

你可以“深度冻结”一个对象，具体方法为，首先在这个对象上调用 Object.freeze(..)， 然后遍历它引用的所有对象并在这些对象上调用 Object.freeze(..)。但是一定要小心，因为这样做有可能会在无意中冻结其他(共享)对象。

**\[\[Get\]\]**

属性访问在实现时有一个微妙却非常重要的细节。

var myObject = { a: 2};
    myObject.a; // 2

myObject.a 是一次属性访问，但是这条语句并不仅仅是在 myObjet 中查找名字为 a 的属性。

在语言规范中，myObject.a 在 myObject 上实际上是实现了 \[\[Get\]\] 操作(有点像函数调用:\[Get\])。对象默认的内置 \[\[Get\]\] 操作首先在对象中查找是否有名称相同的属性，如果找到就会返回这个属性的值。

然而，如果没有找到名称相同的属性，按照 \[\[Get\]\] 算法的定义会执行另外一种非常重要 的行为。我们会在后面的章节【原型】中介绍这个行为(其实就是遍历可能存在的 \[\[Prototype\]\] 链， 也就是原型链)。

如果无论如何都没有找到名称相同的属性，那 \[\[Get\]\] 操作会返回值 undefined。

注意，这种方法和访问变量时是不一样的。如果你引用了一个当前词法作用域中不存在的 变量，并不会像对象属性一样返回 undefined，而是会抛出一个 ReferenceError 异常。

**\[\[Put\]\]**

既然有可以获取属性值的 \[\[Get\]\] 操作，就一定有对应的 \[\[Put\]\] 操作。

你可能会认为给对象的属性赋值会触发 \[\[Put\]\] 来设置或者创建这个属性。但是实际情况并不完全是这样。

\[\[Put\]\] 被触发时，实际的行为取决于许多因素，包括对象中是否已经存在这个属性(这是最重要的因素)。

如果已经存在这个属性，\[\[Put\]\] 算法大致会检查下面这些内容。

1、属性是否是访问描述符(参见下节)?如果是并且存在setter就调用setter。
    2、属性的数据描述符中writable是否是false?如果是，在非严格模式下静默失败，在严格模式下抛出 TypeError 异常。
    3、如果都不是，将该值设置为属性的值。

如果对象中不存在这个属性，\[\[Put\]\] 操作会更加复杂。我们会在【原型】章节中讨论 \[\[Prototype\]\] 时详细进行介绍。

**Getter和Setter**

对象默认的 \[\[Put\]\] 和 \[\[Get\]\] 操作分别可以控制属性值的设置和获取。

在 ES5 中可以使用 getter 和 setter 部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter 是一个隐藏函数，会在获取属性值时调用。setter 也是一个隐藏函数，会在设置属性值时调用。

当你给一个属性定义 getter、setter 或者两者都有时，这个属性会被定义为“访问描述符”(和“数据描述符”相对)。对于访问描述符来说，JavaScript 会忽略它们的 value 和 writable 特性，取而代之的是关心 set 和 get(还有 configurable 和 enumerable)特性。

不管是对象文字语法中的get a() \{ .. \}，还是defineProperty(..)中的显式定义，二者都会在对象中创建一个不包含值的属性，对于这个属性的访问会自动调用一个隐藏函数，它的返回值会被当作属性访问的返回值。

var myObject = {
        // 给 a 定义一个 getter 
        get a() {
            return 2; 
        }
    };
    myObject.a = 3;
    myObject.a; // 2

由于我们只定义了 a 的 getter，所以对 a 的值进行设置时 set 操作会忽略赋值操作，不会抛出错误。而且即便有合法的 setter，由于我们自定义的 getter 只会返回 2，所以 set 操作是 没有意义的。

为了让属性更合理，还应当定义 setter，和你期望的一样，setter 会覆盖单个属性默认的 \[Put\]操作。通常来说 getter 和 setter 是成对出现的(只定义一个的话通常会产生意料之外的行为)：

在本例中，实际上我们把赋值(\[\[Put\]\])操作中的值 2 存储到了另一个变量 \_a\_ 中。名称 \_a\_ 只是一种惯例，没有任何特殊的行为——和其他普通属性一样。

**存在性**

前面我们介绍过，如 myObject.a 的属性访问返回值可能是 undefined，但是这个值有可能是属性中存储的 undefined，也可能是因为属性不存在所以返回 undefined。那么如何区分这两种情况呢？

我们可以在不访问属性值的情况下判断对象中是否存在这个属性。

var myObject = { a:2 };
    ("a" in myObject); // true
    ("b" in myObject); // false
    myObject.hasOwnProperty( "a" ); // true
    myObject.hasOwnProperty( "b" ); // false

in 操作符会检查属性是否在对象及其 \[\[Prototype\]\] 原型链中。相比之下， hasOwnProperty(..) 只会检查属性是否在 myObject 对象中，不会检查 \[\[Prototype\]\] 链。

这时可以使用一种更加强硬的方法来进行判断：`Object.prototype.hasOwnProperty.call(myObject,"a")`，它借用基础的 hasOwnProperty(..) 方法并把它显式绑定到 myObject 上。

看起来 in 操作符可以检查容器内是否有某个值，但是它实际上检查的是某个属性名是否存在。对于数组来说这个区别非常重要，4 in \[2, 4, 6\]的结果并不是你期待的 True，因为 \[2, 4, 6\] 这个数组中包含的属性名是 0、1、 2，没有 4。

1、枚举

之前介绍 enumerable 属性描述符特性时我们简单解释过什么是“可枚举性”。

可以看到，myObject.b 确实存在并且有访问值，但是却不会出现在 for..in 循环中(尽管可以通过 in 操作符来判断是否存在)。原因是“可枚举”就相当于“可以出现在对象属性的遍历中”。

也可以通过另一种方式来区分属性是否可枚举:

myObject.propertyIsEnumerable( "a" ); // true
    myObject.propertyIsEnumerable( "b" ); // false
    Object.keys( myObject ); // ["a"]
    Object.getOwnPropertyNames( myObject ); // ["a", "b"]

propertyIsEnumerable(..) 会检查给定的属性名是否直接存在于对象中(而不是在原型链 上)并且满足enumerable:true。

Object.keys(..) 会返回一个数组，包含所有可枚举属性，Object.getOwnPropertyNames(..) 会返回一个数组，包含所有属性，无论它们是否可枚举。

## 遍历 ##

for..in 循环可以用来遍历对象的可枚举属性列表(包括 \[\[Prototype\]\] 链)。但是如何遍历属性的值呢?

对于数值索引的数组来说，可以使用标准的 for 循环来遍历值，这实际上并不是在遍历值，而是遍历下标来指向值，如 myArray\[i\]。

ES5 中增加了一些数组的辅助迭代器，包括 forEach(..)、every(..) 和 some(..)。每种辅助迭代器都可以接受一个回调函数并把它应用到数组的每个元素上，唯一的区别就是它们 对于回调函数返回值的处理方式不同。

使用 for..in 遍历对象是无法直接获取属性值的，因为它实际上遍历的是对象中的所有可枚举属性，你需要手动获取属性值。

那么如何直接遍历值而不是数组下标(或者对象属性)呢?  
幸好，**ES6**增加了一种用来遍历数组的 for..of 循环语法：

var myArray = [ 1, 2, 3 ];
    for (var v of myArray) { 
        console.log( v );
    }

for..of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的 next() 方法来遍历所有返回值。  
数组有内置的 @@iterator，因此 for..of 可以直接应用在数组上。我们使用内置的 @@ iterator 来手动遍历数组，看看它是怎么工作的: