由可枚举属性引起的
JavaScript属性分为可枚举属性和不可枚举属性？什么是“枚举”，它又有什么用呢？
var apple = {
name : "苹果",
price :18
}
for(var prop in obj){
console.log(prop)
}
// 输出：name ,price
// 这里的可枚举性就是说for的这种写法可以得到这个对象的属性名
var stu = {};
Object.defineProperties(stu, {
name: {
value: "张三",
enumerable: false
},
age: {
value: 18,
enumerable: true
}
});
for(var prop in stu){
console.log(prop);
}
// 输出: age
//name属性不能便利出来，因为他的 “enumerable” 值为false
//以上代码请在chrome或者火狐里面运行，IE9以下运行第二段代码会出错
我们知道，for...in语句以任意顺序遍历一个对象的可枚举属性。
既 stu.age 可枚举，stu.name 不可枚举，而他们是否可枚举是通过 enumerable 来设置的。
属性描述符
我们通常会直接创建对象，然后设置对象的属性，例如上面的 obj 对象，设置了 name ,price 属性。其实这些属性也有一定的限定的，这些限定属性性质的我们称为“属性描述符”。
这里拿 price 属性来说，我们能输出 fruit.price 等于 18 ，其实是通过 price 的描述符 value 来设置的。例如上面的stu.age 的设置；
price 也有“enumerable”描述符，他之所以能被 for in 到 ,是因为对自身添加属性的 “enumerable” 默认为 true。
除了上面说到过的 “value” 和 “enumerable” 还有什么描述符呢？
每个属性都有
Configurable描述符、Enumerable描述符、Writable描述符、Value描述符
或者，每个属性都有
Configurable描述符、Enumerable描述符、Get描述符、Set描述符
前者称为 数据描述符，他们的值决定了该js对象的属性的某些性质及是否可读写。
后者称为 读取描述符，他们的值决定了该js对象的属性的某些性质及读写的行为。
描述符必须是这两种形式之一，不能同时是两者。
那么这些属性是各代表着什么？
数据描述符具有以下键值
| 键 | 值(默认值) | 作用 |
|---|---|---|
| configurable | false --------------------- | 为 true 时，该属性描述符才能够被改变，表示对象的属性是否可以被删除，以及除writable特性外的其他特性是否可以被修改。 |
| enumerable | false | true时，该属性在对象中才是可枚举的 |
| value | undefined | 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。读取属性的时候就是通过这里开始读 |
| writable | false | 表示能否修改属性的值赋值运算符（assignment operator）基于右值（right operand）的值，给左值（left operand）赋值。")改变 |
读取描述符具有以下键值
| 键 | 值(默认值) | 作用 |
|---|---|---|
| configurable | false --------------------- | 为 true 时，该属性描述符才能够被改变 |
| enumerable | false | true时，该属性在对象中才是可枚举的 |
| get | undefined | 在读取属性时调用的函数 |
| set | undefined | 在设置属性时调用的函数 |
知道这些描述符所控制的性质，那又是什么时候去哪里设置的呢？这就关乎到Object.defineProperty() 了，它有三个参数，Object.defineProperty(obj, prop, descriptor)，其中descriptor就是设置属性性质描述符。
defineProperty 和 defineProperties
- 语法
Object.defineProperty(obj, prop, descriptor)
Object.defineProperties(obj, props) - 定义：
Object.defineProperty() 直接在一个对象上定义一个新属性，或者修改现有属性，并返回该对象。
Object.definePropertys() 直接在一个对象上定义一个或多个新的属性，或者修改现有属性，并返回该对象。 - 参数
obj 要在其上定义属性的对象。
prop 要定义或修改的属性的名称。
descriptor 将被定义或修改的属性描述符。 - 返回值
返回被操作的对象，即返回obj参数 - 注意点
1）当把configurable值设置为false后,就不能修改任何属性了,包括自己本身这个属性
2）想用访问器属性模拟默认行为的话,必须得在里面新顶一个属性,不然的话会造成循环引用
3）可枚举属性 对for/in,Object.keys(),JSON.stringify(),Object.assign()方法才生效(for/in 是对所有可枚举属性，而其他三种是对自身可枚举属性) - 用途
1）vue通过getter-setter函数来实现双向绑定
2）俗称属性挂载器
3）专门监听对象数组变化的Object.observe()(es7)也用到了该方法
知道了Object.defineProperty()这个东东是用来生成或修改一个对象属性，知道对象属性的性质是靠descriptor这个参数来设置之后，我们来看看他是怎么运用的。
以var person = {}为例，我们要怎样去修改默认的属性值呢？
- 设置该属性为数据描述符
var person = {}
Object.defineProperty(person,'a',{
configurable:true, //可修改默认属性
enumerable:true, //可枚举
writable:true, //可修改这个属性的值
value:1 //定义一个初始的值为1
})
console.log(person) //{a: 1}
person.a=2
console.log(person) //{a: 2}
for(var k in person){
console.log(k) //a
}
现在我们来修改下enumerable和writable值
Object.defineProperty(person,'a',{
configurable:true,
enumerable:false,
writable:false,
value:1
})
console.log(person) //{a: 1}
person.a=2
console.log(person) //{a: 1} 因为writable值被设置为false了,所以不可以写,严格模式下会报错
for(var k in person){
console.log(k)// 没有可枚举属性,因为a的enumerable的值被设置为false
}
我们试试吧configurable的值改为false
Object.defineProperty(person,'a',{
configurable:false,//为false的时候不允许修改默认属性了
})
===============================
# 改为false之后再试试修改其他属性
Object.defineProperty(person,'a',{
configurable:true,
enumerable:true,
writable:true,
value:1
})
//woa,控制台直接报错了!连想把false值改回true都不行!也就是说,这个改动是一次性了!
//也就是说,你可以使用Object.defineProperty()方法无限修改同一个属性,但是当把configurable改为false之后就什么都不能再修改了
- 设置该属性为读取描述符
var person = {
a:1
}
Object.defineProperty(person,'a',{
get(){
return 3 //当访问这个属性的时候返回3
},
set(val){
console.log(val)//当设置这个属性的时候执行,val是设置的值
}
})
person.a// 3,我们明明写的是a:1,怎么返回的3呢?这就是get()的威力了
person.a = 5// 5,相应的设置的时候执行了set()函数
我们来模拟一个访问和设置的默认行为
var person = {
a:1
}
// 注:里面的this指向ogj(person)
Object.defineProperty(person,'a',{
get(){
return this.a
},
set(val){
this.a = val
}
})
//我们想当然的这么写.
person.a//Uncaught RangeError: Maximum call stack size exceeded
什么,溢出了?这是为什么?
哦~原来是这么写的话会造成循环引用,狂call不止
我们看下流程:
person.a → get.call(person) → this.a → person.a → get.call(person) → this.a......
我们来修改下
var person = {
a:1
}
Object.defineProperty(person,'a',{
get(){
return this._a || 1 //定义一个新的属性和一个默认值
},
set(val){
this._a = val
}
})
person.a// 1
person.a=2// 2
person.a// 2
这样就好了
这就是数据描述符和读取描述符的应用方式。在平时简单的开发中可能用不上，但是知道了这些之后对一些框架的封装的理解还是很有帮助的，例如vue数据双向绑定原理上利用的就是Object.defineProperty方法。
拓展
每个对象都有的一些方法：
Object.getOwnPropertyDescriptors(obj)
定义：获取一个对象的所有自身属性(自身属性)的描述符
使用：Object.getOwnPropertyDescriptors(apple)Object.getOwnPropertyDescriptor(obj, prop)
定义：返回指定对象上一个自有属性对应的属性描述符
使用：Object.getOwnPropertyDescriptor(apple, 'price')
Object.getOwnPropertyDescriptor 的应用：
一般直接添加属性时，属性描述符默认值都为 true，当用 Object.defineProperty() 方法来添加对象属性时，此时的属性描述符默认值为false
以文章开头的 apple 和 stu 的案例：
// 直接添加属性
Object.getOwnPropertyDescriptor(apple, 'name')
//name:{value: "苹果", writable: true, enumerable: true, configurable: true}
// 属性描述符添加属性
Object.getOwnPropertyDescriptor(stu, 'name')
//name:{value: "张三", writable: false, enumerable: false, configurable: false}
// 又或者
var stu2 = Object.create({}, { name: { value: '李四' } })
Object.getOwnPropertyDescriptor(stu2, 'name')
//name:{value: "李四", writable: false, enumerable: false, configurable: false}
Object.create() 的第二个参数为 Object.defineProperties 的第二个参数，既设置属性及属性描述符， 详情移步到 Object.create()
参考资料：
1.MDN
3.关于 Object.defineProperty() 小结
