JS高级十二、Proxy-Reflect

1、Proxy

Object.defineProperty(obj, prop, descriptor)
返回值：被传递给函数的对象。

参数
obj	要定义属性的对象
prop	要定义或修改的属性的名称或Symbol
descriptor	要定义或修改的属性描述符

监听对象中的name属性：

let obj = { name:"jerry", age:20 }
Object.defineProperty(obj,"name",{
    get:function(){
        console.log("监听到obj对象的name属性被访问了");
        return "666";
    },
    set:function(){
        console.log("监听到obj对象的name属性被设置了");
    }
})

console.log(obj.name);  //监听到obj对象的name属性被访问了  666
obj.name = "tom";  //监听到obj对象的name属性被设置了

不足：
1、Object.defineProperty设计初衷并不是监听对象中的属性
2、如果对象非常复杂，需要递归去监听，一旦递归，性能非常差
3、有些属性监听不了，如添加属性、删除属性…

ES6引入了Proxy类，如果要监听一个对象的相关操作，可以创建一个代理类，之后该对象的所有操作，都通过代码对象来完成，代理对象可以监听到对原始对象的操作。

let obj = { name:"tom",age:16 }
let objProxy = new Proxy(obj,{
    get:function(target,key){
        console.log(`监听到obj对象的${key}属性被访问了`,target);
        return target[key]
    },
    set:function(target,key,newValue){
        console.log(`监听到obj对象的${key}属性被设置了`,target);
        target[key] = newValue;
    }
})
console.log(objProxy.name);  //tom  监听到obj对象的name属性被访问了 { name: 'tom', age: 16 }
objProxy.name = "jerry";  //监听到obj对象的name属性被设置了 { name: 'tom', age: 16 }
console.log(objProxy.name);  //jerry  监听到obj对象的name属性被访问了 { name: 'jerry', age: 16 }

2、Reflect（ES6）

将原本属于Object身上的api，移植到Reflect身上。

• Reflect.set(target, propertyKey, value[, receiver])
• 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。

let obj = {name:"tom"}
let objProxy = new Proxy(obj,{
    get:function(target,key){
        return Reflect.get(target,key)  //替换target[key]
    },
    set:function(target,key,newValue){
        Reflect.set(target,key,newValue)  //Reflect.set
    }
})
objProxy.name = "jerry"
console.log(objProxy.name);  //jerry