javascript 监听对象属性的变化
许多优秀的MVVM框架都实现了数据的双向绑定。Vue.js采用监听-回调的方式来实现一向功能。监听回调的一般写法是这样的: obj.watch(pro,function(new_value,old_value,_this){ });那么如何实现watch函数呢?Vue的实现是通过Object.defineProperty()这个函数来实现,通过定义set和get属性的,来达到改变对象的值
·
许多优秀的MVVM框架都实现了数据的双向绑定。Vue.js采用监听-回调的方式来实现一向功能。监听回调的一般写法是这样的:
obj.watch(pro,function(new_value,old_value,_this){ });
那么如何实现watch函数呢?Vue的实现是通过Object.defineProperty()这个函数来实现,通过定义set和get属性的,来达到改变对象的值时调用用回调函数的目的。首先我们来看一下关于Object.defineProperty()这个函数的
用法:
var temperature = undefined;
Object.defineProperty(obj, 'temperature', {
get: function() {
return temperature;
},
set: function(value) {
temperature = value;
}
});
于是,当我们执行 obj.temperature =XX时,set函数就会自动调用,这为我们执行回调函数提供了契机。
所以完整的代码实现代码如下:
var obj = {
watch:function(pro,callback){
if(pro in this){
var old = this[pro];
Object.defineProperty(this,pro,{
set:function(val){
var o = old;
old = val;
callback(val,o,this);
},
get:function(){
return old;
}
});
} else {
throw new Error("no such property");
}
},
toString:function(){
var str = "{ ";
for(pro in this){
if(typeof this[pro] !== "function" )
str += (pro + " : " + obj[pro] + ",")
}
str[str.length-1] = ' ';
str += " }";
return str;
}
}
obj.a = 3;
obj.watch("a",function(n,o,_this){
console.log("new val = " + n
+"old val = " + o + " this is : " + (_this ));});
obj.a = 4;
以下是运行结果:
更多推荐
已为社区贡献1条内容
所有评论(0)