一、对象赋值的两种方式
一是“=”赋值,一是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了
二、为什么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被重新定义
三、框架里的具体做法是怎样的呢?
一句话描述,就是把在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);
当然,真正要解决的问题远比上述复杂,比如更深层次的属性要利用到递归方法等等。
参考资料: