ECMAScript 2017（ES8）中 JavaScript 的新概念：reflect 和 proxy-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一门非常灵活的语言，在 ES8 中引入了两个新概念：reflect 和 proxy。这两个新的概念为开发者们提供了更多的工具来控制对象的行为。本文将会介绍这两个新概念，包括详细的说明和使用示例。

Reflect

Reflect 对象是一个内置对象，它提供了许多用于操作对象的静态方法。它主要用于执行和对象相关的默认操作，并且这些操作可以被代理。它能让代码更加清晰易懂，代码逻辑更加简单。

Reflect.has()

Reflect.has() 方法返回一个布尔值，表示对象属性是否存在。这个方法和 in 运算符表现一致。

const person = {
  name: "Lucy",
  age: 20
};

console.log(Reflect.has(person, "name")); // true
console.log(Reflect.has(person, "gender")); // false

Reflect.get()

Reflect.get() 方法返回对象某个属性的值。它可以在被代理之前的对象上执行。

const person = {
  name: "Lucy",
  age: 20
};

console.log(Reflect.get(person, "name")); // Lucy
console.log(Reflect.get(person, "gender")); // undefined

Reflect.set()

Reflect.set() 方法用于设置对象属性的值。它可以在被代理之前的对象上执行。

// javascriptcn.com 代码示例
const person = {
  name: "Lucy",
  age: 20
};

Reflect.set(person, "age", 21);
console.log(person.age); // 21

Reflect.set(person, "gender", "female");
console.log(person.gender); // female

Reflect.deleteProperty()

Reflect.deleteProperty() 方法用于删除对象属性。它可以在被代理之前的对象上执行。

const person = {
  name: "Lucy",
  age: 20
};

Reflect.deleteProperty(person, "age");
console.log(person.age); // undefined

Reflect.construct()

Reflect.construct() 方法创建一个实例对象。它跟 new 的功能一样，但是可以传递任意数量的参数。

// javascriptcn.com 代码示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = Reflect.construct(Person, ["Lucy", 20]);
console.log(person.name); // Lucy
console.log(person.age); // 20

Reflect 还提供了很多其他的静态方法，例如 Reflect.defineProperty()、Reflect.getOwnPropertyDescriptor() ，这里就不再一一举例。

Proxy

Proxy 对象用于定义基本操作的自定义行为（例如属性查找、赋值、枚举、函数调用等）。我们可以使用 Proxy 对象对对象进行拦截操作，实现数据监控和操作控制。

创建 Proxy 对象

创建 Proxy 对象非常简单，只需要使用 new 关键字和 Proxy 构造函数即可。

const target = {};
const handler = {};

const proxy = new Proxy(target, handler);

proxy.test = 123;
console.log(target.test); // 123

在上面的示例中，我们定义了一个空的 target 对象，并且使用了一个空对象 handler 来创建 Proxy 对象，然后我们向 proxy 对象中添加了一个 test 属性，并赋值为 123。由于 proxy 对象是 target 对象的代理，因此 test 属性也被添加到了 target 对象中。

拦截 Proxy 对象的属性读写

可以使用 handler 对象来拦截 Proxy 对象的属性读写操作。

// javascriptcn.com 代码示例
const target = {};
const handler = {
  get: function(target, key) {
    console.log(`Getting value for ${key} property`);
    return target[key];
  },
  set: function(target, key, value) {
    console.log(`Setting value ${value} for ${key} property`);
    target[key] = value;
  }
};

const proxy = new Proxy(target, handler);

proxy.test = 123;
console.log(proxy.test); // Getting value for test property 123

在上面的示例中，我们使用 get 和 set 方法来拦截 Proxy 对象的属性读写操作。当使用 proxy 对象获取 test 属性时，会执行 get 方法中的逻辑。当向 proxy 对象的 test 属性赋值时执行 set 方法中的逻辑。

拦截 Proxy 对象的函数调用

可以使用 handler 对象来拦截 Proxy 对象的函数调用。

// javascriptcn.com 代码示例
const target = {
  add: function(a, b) {
    return a + b;
  }
};
const handler = {
  apply: function(target, thisArg, args) {
    console.log(`Calling function with arguments: ${args}`);
    return target.apply(thisArg, args);
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.add(1, 2)); // Calling function with arguments: 1,2 3

在上面的示例中，我们使用 apply 方法来拦截 Proxy 对象的函数调用操作。当使用 proxy 对象调用 add 函数时，会执行 apply 方法中的逻辑。

总结

ES8 中引入的 Reflect 和 Proxy 对象为开发者们提供了更多的工具来控制对象的行为。在实际开发中，我们可以使用这两个对象来实现数据监控、控制等功能。在掌握 Reflect 和 Proxy 对象的基础使用之后，可以更深入地理解和使用这两种对象。

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