在 ES9 中，引入了 Proxy 和 Reflect 对象，这两个对象的出现使得我们可以更好地对 JavaScript 对象的行为进行控制和观察，同时也为我们提供了更多的编程技巧。
Proxy 对象
Proxy 对象是 JavaScript 语言提供的一个对象，用来拦截并改变 JavaScript 对象的默认行为。Proxy 可以拦截对象的读取、赋值、函数调用等操作，可以用来实现一些常见的编程技巧，比如数据绑定、校验等功能。
Proxy 的基本用法
下面是一个简单的例子，演示了如何使用 Proxy 对象来拦截对象的读取操作。
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
----- ----- - --- ---------- -
----------- -------- --------- -
-------------------- ------------------
------ ------------------- -------- ----------
-
---
------------------------ -- -------
----------------------- -- -------- --------- --在上述例子中，我们使用了 Proxy 对象来代理原有的对象 obj，当访问代理对象 proxy 的某个属性时，就会触发 Proxy 的 get 方法，并在控制台输出相应的信息。
需要注意的是，我们在 Proxy 的 get 方法中调用了 Reflect.get 方法，这个方法会返回查询结果。如果我们没有调用这个方法，代理对象会一直返回 undefined。
Proxy 的常用拦截操作
除了 get 方法外，Proxy 还可以拦截其他一些对象的行为。下面是一些常用的拦截操作：
set(target, propKey, value, receiver)：用于拦截属性的遍历和设置。apply(target, thisArg, argArray)：用于拦截函数的调用。has(target, propKey)：用于拦截 in 操作符。
我们以 set 方法为例，来演示一下如何使用 Proxy 对象进行拦截操作。
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
----- ----- - --- ---------- -
----------- -------- ------ --------- -
-------------------- ------------ -- ----------------
------ ------------------- -------- ------ ----------
-
---
--------- - --- -- -------- ----- -- --------在上述例子中，我们使用 Proxy 对象来代理原有的对象 obj，当执行代理对象的属性赋值操作时，就会触发 Proxy 的 set 方法，并在控制台输出相应的信息。
需要注意的是，我们在 Proxy 的 set 方法中调用了 Reflect.set 方法，这个方法会返回是否赋值成功。如果我们没有调用这个方法，代理对象永远不会被赋值成功。
Reflect 对象
Reflect 对象是 ES6 中新增的一个对象，在 ES9 中增加了一些功能。Reflect 对象和 Proxy 对象一起使用，可以实现更多的编程技巧。
Reflect 对象的常用方法
下面是一些常用的 Reflect 对象的方法：
Reflect.apply(target, thisArg, argArray)：用于调用函数。Reflect.construct(target, argArray = [], newTarget)：用于实例化对象。Reflect.defineProperty(target, propKey, propDesc)：用于定义对象的属性。Reflect.deleteProperty(target, propKey)：用于删除对象的属性。Reflect.get(target, propKey, receiver)：用于获取对象的属性值。Reflect.has(target, propKey)：检查一个对象是否拥有某个属性。Reflect.set(target, propKey, value, receiver)：用于设置对象的属性值。
我们以 Reflect.get 方法为例，来演示一下如何使用 Reflect 对象进行拦截操作。
const obj = { name: 'Alice', age: 20 };
console.log(Reflect.get(obj, 'name')); // 'Alice'
console.log(Reflect.get(obj, 'age')); // 20在上述例子中，我们使用 Reflect 对象的 get 方法，获取了 obj 对象中的 name 和 age 属性的值。
和 Proxy 的配合使用
Proxy 和 Reflect 对象经常会一起使用，如果我们不用 Reflect 对象，而在 Proxy 的拦截函数里直接操作对象，可能就会造成程序的死循环。
下面是一段代码，演示了错误的使用方式。
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
----- ----- - --- ---------- -
----------- -------- ------ --------- -
-------------------- ------------ -- ----------------
--------------- - ------
------ -----
-
---
--------- - ---在上述例子中，我们在 Proxy 的 set 方法中，直接修改了代理对象的属性值，没有使用 Reflect.set 方法。由于我们直接修改了对象的属性值，所以代码就进入了无限递归的状态，最终导致程序抛出 RangeError 异常。
下面是正确的使用方式。
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
----- ----- - --- ---------- -
----------- -------- ------ --------- -
-------------------- ------------ -- ----------------
------------------- -------- ------ ----------
------ -----
-
---
--------- - ---在上述例子中，我们在 Proxy 的 set 方法中，使用了 Reflect.set 方法来设置代理对象的属性值。这样就避免了无限递归的问题。
总结
在这篇文章中，我们介绍了 ES9 中的 Proxy 和 Reflect 对象。这两个对象的出现，使得我们可以更好地对 JavaScript 对象的行为进行控制和观察。同时，我们也学习了一些 Proxy 和 Reflect 常用拦截操作，并且演示了两个对象的配合使用。
我们希望这篇文章能够为前端开发者提供有深度和学习以及指导意义的内容，让大家更好地理解和应用这两个新的 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64785751968c7c53b049655b