ES6基础入门教程(十八)proxy拦截器

Proxy用于拦截对元素的行为。类似于class种的set和get,有多达13种方式。

简单例子:


监听取值行为

let a = new Proxy({},{
    get:(t,p)=>{
        return 35;
    }
})
console.log(a.name);
// 35

如果里面什么都不写,会直接指向该对象。

let b = new Proxy({},{
    // 如果里面什么都不写,等于直接指向该对象
})
b["a"] = "aaa"
console.log(b["a"]);

看到这里,你可能有点懵逼,我再把例子写简单点。

let a = new Proxy({},{
    get:(t,p)=>{
        // t 指a对象本身
        // p 指访问的属性
        if(p="name"){
            console.log(123);
        }
    }
})
//当name被访问的时候 打出123
a.name

然后你此刻必定恍然大悟,卧槽!原来如此。
但是,如果只能实现一个get,那他跟class里面get和set就没区别了呀!
是的,这函数最牛逼的地方在于,他能监听13种操作。。比class里面的get和set牛逼太多了。。

再来一个,假定我们要删除某个属性值:


注意:我们是拦截删除操作,如果你真要删除,你还是得再方法里执行delete..

let obj = {
    num:123,
    brs:22222
};
let arrp = new Proxy(obj,{
    deleteProperty(t,k) {
        console.log(k);
        if(k=="brs"){
            console.log("你无法删除brs");
            return false;
        }
        // 执行删除操作
        delete t[k]
        // 必须返回一个值
        return true;
    }
})
// 正常删除 因为返回true
console.log(arrp.num);
delete arrp.num
console.log(arrp.num);


console.log(arrp.brs);
delete arrp.brs // 如果你尝试删除brs就会报错
console.log(arrp.brs);

这是因为我们设置了阻挡删除 才报得错,这是正常的。

阻挡报错

他总共可以拦截13种操作: 使用的方式都大同小异。

方法 作用
get(target, propKey, receiver) 拦截对象属性的读取,比如proxy.foo和proxy['foo']
set(target, propKey, value, receiver) 拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。
has(target, propKey) 拦截propKey in proxy的操作,返回一个布尔值。
deleteProperty(target, propKey) 拦截delete proxy[propKey]的操作,返回一个布尔值。
ownKeys(target) 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey) 拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
defineProperty(target, propKey, propDesc) 拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
preventExtensions(target) 拦截Object.preventExtensions(proxy),返回一个布尔值。
getPrototypeOf(target) 拦截Object.getPrototypeOf(proxy),返回一个对象。
isExtensible(target) 拦截Object.isExtensible(proxy),返回一个布尔值。
setPrototypeOf(target, proto) 拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
apply(target, object, args) 拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args) 拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。

你可能感兴趣的:(ES6基础入门教程(十八)proxy拦截器)