1.Object.defineProperty(obj,key,desc);

　　用法：1.给对象新增属性和特性

　　　　　2.修改对象属性值和特性

　　　　　　desc（属性特性）：

　　　　　　　　1.enumerable：boolean 可枚举

　　　　　　　　2.writable ：boolean 可写

　　　　　　　　3.value：any 赋值

　　　　　　　　4.get 取值

　　　　　　　　5.set 改值

2.思路：

　　对象的赋值和改值其实是通过Object.defineProperty的get和set特性来实现的，一般默认模式。

　　通过改写属性的get和set的特性，来实现对一个对象的监听。

3.举例：

　　

var obj = {age:23};
console.log(obj.age);    //23

Object.defineProperty(obj,'age',{
    get(){
        return 24;
    }    
});
console.log(obj.age);  //24

obj.age = 25;
console.log(obj.age);  //24

　　原理：对象属性和赋值取值都会触发自身的get和set特性。

4.实现：

 /*js 监听器*/
    var transi = "";
    function observe(obj,key){
      if(obj[key] && (typeof obj[key] == 'object')){
        Object.keys(obj[key]).forEach((v,index)=>{
          observe(obj[key],v,obj[key][v]);
        });
      } else {
        Object.defineProperty(obj,key,{
          set(newV){
            transi = newV;
            console.log('值改变');
          },
          get(){
            console.log('新值为' + transi);
            return transi;
          }
        })
      }
    }
    var obj = {name : 'wang',age:{max:12,good:{at:30}}};
    observe(window,'obj');
    obj.age.good.at = 44;
    console.log(obj.age.good.at);

　　

posted on 2018-07-06 10:43 changYao 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为changyaoself原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/changyaoself/p/9272343.html