题说proxy

2018-06-24 01:55:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

昨天在和群友讨论时遇到一题是这样的。

题目描述

//Tomy非常敏感,不喜欢别人碰他的东西。一旦有人碰他就会大喊Don't Touch Me.
//完成tomy这个对象,禁止对tomy的内容进行修改(增加、修改、删除)
//一旦有人对tomy进行任何的修改,调用console.log打印Don't Touch Me
const tomy={
    name:"lizhiqiang",
    age:"23"
};

 

题目分析

刚开始我觉得可以通过es5中的defineProperty去定义访问器属性,当要修改tomy的属性时,就可以console.log信息出来。

可是这样的话无法做到当要删除属性时,以及要增加属性时,console.log信息。也就是说defineProperty提供给我们的权限还不够,我们需要更加底层的操作。

那么要怎么做呢?

只能使用ES6中的proxy来做啦。

题目要求我们在修改之前console信息,也就是需要我们拦截下修改操作,并在此之前console信息。

 

proxy简介

通过调用 new Proxy() ,你可以创建一个代理用来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当作同一个对象来对待。

代理允许你拦截在目标对象上的底层操作,而这原本是 JS 引擎的内部能力。拦截行为使用了一个能够响应特定操作的函数(被称为陷阱)。

 被 Reflect 对象所代表的反射接口,是给底层操作提供默认行为的方法的集合,这些操作是能够被代理重写的。每个代理陷阱都有一个对应的反射方法,每个方法都与对应的陷阱函数同名,并且接收的参数也与之一致。下表总结了这些行为:

 

好了,针对题目要求,我们只需要写代理陷阱set、deleteProperty就行。

 

代码

//Tomy非常敏感,不喜欢别人碰他的东西。一旦有人碰他就会大喊Don't Touch Me.
//完成tomy这个对象,禁止对tomy的内容进行修改(增加、修改、删除)
//一旦有人对tomy进行任何的修改,调用console.log打印Don't Touch Me
const tomy={
    name:"lizhiqiang",
    age:"23"
};
let tomyProxy=new Proxy(tomy,{
    deleteProperty(trapTarget,key){
        console.log("Don't Touch Me--delete "+key);
        return false;
    },
    set(trapTarget, key, value, receiver) {
        if (!trapTarget.hasOwnProperty(key)) {
            console.log("Don't Touch Me--add "+key);
        }else{
            console.log("Don't Touch Me--update "+key);
        }
        return false;
    }
});
console.log(tomyProxy);
Object.freeze(tomyProxy);
delete tomyProxy.age;//删除属性
console.log(tomyProxy);
tomyProxy.age=1;//修改属性
console.log(tomyProxy);
tomyProxy.phone="123456789";//增加属性
console.log(tomyProxy);

运行结果如下,可见这样是可行的。

其实es6的proxy和symbol还有很多值得深入学习的呀,以后会慢慢练习使用。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:html2canvas 实现dashed虚线边框

下一篇:[持续开源]基于nodejs+ligerui的一款mongodb web 端查询工具(Mo