美文网首页前端开发es6入门基础
ES6基础入门教程(十八)proxy拦截器

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

作者: 党云龙 | 来源:发表于2019-11-14 10:19 被阅读0次

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拦截器

    Proxy用于拦截对元素的行为。类似于class种的set和get,有多达13种方式。 简单例子: 监听取值行为 ...

  • 2019-01-15 Javascript Proxy

    proxy是es6里面标准化构造对象拦截器的类使用方法 基本用法 操作转发

  • ES6——Reflect 与 Proxy

    ES6 之 Proxy 介绍深入实践 ES6 Proxy & Reflect 1.Proxy Proxy 可以对目...

  • proxy学习笔记

    proxy 在目标对象的外层搭建一层拦截器,外界对目标对象的操作必须经过拦截器。var proxy = new P...

  • 你了解vue3.0响应式数据怎么实现吗?

    从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是”代理“,ES6对Proxy的定位就是targ...

  • ES6中的Reflect与Proxy(个人笔记)

    概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy:Proxy 可以对目...

  • es6 proxy

    # ES6之proxy ## 是什么 Proxy是一个构造器。通过new Proxy(原对象,{代理列表})的方式...

  • Proxy拦截器

    1.对于对象的简单拦截定义两个对象 创建一个拦截器 调用就会启用拦截器 第一次使用proxy拦截器,感觉挺有意思,...

  • Proxy和Reflect

    Proxy和Reflect 拦截操作get(target,propKey,receiver) 读取属性时拦截拦截器...

  • JavaScript之Proxy

    Proxy代理是一个共通的概念,可以起到拦截的作用。ES6里将Proxy标准化了,提供了Proxy构造函数,用来生...

网友评论

    本文标题:ES6基础入门教程(十八)proxy拦截器

    本文链接:https://www.haomeiwen.com/subject/byglictx.html