Object.defineProperty与双向绑定、数据监听

1、对象赋值的两种方式

一是“=”赋值，一是Object.defineProperty方法，而当下流行框架中普遍应用的双向绑定和数据监听等，就是利用的第二种方式，关于此方法很少讲，可参考

developer.mozilla.org/zh-CN/docs/…

须要注意一点的是，

var bValue;
Object.defineProperty(o, "b", {
  get : function(){
    return bValue;
  },
  set : function(newValue){
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});

o.b = 38;复制代码

虽然其中set方法是这样写的，

set : function(newValue){
    bValue = newValue;
  },复制代码

因此此处的a.b=arg不一样于通常的. 语法，而是已经触发了setter了

2、为何Object.defineProperty能实现双向绑定和数据监听呢

由于Object.defineProperty方法里有getter和setter函数对，你能够把它理解为一个能够触发的函数，触发事件就是setter对应的属性被改变

eg：

var bValue = 38;
Object.defineProperty(o, 'b', {
  get: function() { return bValue; },
  set: function(newValue) { 
    bValue = newValue; 
    you can do something, like update the new data to virual dom! 
  },
  enumerable: true,
  configurable: true
});
o.b; // 38
//属性”b”被设置到对象o上，而且值为38。
//如今o.b的值指向bValue变量，除非o.b被从新定义
复制代码

3、框架里的具体作法是怎样的呢？

一句话描述，就是把在data里注册的全部属性都添加上对应的getter和setter函数对。

形象点，能够参照下面的方法：使用defineProperty方法封装一个监听属性变更的函数。

var object = {
   name:'liwudi',
    age:34
}
function changeIt(object) {
    function descripterFun(value) {
        return {
            enumerable: true,
            get: function () {
                console.log('get it');
                return value;
            },
            set: function (newvalue) {
                console.log('set it');
                value = newvalue;
            }
        }
    }
    for(var i in object){
        Object.defineProperty(object, i, descripterFun(object[i]))
    }
}
changeIt(object);
console.log(object.name);
object.name = '我是中国人';
console.log(object);
复制代码

固然，真正要解决的问题远比上述复杂，好比更深层次的属性要利用到递归方法等等。

参考资料：

blog.csdn.net/yuhk231/art…

blog.csdn.net/mapbar_fron…