Object.defineProperty

记得之前看vue的原理,双向数据绑定,说是用ES5的Object.defineProperty里面的getter和setter方法,然后就记下来,每次有人面试问到,都这样说,其实根本不知道,这个东西干嘛用的.最近在看你所\不知道的javascript(上卷),有详细讲到了关于Object.defineProperty.

在Es5中可以使用getter和setter部分改写默认操作，但是只能应用在单个属性上，无法应用在整个对象上。getter是一个隐藏函数，会在获取属性值时调用。setter也是一个隐藏属性，会在设置属性值时调用。

 Object.defineProperty(
        myObject,             //目标对象
        "b",                    //属性名
        {   //描述符
            //给b设置一个getter
            get:function(){
                return this.a*2
                 },
            //确保b会出现在对象的属性列表中
            enumerable:true
            }
        );
        console.log(myObject.a)  //2
        console.log(myObject.b)  //4
}

就是当给属性赋值或者获取属性的时候会调用get,和set里面的方法.

vue里面的数据绑定就是基于defineProperty的原理去实现的,那么就自己尝试一下如何去实现一个简单的双向数据绑定吧

监听input的数据变化,然后赋值给obj.a,然后会触发set方法,就实现了一个简单数据绑定啦!!!