Object.defineProperty API 分享

大家都知道 vue2.0 的双向绑定原理主要是基于 Object.defineProperty 这个API去实现的，下面是我关于这个API的学习经验。

Object.definePropert 原理

Object.defineProperty(obj, keyName, desc)

给大家举一个例子

var my = {
    name: "linrufeng",      
}  
Object.defineProperty(my, 'name', {
    get: function () {
        console.log("获取属性值");
        return '大包子 '
       
    },
    set: function (newVal) {
        console.log("更新属性值",newVal);           
    }
});

它接受参数参数

1. obj 我们要处理的对象 my
2. keyName 我们对象内部名称 name
3. 一个处理对象 (desc :object) 这里面大家了解了把

{
   get: function () {
        console.log("获取属性值");
    },
    set: function (newVal) {
        console.log("更新属性值",newVal);           
    }
}

即，当我使用对象时候，我们的 desc内部的描述就起作用了例如

my.name //
//触发 get 返回来的值 不是 linrufeng 而是 大包子
my.name = "ABC"
//触发 set 

而desc还有另外属性

1. value // 用来给属性附值
2. configrable // 述属性是否配置，以及可否删除
3. enumerable //描述属性是否会出现在for in 或者 Object.keys()的遍历中
4. writable //不可修改属性值

而 2，3，4 的默认状态均是 false 接下来我们详细的看下 它们的特性

writable

Object.defineProperty(my, 'age', {
    value: 12
})
// 接下来在控制台 输入 
my.age
my.age = 13
my.age 
// 发现值没有变 因为 默认属性都是false 的
Object.defineProperty(my, 'age', {
    value: 12,
    writable: true // true
})
这样我们的值就可以变了

enumerable

for (let key in my) {
    console.log(key)
}
console.log(Object.keys(my))
// key 里面是没有 age 的因为它默认不能被循环出来

configrable

Object.defineProperty(my, 'age', {
    value: 12,
    configurable: true
})
delete my.age // true 可以被删除

configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。 这是 我在 developer.mozilla.org 中查到的解释。

看到这里大家也就明白了吧 ，这里我认为Object.defineProperty 就是对于一个对象属性的监听。虽然我们大多数情况是知道我们什么时候对属性改变的，也可以在改变的时候直接调用一个函数。那么它还有啥作用呢。

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。而且他默认是不可以被修改的。