proxy 和 reflect的使用

109 阅读1分钟

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

 对象。我们通过 `