Proxy
和
Reflect
是 ES6 中新增的两个特性,它们的主要作用是拦截并改变 JavaScript 的底层操作,从而实现一些高级的功能。
Proxy
可以拦截对象的读取、赋值、函数调用等操作,而
Reflect
则可以对这些操作进行反射处理,例如获取对象的属性、调用对象的方法等。
下面是一个简单的例子,演示了
Proxy
和
Reflect
的用法:
const target = {
name: 'John',
age: 30
};
const handler = {
get: function(target, prop) {
if (prop === 'age') {
return Reflect.get(target, prop) + ' years old';
}
return Reflect.get(target, prop);
},
set: function(target, prop, value) {
if (prop === 'name') {
console.log(`Setting name to ${value}`);
}
return Reflect.set(target, prop, value);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // John
console.log(proxy.age); // 30 years old
proxy.name = 'Jane'; // Setting name to Jane
console.log(proxy.name); // Jane
在上面的例子中,我们创建了一个
target
对象,然后使用
Proxy
对其进行了代理。我们定义了一个
handler
对象,其中包含了
get
和
set
两个方法,用于拦截对象的读取和赋值操作。
在
get
方法中,我们判断了要获取的属性是否为
age
,如果是,则返回该属性的值加上
' years old'
。在其他情况下,我们直接调用
Reflect.get
方法获取属性的值。
在
set
方法中,我们判断了要设置的属性是否为
name
,如果是,则输出一条日志。然后,我们调用
Reflect.set
方法设置属性的值。
最后,我们创建了一个
proxy
对象,它代理了
target
对象。我们通过 `