ECMAScript 2018 中的代理对象实现
ECMAScript 2018 给 JavaScript 带来了很多新特性，其中代理对象是一个很有趣的特性，它极大地拓展了 JavaScript 对象的功能。代理对象可以在对象的读取和设置属性时注入自定义的逻辑，这使得 JavaScript 对象的行为可以像函数一样灵活。本文将讨论代理对象的实现细节，以及如何使用它们来优化 JavaScript 程序。
- 代理对象简介
代理对象是 ECMAScript 2018 新增的一个特性。它允许开发者通过创建一个代理对象来拓展对象的行为，并且可以控制对象属性的读取和设置。代理对象本质上是一个对象，但它可以拦截另一个对象的操作，例如读取、设置、函数调用等。
代理对象有两个参数：
- 目标对象：被代理的对象。
- 拦截器对象：一个包含一组拦截操作的对象。
我们可以通过使用 Proxy 构造函数创建一个代理对象：
----- ------ - ---
----- ------- - -
---- ---------------- ----- --------- -
-------------------- ----------
------ ------------------- ----- ----------
--
---- ---------------- ----- ------ --------- -
-------------------- -------------------
------ ------------------- ----- ------ ----------
-
--
----- ----- - --- ------------- ---------
--------- - ------
----------输出：
------- ------- ------- ---
上面的例子中，我们通过 Proxy 构造函数创建了一个代理对象，可以看到代理对象的读取和设置操作被拦截了。当我们将属性设置为 'bar' 时，拦截器对象里的 set 函数被调用；当我们读取属性 'foo' 时，拦截器对象里的 get 函数被调用。
- 拦截器操作
拦截器对象包含一组拦截操作，它们都是可选的。当代理对象进行读取和设置操作时，会依次触发相应的拦截器操作。拦截器对象包含以下几个操作：
- get: 拦截对象属性的读取操作。
- set: 拦截对象属性的设置操作。
- has: 拦截 in 操作符。
- deleteProperty: 拦截 delete 操作符。
- ownKeys: 拦截 Object.keys 等枚举操作。
- apply: 拦截函数的调用。
- construct: 拦截实例对象的构造。
以下是拦截器操作的详细说明：
2.1 get 拦截器
拦截器对象的 get 操作用于拦截属性读取操作。其函数签名为：
----------- ------- ----- ------------ --------- -------- ----
其中：
- target：目标对象。
- prop：属性的键。
- receiver：操作发生的对象。
在该函数内，我们可以返回代理对象的属性值，或者进行其他的操作。例如，我们可以在读取属性时进行一些计算，有以下例子：
----- --- - - -- -- -- - --
----- ----- - --- -----------
----------- ---- -
------ -- ------ -
------ -------- - ---------
-
------ ------------
-
---
---------------------- -- -在这个例子中，我们创建了一个代理对象来计算属性的和。当 'sum' 被访问时，它会返回目标对象的 x 和 y 的和值。
2.2 set 拦截器
set 拦截器用于拦截属性的设置操作。其函数签名为：
----------- ------- ----- ------------ ------ ---- --------- -------- --------
其中：
- target：目标对象。
- prop：属性的键。
- value：要设置的属性值。
- receiver：操作发生的对象。
在该函数内，我们可以返回 true 或 false 来表示属性的值是否成功设置。例如，以下例子将拦截器对象里的 set 函数返回 false，这将导致属性无法设置：
----- --- - ---
----- ----- - --- ---------- -
----------- ----- ------ --------- -
------ ------
-
---
--------- - ------
----------------- -- --在这个例子中，我们在代理对象里设置了 set 拦截器，它将所有属性的设置操作都拦截并返回 false。所以当我们设置属性 'foo' 时，它会被拦截并失败。
2.3 has 拦截器
has 拦截器拦截 in 操作符。其函数签名为：
----------- ------- ----- ------------- --------
其中：
- target：目标对象。
- prop：属性的键。
在该函数内，我们可以返回一个布尔值，指示目标对象是否存在属性 prop。例如：
----- --- - - ---- ----- --
----- ----- - --- ---------- -
----------- ----- -
------ ----------------------------
-
---
----------------- -- ------- -- ----
----------------- -- ------- -- -----在这个例子中，我们在代理对象里设置了 has 拦截器，它将检查目标对象中是否存在指定的属性。当我们检查 'foo' 是否存在时，代理对象返回 true，当我们检查 'baz' 是否存在时，代理对象返回 false。
2.4 deleteProperty 拦截器
deleteProperty 拦截器拦截 delete 操作符。其函数签名为：
---------------------- ------- ----- ------------- --------
其中：
- target：目标对象。
- prop：属性的键。
在该函数内，我们可以返回一个布尔值，指示属性是否删除成功。例如：
----- --- - - ---- ----- --
----- ----- - --- ---------- -
---------------------- ----- -
------------------
------ ------------------------------ ------
-
---
------ ---------- -- ---- ---
----------------- -- --在这个例子中，我们在代理对象里设置了 deleteProperty 拦截器，它将会在删除属性时被调用。当我们删除代理对象中的 'foo' 时，目标对象的'foo' 被删除并返回 true。
2.5 ownKeys 拦截器
ownKeys 拦截器用于拦截 Object.keys 等枚举操作。其函数签名为：
--------------- -------- --------------
其中：
- target：目标对象。
在该函数内，我们可以返回一个数组，其中包含目标对象的所有属性的键。例如：
----- --- - - ---- ------ ---- ----- --
----- ----- - --- ---------- -
--------------- -
----- ---- - ---------------------------------- -- --- --- -------
------ -----
-
---
-------------------------------- -- -------在这个例子中，我们在代理对象里设置了 ownKeys 拦截器，它将返回目标对象的所有键，但过滤了键 'baz'。
2.6 apply 拦截器
apply 拦截器用于拦截函数调用。其函数签名为：
------------- --------- -------- ---- ----- ------- ----
其中：
- target：目标函数。
- thisArg：被调用的函数的 this 值。
- args：函数参数数组。
在该函数内，我们可以拦截函数的调用，并返回一个值。例如：
----- ---- - --- -- -- - - --
----- ----- - --- ----------- -
------------- -------- ----- -
----------------- ----------------------------- -------
------ ----------------
-
---
-------- ---在这个例子中，我们在代理对象里设置了 apply 拦截器，它将在代理对象被调用时被调用。当我们调用代理函数时，它将记录函数调用，并返回函数的结果。
2.7 construct 拦截器
construct 拦截器用于拦截实例对象的构造方法。其函数签名为：
----------------- --------- ----- ------ ---------- ----- -------
其中：
- target：被调用的构造函数。
- args：构造函数参数数组。
- newTarget：被构造的实例对象的构造方法。
在该函数内，我们可以拦截实例对象的构造方法，并返回一个新的实例对象。例如：
----- --- -
-------------- -
------ - --
-
-
----- ----- - --- ---------- -
----------------- ----- -
------------------------- -------------- ---- ----------
------ --- ----------------
-
---
----- --- - --- ------------- ------ ------------ --- ---- ---
--------------- ---------- ----- -- ----
------------------- -- -----在这个例子中，我们在代理对象里设置了 construct 拦截器，它将在实例对象被构造时被调用。当我们构造实例对象时，它将记录构造操作，并返回一个新的实例对象。
- 代理对象的优化
代理对象很强大，但也很危险。在使用代理对象时要小心，在判断代理对象是否符合要求时要牢记代理对象的结构。对于代理对象，我们可以进行以下优化：
3.1 懒初始化
代理对象通常是被使用时才创建的，如果代理对象处于不活动状态，我们可以像以下方法一样进行懒初始化：
--- ---------- - -----
-------- ---------- -
--------------- -
----- ------ - ------
----- ------- - ------
---------- - --- ------------- --------
-
------ -----------
-在这个例子中，我们将代理对象缓存起来，第一次调用 getProxy 时，目标对象和拦截器对象都将被生成并使用，随后的调用都会返回已生成的代理对象。
3.2 缓存对象
代理对象是动态生成的，因此在代理对象的操作过程中，重复读取相同属性的代价是很大的。我们可以使用 WeakMap 对象来实现代理对象的缓存：
----- ----- - --- ----------
-------- ------------ -
-- ---------------- -
------ ---------------
-
----- ----- - --- ---------- -------
-------------- -------
------ ------
-在这个例子中，我们使用 WeakMap 对象来缓存代理对象，当缓存中已经存在相同的代理对象时，我们可以重复使用已经存在的代理对象。
- 总结
在 ECMAScript 2018 中，代理对象是一个非常强大的特性。代理对象为 JavaScript 中的对象添加了许多新功能，并且可以被用于在对象读取和设置属性时注入自定义逻辑。使用代理对象可以优化 JavaScript 程序的运行效率，给程序带来更好的性能和用户体验。但是应该注意代理对象存在的风险，使用时应仔细考虑代理对象的结构和操作。在使用代理对象时，要注意代理对象的缓存和懒初始化，从而优化程序性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f92ee8f6b2d6eab30c037c