使用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的诸多机制和用法,还是值得思考的使用的。