ECMAScript 6 学习系列课程 (ES6 proxy和Reflect的相关用法)

23 篇文章 0 订阅

这里写图片描述

使用Javascript ES6的Proxy实现元编程, 如果你熟悉Java,这非常类似Java中的动态代理模式,在ES6中Proxy, Reflect实现了代理和反射机制,这样说大家可能比较生涩,我们还是看一下具体代码:

let target = {
    foo: "Welcome, foo"
}
let proxy = new Proxy(target, {
    get (receiver, name) {
        return name in receiver ? receiver[name] : `Hello, ${name}`
    }
})
proxy.foo   === "Welcome, foo"
proxy.world === "Hello, world"

上面代码中,首先声明了一个对象,并带有一个foo的属性,之后new 一个 proxy对象,用预先声明的对象作为target, 每一个proxy对象中都会存在两个方法一个是get, 一个是set。

当仅仅调用属性,而不赋值的时候,将会调用代理中的get方法,如果赋值会调用set方法。

在上面实现中,get(receiver, name), receiver参数即为target对象, name是我们传递的属性。 判断一个属性是否在对象中存在,我们可以用in方法判断。

var obj = new Proxy({}, {
      get: function (target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function (target, key, value, receiver) {
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
      }
    });

使用结果:

> obj.count = 1;
        setting count!
    > ++obj.count;
        getting count!
        setting count!
        2

Reflect主要作用就是讲原有对象进行操作赋值,在反射回来,当然这样的解释很牵强,但是这个更好理解,上面Reflect就是一个简单实现。

其实Relect还有一个用法,就是获取一个对象中的所有属性,比如:

let obj = { a: 1 }
Object.defineProperty(obj, "b", { value: 2 })
obj[Symbol("c")] = 3
Reflect.ownKeys(obj) // [ "a", "b", Symbol(c) ]

对应的ES5代码实现方式:

var obj = { a: 1 };
Object.defineProperty(obj, "b", { value: 2 });
// no equivalent in ES5
Object.getOwnPropertyNames(obj); // [ "a", "b" ]

所以ES6的诸多机制和用法,还是值得思考的使用的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天外野草

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值