JS高程-6-1：理解对象

文章为《JavaScript高级程序设计》（第三版）笔记。

ECMA-362把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。

一.创建对象的几种方式

1.字面量

var o1 = { name: 'o1' };

2.new Object

var o11 = new Object({ name: 'o11' });

// 也可这样写
var o11 = new Object();
o11.name = 'o11';

3.构造函数

var M = function(name) {this.name = name};
var o2 = new M('o2');

4.Object.create

var P = {name: 'o3'};
var o3 = Object.create(P);

再来看看以上几种方式创建的对象在控制台中的输出

我们可以看到，o1和o11输出效果是一样的；o2前面有个M；o3为空，但却又能输出name。

二.属性类型

ECMA-262第五版定义了只有内部才用的特性，在JavaScript中不能直接访问它们。为了表示特性是内部值，该规范把它们放在了两对方括号中。

ECMAScript中有两个属性：数据属性和访问器属性。

1.数据属性

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值true。
[[Enumerable]]：表示能否通过for-in循环返回属性。默认值true。
[[Writable]]：表示能否修改属性的值。默认值true。
[[Value]]：包含这个属性的数据值。默认值undefined。

要修改属性默认的特性，必须使用ECMAScript5的Object.defineProperty()方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符对象的属性必须是上面4个值，可以设置其中的一个或多个值。例如：

var person = {};
Object.defineProperty(person, 'name', {
  writable: false,
  value: 'Tom'
});
alert(person.name); // "Tom"
person.name = 'Jerry';
alert(person.name); // "Tom"

上面的例子中，定义的person是不可修改的，如果尝试修改，则在非严格模式下，赋值操作将被忽略；在严格模式下，赋值操作将会导致抛出错误。

注意：一旦把属性定义为不可配置的，就不能再把它变回可配置的了。此时，再调用Object.defineProperty()方法修改除writable之外的特性，都会报错：

var person = {};
Object.defineProperty(person, 'name', {
  configurable: false,
  value: 'Tom'
});
alert(person.name); // "Tom"
delete person.name; // 无法删除
alert(person.name); // "Tom"

// 抛出错误
Object.defineProperty(person, 'name', {
  configurable: true,
  value: 'Tom'
});

【扩展】

利用上面介绍的这些属性和方法，我们可以手动实现ES6中的const定义，如下：

function _const(key, value) {    
    const desc = {        
        value,        
        writable: false    
    }    
    Object.defineProperty(window, key, desc)
}
    
_const('obj', {a: 1})   // 定义obj
obj.b = 2               // 可以正常给obj的属性赋值
obj = {}                // 抛出错误，提示对象read-only

2.访问器属性

访问器属性不包含具体数值；它们包含一对儿getter和setter函数。访问器属性有4个特性：

[[Configurable]]：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。默认值true。
[[Enumerable]]：表示能否通过for-in循环返回属性。默认值true。
[[Get]]：在读取属性时调用的函数。默认值undefined。
[[Set]]：在写入属性时调用的函数。默认值undefined。

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

var book = {
  _year: 2004,
  edition: 1
};

Object.defineProperty(book, 'year', {
  get: function() {
    return: this._year;
  }
  set: function(newValue) {
    if (newValue > 2004) {
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});

book.year = 2005;
alert(book.edition); // 2

如上所示，这是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。

三.定义多个属性

通过Object.defineProperties()方法，可以通过描述符一次定义多个属性。

var book = {};

Object.defineProperties(book, {
  _year: {
    writable: true,
    value: 2004
  },

  edition: {
    writable: true,
    value: 1
  },

  year: {
    get: function() {
      return this._year;
    },

    set: function() {
      if (newValue > 2004) {
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
})

以上代码在book对象上定义了两个数据属性（_year和edition）和一个访问器属性（year）。最终的对象与上一节中定义的对象相同。唯一区别是这里定义的属性都是在同一时间创建的。

四.读取属性的特性

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

接着上一个例子，执行以下代码，将输出如下结果：

var desc = Object.getOwnPropertyDescriptor(book, '_year');
alert(desc.value); // 2004
alert(desc.configurable);  // false
alert(typeof desc.get); // "undefined"

var desc2 = Object.getOwnPropertyDescriptor(book, 'year');
alert(desc2.value); // undefined
alert(desc2.enumerable); // false
alert(typeof desc2.get); // "function"