❤️❤️❤️Question024 -JavaScript、谈谈对js中对象的理解，从属性角度出发

[wangbinze]

题目：谈谈对js中对象的理解，从属性角度出发

[wangbinze]

ECMA-262将对象定义为一组属性的无序集合。这意味着对象就是一组没有特点顺序的值。

理解对象

两种方式创建对象：

• 第一种是使用 new 操作符和 Object 构造函数

let person = new Object(); 
person.name = "Nicholas"; 
person.age = 29; 
person.job = "Software Engineer"; 
person.sayName = function() { 
  console.log(this.name); 
};

• 第二种是使用对象字面量表示法。（实际应用中使用较多）

let person = { 
  name: "Nicholas", 
  age: 29, 
  job: "Software Engineer", 
  sayName() { 
    console.log(this.name); 
  } 
};

属性的类型

属性分为两种：数据属性和访问器属性

• 数据属性

  数据属性包含一个保存数据值的位置。值会从这个位置读取，也会写入到这个位置。

  1. [[Configurable]]：可配置的。表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。

     一个属性被定义为不可配置之后，就不能再变回可配置的了。

  2. [[Enumerable]]：可数的。表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。

  3. [[Writable]]：可写的。表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。

  4. [[]Value]]：包含属性实际的值。这个就是前面提到的那个读取和写入属性值的位置。

  let person = {}; 
  Object.defineProperty(person, "name", { 
    writable: false, 
    value: "Nicholas" 
  }); 
  console.log(person.name); // "Nicholas" 
  person.name = "Greg"; 
  console.log(person.name); // "Nicholas"

• 访问器属性

  访问器属性不包含数据值。相反，它们包含一个获取（getter）函数和一个设置（setter）函数，不过这两个函数不是必需的。在读取访问器属性时，会调用获取函数，这个函数的责任就是返回一个有效的值。在写入访问器属性时，会调用设置函数并传入新值，这个函数必须决定对数据做出什么修改。

  1. [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特 性，以及是否可以把它改为数据属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
  2. [[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
  3. [[Get]]：获取函数，在读取属性时调用。默认值为 undefined。
  4. [[Set]]：设置函数，在写入属性时调用。默认值为 undefined。

  访问器属性是不能直接定义的，必须使用 Object.defineProperty()。

  // 定义一个对象，包含伪私有成员 year_和公共成员 edition 
  let book = { 
      year_: 2017, 
      edition: 1
  }
  Object.defineProperty(book, "year", { 
      get() { 
          return this.year_; 
          }, 
          set(newValue) { 
              if (newValue > 2017) { 
              this.year_ = newValue; 
              this.edition += newValue - 2017; 
          } 
      } 
  }); 
  book.year = 2018; 
  console.log(book.edition); //2

  定义多个属性

  let book = {}; 
  Object.defineProperties(book, { 
    year_: { 
      value: 2017 
    }, 
    edition: { 
      value: 1 
    }, 
    year: { 
      get() { 
        return this.year_; 
      }, 
      set(newValue) { 
        if (newValue > 2017) { 
          this.year_ = newValue; 
          this.edition += newValue - 2017; 
        } 
      } 
    } 
  });

  读取属性特性

  使用 Object.getOwnPropertyDescriptor()方法可以取得指定属性的属性描述符。这个方法接 收两个参数：属性所在的对象和要取得其描述符的属性名。返回值是一个对象，对于访问器属性包含configurable、enumerable、get 和 set 属性，对于数据属性包含 configurable、enumerable、writable 和 value 属性。

  let descriptor = Object.getOwnPropertyDescriptor(book, "year_"); 
  console.log(descriptor.value); // 2017 
  console.log(descriptor.configurable); // false 
  console.log(typeof descriptor.get); // "undefined" 
  let descriptor = Object.getOwnPropertyDescriptor(book, "year"); 
  console.log(descriptor.value); // undefined 
  console.log(descriptor.enumerable); // false 
  console.log(typeof descriptor.get); // "function"

  ECMAScript 2017 新增了 Object.getOwnPropertyDescriptors()静态方法。这个方法实际上 会在每个自有属性上调用 Object.getOwnPropertyDescriptor()并在一个新对象中返回它们。

  console.log(Object.getOwnPropertyDescriptors(book));
  // { 
  //   edition: { 
  //     configurable: false, 
  //     enumerable: false, 
  //     value: 1, 
  //     writable: false 
  //   }, 
  //   year: { 
  //     configurable: false, 
  //     enumerable: false, 
  //     get: f(), 
  //     set: f(newValue), 
  //   }, 
  //   year_: { 
  //     configurable: false, 
  //     enumerable: false, 
  //     value: 2017, 
  //     writable: false 
  //   } 
  // }