20+行代码使用es5 Object.defineProperty 实现简单的watch功能

 /**
  * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效
  */
 $watch=function(myObject,callback){
     function initWatch(obj){
         for(var i in obj){
             if(typeof obj!='object'){
                 return;
             }
             (function(value,o,attr){
                 var v=value;
                 var oldValue=value;
                 Object.defineProperty(o,attr,{
                     get:function(){
                         return v;
                     },
                     set:function (newValue){
                         oldValue=v;
                         v=newValue;
                         callback(newValue,oldValue)
                     }
                 });
             })(obj[i],obj,i);
             initWatch(obj[i]);
         }
     }
     initWatch(myObject);
 };
 var a={
 　　name:'Lee',
 　　background:{
 　　　　hometown:'De Zhou',
 　　　　presentAddr:'Texas'
 　　}
 }
 $watch(a,function(newValue,oldValue){
 　　console.log(a.name+" moved from "+ oldValue + " to " + newValue);
 })
 a.background.presentAddr="New York"
 //Lee moved from Texas to New York
 //"New York"

　　Object.defineProperty()方法是实现vue双向绑定的重要api，关于该方法的详细信息可移步：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty。这里主要应用了其get/set函数的功能。对get/set方法而言，值得一提的是，当使用了get/set 方法后，原有的属性便已经被对应的get/set方法所替代。

　　以上代码简单模拟了对一个object的watch功能，模拟ng或vue中的watch，对一个对象进行监听，其中任一属性发生了改变随即执行callback。