什么是属性描述符
创建一个对象最常用的方式是声明的形式，大概语法是这样的：
var myObj = {
key : value
//...
}
也可以采用构造形式，创建一个Object的实例，然后再为它添加属性和方法，大概语法如下：
var myObj = new Object();
myObj.key = value;
在上面的例子中，两种创建形式创建的myObj是一样的，都有相同的属性和方法，这些属性在创建时都带有一些特征值，JavaScript通过这些特征值来定义它们的形为。ES5在定义只有内部才用的特性时，描述了属性的各种特征。这些特性也就是属性描述符。
属性描述符的两种形式
MDN中的描述：
对象里目前存在的属性描述符主要有两种形式：数据描述符和存取描述符。
- 数据描述符是一个拥有可写或不可写值的属性。
- 存取描述符不包含数据值，是由一对getter-setter函数功能来描述的属性。
- 描述符必须是两种形式之一；不能同时是两者。
数据描述符具有以下4个特性：
- ** [[configurable]] ** 默认为false。当且仅当该属性的 configurable 为true时，该属性可以通过delete删除，该属性描述符才能够被改变，该属性描述符才可以被改为存取描述符。configurable主要针对属性描述符。直接在对象上定义的属性，它们的这个特性默认值为true。
- [[enumerable]]默认为false。当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。这样就可以通过for...in 循环返回属性。enumerable针对属性。直接在对象上定义的属性，它们的这个特性默认值为true。
- [[value]] 默认为undefined。该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。读取属性值时，从这个位置读；写入属性值时，把新值保存在这个位置。value针对属性。
- [[writable]] 默认为false。当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。writable针对属性。直接在对象上定义的属性，它们的这个特性默认值为true。
直接在对象上定义的属性特性[[configurable]]、[[enumerable]]、[[writable]]都被设置为true，[[value]]被设置为对象该属性指定的值。
比如：
var person = {
name : "apple"
}
这里创建了一个名为name的属性，为它指定的值是"apple"。也就是说，[[value]]特性将被设置为"apple"，而针对这个值的所有修改都在这个位置上。
存取描述符具有以下4个特性：
- ** [[configurable]] ** 默认为false。当且仅当该属性的 configurable 为true时，该属性可以通过delete删除，该属性描述符才能够被改变，该属性描述符才可以被改为数据描述符。configurable主要针对属性描述符。直接在对象上定义的属性，它们的这个特性默认值为true。
- [[enumerable]]默认为false。当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。enumerable针对属性。直接在对象上定义的属性，它们的这个特性默认值为true。
- [[get]]默认为undefined。在读取属性时调用的函数，一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。
- [[set]]默认为undefined。在写入属性时调用的函数，一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。
数据描述符和存取描述符4个特性的比较：
- 两种描述符都有[[configurable]][[enumerable]]两种属性。默认值都为false；对于直接在对象上定义的属性，默认值为true。
- 数据描述符另外具有[[writable]][[value]]两种属性；存取描述符另外具有[[get]][[set]]两种属性。
操作属性描述符的方法
我们在创建一个对象时，通常情况下会在对象上直接定义属性，这样生成的属性的描述符特性[[configurable]][[writable]][[enumerable]]值默认为true。我们也可以采用ES5提供的对象方法来为对象创建属性，或修改对象现有属性的描述符。下面我们就来看一下这些方法。
1. Object.defineProperty()
Object.defineProperty方法会直接在一个对象上定义一个新属性，或修改一个对象的现有属性，并返回这个对象
** 语法 **
Object.defineProperty(obj, prop, descriptor)
- obj 需要定义属性的对象
- prop 需要定义或修改的属性名称
- descriptor 将被定义或修改的属性描述符对象
- 返回值 被传给函数的对象
** 栗子 **
- 调用defineProperty方法添加数据描述符
var Obj = {}; // 创建一个新对象
// 对象Obj添加属性a，其值为37
Object.defineProperty(Obj, "a",{
value: 37,
writable: true,
enumerable: true,
configurable: true
});
- 调用defineProperty方法添加存取描述符
var myObj = {}; //创建一个新对象
var value;
Object.defineProperty(myObj, "b", {
get : function(){
return value;
},
set : function(newVal){
value = newVal
},
enumerable : true,
configurable : true
});
myObj.b = 38;
// 对象myObj拥有了属性b，值为38
- 数据描述符和存取描述符不能混合使用
var hisObj = {}; //创建一个新对象
Object.defineProperty(hisObj,"c",{
value: "50",
get: function(){
return "50";
}
});
// 报错
2. Object.defineProperties()
Object.defineProperties方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
** 语法 **
Object.defineProperties(obj, props)
- obj 需要添加或修改属性的对象
- props 该对象的键值对定义对象的属性及属性相应的描述符对象
- 返回值 被传给函数的对象
使用方法与defineProperty类似，只不过defineProperties一次性可以设置多个属性的描述符对象。
var Obj = {
"a":10
};
Object.defineProperties(Obj,{
"a1":{
get: function(){return this.a+1;},
set: function(val){ this.a = val;}
},
"a2":{
get: function(){return this.a+"test";},
set: function(val){this.b = val}
}
});
console.log(Obj.a1);
console.log(Obj.a2);
Obj.a1 = 3;
Obj.a2 = 'hello';
console.log(Obj.a1);
console.log(Obj.a2);
在使用getter和setter需要注意：如果对象指定了属性值，那么就不要针对该属性设置get和set，否则会导致堆栈溢出的报错。看下面的栗子。
var Obj = {
"a":10
};
Object.defineProperties(Obj,{
"a":{
get: function(){return this.a+1;},
set: function(val){ this.a = val;}
}
});
console.log(Obj.a);
读取属性描述符的特性
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor() 返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
如果属性描述符是数据描述符，返回的对象的属性有configurable, enumerable, writable, value;
如果属性描述符是存取描述符，返回的对象的属性有configurable, enumerable, writable, value。
语法
Object.getOwnPropertyDescriptor(obj, prop)
- obj 属性所在的对象
- prop 对象属性名称
- 返回值 对象属性的描述符对象
** 栗子 **
var book = {};
Object.defineProperties(book,{
_year:{
value: 2004
},
edition: {
value: 1
},
year:{
get: function(){
return this._year;
},
set: function(newVal){
if(newVal > 2004){
this._year = newVal;
this.edition += newVal - 2004
}
}
}
});
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value); // 2004
console.log(descriptor.configurable); // false
console.log(typeof descriptor.get); // undefined
var descriptor1 = Object.getOwnPropertyDescriptor(book,"year");
console.log(descriptor1.value); // undefined
console.log(descriptor1.enumerable); // false
console.log(typeof descriptor1.get); // 'function'
参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
https://segmentfault.com/a/1190000003882976
