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;

以下是运行结果：