javascript 监听对象属性的变化

来源：互联网发布：出奇制胜软件编辑：程序博客网时间：2024/05/17 07:53

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

以下是运行结果：

0 0