关于JS代理劫持扩展属性修改新老对比

       关于代理劫持扩展属性修改，ES5标准中利用Object.defineProperty()方法进行修改，理解起来较为晦涩，代码量较大。而ES6标准引入Proxy内建对象，是一种可以拦截并改变底层JS引擎的包装器，让代理劫持扩展属性修改简单易理解。

一、ES5代理劫持扩展属性修改

       let data={//被劫持对象定义

              userName:"张小玉",

              age:34,

              address:"成都市"

       };

       let  _this={ };//代理对象

       for(let item in data){

              Object.defineProperty(_this,item,{ //利用object.defineproperty()进行

                     get(){//get()方法用来获取扩展属性值

                            console.log("触发get()");

                            return data[item];

                     },

                     set(newVlue){//监视扩展性的，只要一修改就调用，newVlue为待修改的值

                     console.log("触发set()",newVlue);//输出结果：触发set() 孙小小

                     // _this.userName="孙小小";//千万不要在set方法中直接修改扩展性值，否则会造成死循环

                     data[item]=newVlue;//无法set直接修改，但可以间接修改

                 }

              });

       };

console.log(_this);//输出结果：张小玉，此为修改前

//通过Object.defineProperty的get方法获得的属性值，不能直接用对象.属性去修改,但是会触发set方法

_this.userName="孙小小";//修改劫持的扩展属性

console.log(_this.userName);//输出结果：孙小小，此为修改后

二、ES6代理劫持扩展属性修改

    let data={//被劫持对象定义

              userName:"张小玉",

              age:34,

              address:"成都市"

       };

       let _this1=new Proxy(data,{ });//利用Proxy定义代理对象，Proxy有两个参数，第一个是目标target，第二个是处理程序handler。

       console.log(_this1); //输出结果：张小玉，此为修改前

       _this1.userName="田小丽";//修改劫持的扩展属性

       console.log(_this1); //输出结果：田小丽，此为修改后