美文网首页
ES6中Proxy和Reflect

ES6中Proxy和Reflect

作者: 书虫和泰迪熊 | 来源:发表于2020-11-11 18:20 被阅读0次

    Proxy

    《ECMAScript6入门》中式这样描述的

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

    简单使用如下:

    let obj = {
        age: 20,
        name: "dingding"
    }
    
    var p = new Proxy(obj, {
        get: function (target, key) {
            return 100;
        },
        set: function(target, key, val) {              //  p.name = "coco"   会出发这个set函数
            console.log(11, target, key, val);
            target[key] = val;
        },
        construct: function(target, args) {
            return {value: args[1]}
        }
    })
    
    p.name    // 100
    

    Proxy支持的拦截操作公有13种:https://es6.ruanyifeng.com/#docs/proxy

    Reflect

    Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。
    Reflect 和 Proxy 的 API 一一对应。
    Reflect对象的设计目的有下面4个。

    1. 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。
    2. 修改某些Object方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。
    3. 让Object操作都变成函数行为。某些Object操作是命令式,比如name in obj和delete obj[name],而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
    4. Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法,完成默认行为,作为修改行为的基础。也就是说,不管Proxy怎么修改默认行为,你总可以在Reflect上获取默认行为。

    相关文章

      网友评论

          本文标题:ES6中Proxy和Reflect

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