0
点赞
收藏
分享

微信扫一扫

JS高级十二、Proxy-Reflect

minute_5 2022-03-15 阅读 69

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身上。

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
举报

相关推荐

0 条评论