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'