ES6 中的 Proxy 和 Reflect 详解-JavaScript中文网-JavaScript教程资源分享门户

前言

ES6 中的 Proxy 和 Reflect 是两个非常强大的特性，它们让 JavaScript 的面向对象编程变得更加灵活和强大。Proxy 是用于创建对象包装器的 API，它允许我们用自己的逻辑来代理对对象的访问，而 Reflect 则是一组静态方法，它们提供了对 Proxy 的访问以及一些操作的支持。在本文中，我们将深入了解 Proxy 和 Reflect，看看它们如何帮助我们在前端开发中更好地解决问题。

Proxy

在 ES5 中，我们可以使用 Object.defineProperty() 来修改对象属性的 getter 和 setter，以实现数据双向绑定、数据验证等等。但这种方法并不是很优雅，因为它需要对每个属性都进行手动处理，并且很难支持动态添加/删除属性和处理嵌套对象。而使用 Proxy 可以轻松地解决这些问题。

基本用法

Proxy 可以通过新建一个代理来代替原始对象，然后可以在代理中添加逻辑。下面是一个简单的示例，它使用一个代理来拦截 set 操作，使得无法设置属性值小于 0：

// javascriptcn.com 代码示例
const target = {
  value: 1,
};

const proxy = new Proxy(target, {
  set(target, key, value) {
    if (key === 'value' && value < 0) {
      throw new Error('不允许设置负数');
    }

    target[key] = value;
  },
});

proxy.value = 2;  // 通过
proxy.value = -1; // 抛出错误

在上面的代码中，我们新建了一个代理 proxy，并拦截了 set 操作。在 set 操作中，我们判断了 key 是否为 value，以及 value 是否为负数，如果不满足这两个条件之一，就抛出一个错误；否则就将值设置到对象 target 中。

代理嵌套

在一个对象属性中嵌套另一个对象时，我们希望能够在外层代理的对象中拦截内层对象的访问和操作。下面是一个示例，它使用代理嵌套模式，使得可以拦截外层对象和内层对象的访问和操作：

// javascriptcn.com 代码示例
const target = {
  name: '小明',
  age: 18,
  address: {
    city: '北京',
    district: '朝阳',
  },
};

const nestedProxy = new Proxy(target.address, {
  get(target, key) {
    console.log(`get ${key}`);

    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key} to ${value}`);

    target[key] = value;
  },
});

const proxy = new Proxy(target, {
  get(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], nestedProxy);
    }

    console.log(`get ${key}`);

    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key} to ${value}`);

    target[key] = value;
  },
});

console.log(proxy.address.city);            // get address, get city
proxy.address.city = '上海';                // get address, set city to 上海
console.log(target.address.city);           // 上海

在上面的代码中，我们先新建了一个代理嵌套对象 nestedProxy 和一个外部代理 proxy。在外部代理的 get、set 拦截器中，我们都检查了当前属性值是否为对象，如果是就返回一个新的代理嵌套对象。当访问外层对象 proxy.address.city 时，我们首先拦截了 proxy 对象的 get 操作，返回了一个新的代理嵌套对象 nestedProxy。当访问或者修改嵌套对象属性时就会调用 nestedProxy 中的 get、set 方法。

this

由于 Proxy 是一个代理，它并不会改变对象中的 this 引用。下面是一个示例，它演示了 Proxy 中 this 的使用：

// javascriptcn.com 代码示例
const target = {
  value: 0,
  increment() {
    this.value++;
  },
};

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    if (key === 'increment') {
      return target.increment.bind(receiver);
    }

    return Reflect.get(target, key, receiver);
  },
});

proxy.increment();
console.log(proxy.value); // 1

在上面的代码中，我们首先新建了一个对象 target，它包含属性 value 和方法 increment。然后使用代理 proxy 来代替 target，并拦截了 get 操作。在 get 操作中，我们对 key === 'increment' 进行了特殊处理，返回了一个绑定了 receiver 的增量函数。

Proxy 和 Object.defineProperty() 的比较

虽然 ES6 中的 Proxy 对象与 Object.defineProperty() 有着相似的功能，但两者的区别还是比较大的。这里我们对两者进行简单的比较：

语法：使用 Proxy 时只需要使用 new Proxy() 方法即可创建一个代理对象，而使用 Object.defineProperty() 则需要手动设置 get 和 set 属性。
功能：Proxy 对象能够代理整个对象，而 Object.defineProperty() 只能代理单个属性。Proxy 还支持拦截更多的操作，如函数调用等。
性能：Proxy 会比 Object.defineProperty() 更慢，因为它需要动态生成代理代码并执行。
兼容性：Proxy 是 ES6 引入的新特性，而 Object.defineProperty() 则是 ES5 中就已经存在的特性，因此 Proxy 在一些浏览器中并不完全支持。

Reflect

Reflect 是一个全局对象，它提供了对默认对象操作的一些方法，这些方法可以提供更加友好的函数式编程接口。虽然 Reflect 并没有发挥 Proxy 那么大的作用，但它作为 Proxy 的辅助对象，提供了某些操作的默认行为，还是非常重要的。

常用函数

下面是一些常用的 Reflect 函数：

Reflect.apply(func, thisArg, args)：调用 func 函数，并将 thisArg 作为上下文和 args 作为参数。类似于 Function.prototype.apply() 方法。
Reflect.construct(func, args)：将 args 作为参数调用构造函数 func，并返回一个新对象。类似于 new 操作符。v
Reflect.defineProperty(target, propertyKey, attributes)：在 target 对象上定义一个新的属性或修改一个已有属性，并返回一个布尔值表示是否成功。
Reflect.deleteProperty(obj, key)：删除 obj 对象上的属性 key，并返回一个布尔值表示是否删除成功。
Reflect.get(target, propertyKey, receiver)：获取 target 对象的指定属性 propertyKey，如果属性不存在则返回 undefined。
Reflect.getOwnPropertyDescriptor(obj, key)：获取 obj 对象上的 key 属性的属性描述对象。
Reflect.getPrototypeOf(obj)：获取 obj 对象的原型（__proto__）。
Reflect.has(obj, key)：检查 obj 对象是否有某个属性，返回一个布尔值。
Reflect.isExtensible(obj)：检查 obj 对象是否可扩展，返回一个布尔值。
Reflect.ownKeys(obj)：获取 obj 对象的所有（自有和继承）属性的名称。
Reflect.preventExtensions(obj)：禁止向 obj 对象添加新的属性或方法，并返回一个布尔值表示是否成功。
Reflect.set(target, propertyKey, value, receiver)：将 target 对象的属性 propertyKey 的值设为 value，并返回一个布尔值表示是否成功。如果 receiver 被 provide 作为函数调用时，它将是用作 "this" 的收件人。
Reflect.setPrototypeOf(obj, prototype)：设置 obj 对象的原型为 prototype，并返回一个布尔值表示是否成功。

功能示例

下面是一些使用示例：

// javascriptcn.com 代码示例
// 规范 set 操作
const value = 1;
let target = {};

Reflect.set(target, 'value', value); // true

if (Reflect.has(target, 'value')) {
  const descriptor = Reflect.getOwnPropertyDescriptor(target, 'value');
  if (descriptor) {
    if (descriptor.writable && descriptor.configurable) {
      Reflect.set(target, 'value', value + 1);
    }
  }
}
console.log(target.value); // 2

// 使用构造函数创建对象
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, I'm ${this.name}, ${this.age} years old.`);
  }
}

const args = ['小明', 18];
const person = Reflect.construct(Person, args);
person.sayHello(); // Hello, I'm 小明, 18 years old.

// 防止对象扩展并证明其默认状态
const obj1 = {};
console.log(Reflect.isExtensible(obj1)); // true

Reflect.preventExtensions(obj1);
console.log(Reflect.isExtensible(obj1)); // false

obj1.value = 1;
console.log(obj1.value); // undefined

// 把对象对象冻结并证明其默认状态
const obj2 = { value: 10 };
Reflect.freeze(obj2);

obj2.value = 20;
console.log(obj2.value); // 10

// 遍历对象，获取其所有属性
const obj3 = { a: 1, b: 'string', [Symbol('c')]: true };
console.log(Reflect.ownKeys(obj3)); // ['a', 'b', Symbol(c)]

总结

在本文中，我们详细地介绍了 ES6 中的 Proxy 和 Reflect，它们能够帮助我们更加容易地实现代理模式、验证数据、处理嵌套对象，以及提供一些默认的类的操作。虽然 Proxy 相对于 Object.defineProperty() 存在一定的性能问题，但它的功能和灵活性更加突出。在实际项目中，我们可以使用 Proxy 和 Reflect 帮助我们解决许多面向对象编程的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653a30797d4982a6eb40221f