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")); // falseReflect.get()
Reflect.get() 方法返回对象某个属性的值。它可以在被代理之前的对象上执行。
const person = {
name: "Lucy",
age: 20
};
console.log(Reflect.get(person, "name")); // Lucy
console.log(Reflect.get(person, "gender")); // undefinedReflect.set()
Reflect.set() 方法用于设置对象属性的值。它可以在被代理之前的对象上执行。
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- -- ------------------- ------ ---- ------------------------ -- -- ------------------- --------- ---------- --------------------------- -- ------
Reflect.deleteProperty()
Reflect.deleteProperty() 方法用于删除对象属性。它可以在被代理之前的对象上执行。
const person = {
name: "Lucy",
age: 20
};
Reflect.deleteProperty(person, "age");
console.log(person.age); // undefinedReflect.construct()
Reflect.construct() 方法创建一个实例对象。它跟 new 的功能一样，但是可以传递任意数量的参数。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
-
----- ------ - ------------------------- -------- -----
------------------------- -- ----
------------------------ -- --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 对象的属性读写操作。
-- -------------------- ---- -------
----- ------ - ---
----- ------- - -
---- ---------------- ---- -
-------------------- ----- --- ------ -----------
------ ------------
--
---- ---------------- ---- ------ -
-------------------- ----- -------- --- ------ -----------
----------- - ------
-
--
----- ----- - --- ------------- ---------
---------- - ----
------------------------ -- ------- ----- --- ---- -------- ---在上面的示例中，我们使用 get 和 set 方法来拦截 Proxy 对象的属性读写操作。当使用 proxy 对象获取 test 属性时，会执行 get 方法中的逻辑。当向 proxy 对象的 test 属性赋值时执行 set 方法中的逻辑。
拦截 Proxy 对象的函数调用
可以使用 handler 对象来拦截 Proxy 对象的函数调用。
-- -------------------- ---- -------
----- ------ - -
---- ----------- -- -
------ - - --
-
--
----- ------- - -
------ ---------------- -------- ----- -
-------------------- -------- ---- ---------- ----------
------ --------------------- ------
-
--
----- ----- - --- ------------- ---------
------------------------ ---- -- ------- -------- ---- ---------- --- -在上面的示例中，我们使用 apply 方法来拦截 Proxy 对象的函数调用操作。当使用 proxy 对象调用 add 函数时，会执行 apply 方法中的逻辑。
总结
ES8 中引入的 Reflect 和 Proxy 对象为开发者们提供了更多的工具来控制对象的行为。在实际开发中，我们可以使用这两个对象来实现数据监控、控制等功能。在掌握 Reflect 和 Proxy 对象的基础使用之后，可以更深入地理解和使用这两种对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65289f1f7d4982a6ebb25546