深入理解Object.defineProperty

用过vue的小伙伴都知道当状态发生改变的时候会自动更新视图，那具体的事先原理是什么呢？Javascript侦测变化有两个方式，有Object.defineProperty和Proxy，Proxy是ES6新加的，目前浏览器支持度不是很好，Vue目前底层还是用的是Object.defineProperty，所以想要深入了解Vue底层侦测变化原理，必须有必要要好好学习下Object.defineProperty。

对象的属性有以下几种：

• 命名属性：可通过.直接访问到的属性。
• 数据属性：专门保存一个值的属性。
• 访问器属性：保护数据属性的特殊属性。
• 内部属性：不能通过.直接访问的属性，比如class和__proto__。

数据属性

WechatIMG298.jpeg

如果configurable设为false，那么delete删除无效，并且无法修改其他属性。

// 1)对象直接量；属性特性默认为true
var o1 = {
    name: 'tom'
};
console.log(Object.getOwnPropertyDescriptor(o1, 'name')); 
// => Object {value: "tom", writable: true, enumerable: true, configurable: true}
 
// 2)通过Object.create创建，属性特性默认为false
var o2 = Object.create(null, {
    name: {value:'tom'}
});
console.log(Object.getOwnPropertyDescriptor(o2, 'name'));
// => Object {value: "tom", writable: false, enumerable: false, configurable: false}

1.在使用Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性，writable、enumerable和configurable默认值为false。
2.使用对象直接量创建的属性，writable、enumerable和configurable特性默认为true。

访问器属性

WechatIMG230.jpeg

var obj = {};
 
// 添加一个属性，并设置为访问器属性
Object.defineProperty(obj, "name", {
    get: function () {
        return this._name; // get和set里的变量不要使用属性，如：属性为name，get和set用的是_name
    },
    set: function (x) {
        if (isNaN(x)) {
            this._name = x;
        } else {
            this._name = 'name不能为纯数字';
        }
    },
    enumerable: true,
    configurable: true
});
 
console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function, enumerable: true, configurable: true}
obj.name = '12';
console.log(obj.name); // => name不能为纯数字