Proxy、Reflect和WeakMap是ES6中引入的三个新的JavaScript特性。
Proxy
Proxy对象用于定义基本操作的自定义行为(例如属性查找、赋值、枚举、函数调用等)。
const handler = {
get(target, prop, receiver) {
console.log(`GET ${prop}`);
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`SET ${prop} = ${value}`);
return Reflect.set(target, prop, value, receiver);
}
};
const target = { foo: 'bar' };
const proxy = new Proxy(target, handler);
proxy.foo; // 控制台输出: GET foo
proxy.foo = 'baz'; // 控制台输出: SET foo = baz
在上面的例子中,
Reflect
const obj = {
foo: 1,
bar: 2,
get baz() {
return this.foo + this.bar;
}
};
console.log(Reflect.get(obj, 'foo')); // 1
console.log(Reflect.set(obj, 'foo', 3)); // true
console.log(obj.foo); // 3
在上面的例子中,
WeakMap
const weakMap = new WeakMap();
const obj1 = {};
const obj2 = {};
weakMap.set(obj1, 'hello');
weakMap.set(obj2, 'world');
console.log(weakMap.get(obj1)); // 'hello'
console.log(weakMap.get(obj2)); // 'world'
// 当obj1和obj2被清除后,weakMap中的条目也会自动被清除
obj1 = null;
obj2 = null;
在上面的例子中,
这三个特性结合起来,可以用于实现私有变量、函数柯里化、数据绑定等高级功能。例如,结合
const privateData = new WeakMap();
class Person {
constructor(name, age) {
privateData.set(this, { name, age });
}
get name() {
return privateData.get(this).name;
}
get age() {
return privateData.get(this).age;
}
}
const person = new Person('Alice', 25);
console.log(person.name); // 'Alice'
console.log(person.age); // 25
在这个例子中,