JavaScript浅析 -- 属性描述对象

其实关于属性描述对象，阮大大有篇文章已经写得很详细了，不过作为必学知识点，也避免阮大大的网站再被攻击后看不到，自己还是做下笔记，印象更深刻些，想了解更多的可以戳原文查看。

一、属性描述对象

1. 属性描述对象

属性描述对象，是 JavaScript 里用来描述对象属性的一种数据结构，每个属性都有对应的一个属性描述对象。它具有6个元属性，结构如下：

{
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true,
  get: undefined,
  set: undefined
}

2. 属性描述对象的获取

（1） Object.getOwnPropertyDescriptor(obj, propName)可以获取对象目标属性的属性描述对象，第一个参数是目标对象，第二个参数是目标对象的目标属性。

var obj = {};
obj.content = 'hello world';
Object.getOwnPropertyDescriptor(obj, 'content');
/* {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
} */

（2）Object.getOwnPropertyDescriptors(obj)可以获取对象所有属性的属性描述对象的对象集合。可以获取自身所有无论是否可以遍历，不会获取继承的属性。

var obj = {};
obj.content = 'hello world';
obj.name = 'example';
Object.getOwnPropertyDescriptors(obj);
/* {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
} */

3. 属性描述对象的定义

（1）Object.defineProperty(obj, propName, descriptorObj)可以定义对象的目标属性的属性描述对象。第一个参数目标对象，第二个参数是属性名（字符串），第三个参数是属性描述对象，最终返回修改后的对象。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
});

obj.content // "hello world"

（2）Object.defineProperties(obj, descriptorsObj)可以定义对象多个属性的属性描述对象，然后返回修改后的对象。用法如下：

var obj = Object.defineProperties({}, {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

obj.content // "hello world"
obj.name // "example"

二、元属性

属性描述对象里的属性，即为元属性，有6个：value、writable、enumerable、configurable、get、set，下面一一讲解。

1. value

value 是属性的值，可以为任意类型。下面的写法是等价的：

var obj = {};
obj.content = 'hello world';
obj.content; // "hello world"

// 相当于
Object.defineProperty(obj, 'content', {value: 'hello'});
Object.getOwnPropertyDescriptor(obj, 'content').value; // "hello"

只要 configurable 和 writable 其中一个为 true 则 value 可以被改写。

var o1 = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
o1.content = 'hello world'; // 成功

var o2 = Object.defineProperty({}, 'content', {
  value: 'world',
  writable: false,
  configurable: true
});
o2.content = 'hello world'; // 成功

2. writable

writable 表示该属性是否可以被改写，是一个布尔值。为 true 表示可以被改写，false 反之。注意，正常模式下，对 writable 为 false 的属性赋值不会报错，只会静默失败。但是，严格模式下会报错，即使是对该属性重新赋予一个同样的值。

var obj = {};
Object.defineProperty(obj, 'content', {
  value: 'hello',
  writable: false // 如果增加一个 configurable 为 true 则仍可以被改写
});

obj.content // "hello"
obj.content = 'hello world';
obj.content // "hello"

3. enumerable

enumerable 表示该属性是否可枚举，是一个布尔值。当属性不可枚举即 enumerable 为 false 时，该属性不会被 for-in、Object.keys()、JSON.stringify()遍历。该元属性的诞生是因为的 in 不仅可以遍历自身属性还可以遍历继承的属性，为了不让其遍历继承属性，所以增加了 enumerable 并规定了 in 只可遍历可枚举属性，且继承的属性都是不可枚举的。

// 可利用 enumerable 设置不想被遍历的属性
var obj = Object.defineProperties({}, {
  content: {
    value: 'hello',
    enumerable: true
  },
  phone: {
    value: '13512345678',
    enumerable: false
  }
});
JSON.stringify(obj); // "{"content":"hello"}"

4. configurable

configurable 表示改属性的元属性是否可配置，是一个布尔值。当其为 false 时，value、enumerable、configurable 不可被更改，writable 只能从 true 改为 false；且此时该属性无法被删除。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
obj.content = 'hello world'; // 成功

// 由于设置了 configurable 为false，所以再次更改配置会报错
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: true
}); // Uncaught TypeError: Cannot redefine property: content

// 改动一下 configurable 就可以设置成功了，因为上面说的：
// 1.value 只要 writable 或 configurable 之一为 true 则可改；
// 2.writable 在不可配置情况下能 true 改 false
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: false
});  // 成功

5. 存取器 get 和 set

set 和 get 属性的值是一个函数，分别对应存取函数 setter 和 getter。一旦定义了存取函数，那么存取该属性的时候都会先执行对应的存取函数，所以可以用该属性做一些存取限制。

var obj = Object.defineProperty({}, 'content', {
  get: function () { // 不接受参数
    return 'getter';
  },
  set: function (value) { // 只接受一个参数，即要赋值的value
    console.log('setter: ' + value);
  }
});

obj.content // "getter"
obj.content = 'hello' // "setter: hello"

存取器还有另一种写法可以直接定义在对象里，类似于 function 的声明方式。而且一般会搭配一个内在变量（非必要，只是用来存值放对象内外没差别）一起使用，该变量一般以 _ 或 $ 开头以区分对象的其他属性。

var obj = {
  $age: 18, // 用来存操作age的临时变量，可以随意命名，但建议与属性名相同方便对应
  get age() {
    return ++this.$age;
  },
  set age(val) {
    if (val < this.$age) {
      alert('新值必须大于旧值');
    } else {
      this.$age = age;
    }
  }
}

obj.age; // 19
obj.age; // 20
obj.age = 18; // 赋值失败，提示新值必须大于旧值，age还是20

将对象的属性赋值给另一个对象属性时，不会复制存取函数，而是直接复制函数的返回值。比如将上面例子中的 age 赋值给另一个对象的属性时，只会复制21，所以下次调用的话不会返回22。

var obj2 = {};
obj2.age = obj.age; // 调用obj.age在之前的20之上加1变成21
obj2.age; // 再次调用还是21，因为getter函数没被复制过来

// 可利用下面的函数解决上述问题，注意如果只复制 age 的描述对象没用，因为 $age 没被复制过来，对 age 读取会返回 NaN
var copy = function (to, from) {
  for (var property in from) {
    if (!from.hasOwnProperty(property)) continue;
    Object.defineProperty(
      to,
      property,
      Object.getOwnPropertyDescriptor(from, property)
    );
  }

  return to;
}
copy(obj2, obj);
obj2.age;

注意，一旦定义了存取函数 setter 和 getter，则不能将 writable 属性设置为 true，或者再同时定义 value 属性。