9. ES5 之 Object.defineProperty(obj, prop, descriptor)

参数

Object obj

目标对象

String prop

需要定义的属性

Object descriptor

该属性拥有的特性，可设置的值有：

value

属性的值，默认为

undefined

。

writable

该属性是否可写，如果设置成

false

，则任何对该属性改写的操作都无效（但不会报错），默认为

false

。

get

一旦目标对象访问该属性，就会调用这个方法，并返回结果。默认为

undefined

。

set

一旦目标对象设置该属性，就会调用这个方法。默认为

undeinfed

。

configurable

如果为false，则任何尝试删除目标属性或修改属性以下特性（writable, configurable, enumerable）的行为将被无效化，默认为

false

。

enumerable

是否能在for...in循环中遍历出来或在Object.keys中列举出来。默认为

false

。

1. 定义新属性newDataProperty

var obj = {
height: '180cm',
age: 20
};
// 这里的newDataProperty是obj的属性
Object.defineProperty(obj, 'newDataProperty', {
// value: 100,
// writable: true,
enumerable: true,
configurable: true,
get: function() {
return document.getElementById('J_nickName').innerHTML;
},
set: function(name) {
document.querySelector('#J_nickName').innerHTML = name;
}
});

2. 参数value、writable、enumerable、configurable的使用（个人感觉目前项目中用处不大）

// value: newDataProperty作为obj的默认属性value为100
var defaultValue = obj.newDataProperty;

// writable: 由于设置了writeable为true，所以newDataProperty的属性值仍为100
obj.newDataProperty = 101;

// enumerable: 当enumberable的值为false时 newDataProperty无法被枚举
for (var key in obj) {
console.log(obj[key]);
}

// configurable: 修改writable属性
Object.defineProperty(obj, 'newDataProperty', {
writable : false
});
var descriptor = Object.getOwnPropertyDescriptor(obj, 'newDataProperty');
console.log(descriptor);

3. 关于set和get

一般用于数据和视图联动，mvvm框架的avalon.js、vue.js、angualar.js的双向数据绑定原理就是属性访问器。

不允许同一个属性存在两个及以上的存取访问器配置，所以writable或者value不能与get/set同时配置，否则报错。

// get/set: newDataProperty属性取值 赋值会触发get和set方法 从而造成视图更新
obj.newDataProperty = 'sampson'