javascript 监听对象属性的变化

  许多优秀的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;

以下是运行结果：