在 ECMAScript 2016 中，引入了一个 Proxy 对象的方法 Proxy.revocable()，它可以创建一个可以撤销（revoke）的代理对象。本文将详细介绍这个方法的特性、用法以及相关示例，希望对前端开发者有所指导和帮助。
什么是代理对象？
在 ECMAScript 6 中，引入了代理对象（Proxy），它可以代理（proxy）另一个对象，即当使用代理对象访问某个对象时，实际上是通过代理对象来访问。代理对象可以拦截并处理访问到被代理对象的属性、方法等操作，从而实现更丰富的数据处理和操作控制。
举个例子，假设有一个对象 person，包含了一些属性和方法：
const person = {
name: 'Alice',
age: 18,
sayHello() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
};现在我们可以通过一个代理对象 proxy 来代理 person，并在代理对象上做一些额外的处理：
-- -------------------- ---- -------
----- ----- - --- ------------- -
----------- ----- -
-------------------- -------- ----------
------ -------------
--
----------- ----- ------ -
-------------------- -------- ------- -- -----------
------------ - ------
-
---在这个代理对象 proxy 中，我们通过 get 和 set 两个拦截器（handler）来拦截 person 上的属性读取和赋值操作。例如，当我们读取 proxy 的 name 属性时，会触发 get 拦截器，输出 Getting property name 并返回 person.name 的值。
console.log(proxy.name); // "Getting property name"，"Alice"
同样，在给 proxy 的 age 属性赋值时，会触发 set 拦截器，输出 Setting property age to 20 并将 person.age 的值修改为 20。
proxy.age = 20; // "Setting property age to 20" console.log(proxy.age); // "Getting property age"，20 console.log(person.age); // 20
代理对象可以实现比原始对象更多的控制和约束，比如只读属性、限制属性名、动态计算属性值等。
什么是可撤销代理？
在 ECMAScript 2016 中，新增了一个 Proxy.revocable() 方法，用于创建一个可撤销代理对象。所谓可撤销，即在创建代理对象后，可以通过调用其返回的 revoke() 方法来撤销该代理对象，使其不再拦截任何操作。这个方法返回一个包含 proxy 和 revoke 两个属性的对象，其中 proxy 就是代理对象本身，而 revoke 方法用于撤销该代理对象。
具体使用方法如下：
const {proxy, revoke} = Proxy.revocable(target, handler);其中，target 是要被代理的对象，handler 是一个包含拦截器的对象，与之前的代理对象使用方法一致。调用 Proxy.revocable() 方法后会返回一个包含 proxy 和 revoke 两个属性的对象，可以通过 proxy 访问被代理对象的属性和方法，也可以通过调用 revoke() 方法来撤销该代理对象。被撤销的代理对象将不再拦截任何操作。
可撤销代理的示例代码
下面是一个完整的示例代码，演示了如何使用 Proxy.revocable() 方法创建一个可撤销代理对象。
-- -------------------- ---- -------
----- --- - -
----- --------
---- --
--
----- ------- ------- - -------------------- -
----------- ----- -
-------------------- -------- ----------
------ -------------
--
----------- ----- ------ -
-------------------- -------- ------- -- -----------
------------ - ------
-
---
------------------------ -- -------- -------- -------------
--------- - --- -- -------- -------- --- -- ---
----------------------- -- -------- -------- -------
---------
------------------------ -- ---------- ------ ------- ----- -- - ----- ---- --- ---- -------
--------- - --- -- ---------- ------ ------- ----- -- - ----- ---- --- ---- -------在这个示例中，我们创建了一个包含 name 和 age 两个属性的对象 obj，然后使用 Proxy.revocable() 方法创建了一个代理对象 proxy，并将其拦截了 get 和 set 两个操作。接着我们通过 console.log() 输出了 proxy.name 和 proxy.age 的值，分别是 "Alice" 和 20。
紧接着，我们调用了 revoke() 方法来撤销代理对象，然后尝试再次读取和修改被代理的对象 obj 的属性，都会抛出 TypeError 类型的错误，这说明代理对象已经被撤销，并不再有效。
微实例：“被篡改的对象”场景下的可撤销代理
除了上面的示例，还可以通过一个更具有实际应用场景的例子来展示可撤销代理的作用。假设我们有一个 “被篡改的对象”（Tampered Object）的场景。
在实际开发中，可能会遇到对一些已经存在的对象进行篡改的情况，比如通过第三方插件修改了 Array.prototype 的方法，使得所有数组都拥有了新的方法，这样可能会导致意想不到的后果。那么如何在不改变原有对象的情况下，保护其不被篡改呢？这时可以借助可撤销代理的特性。
-- -------------------- ---- ------- ----- ------------- - --- -- --- ------------------- - ---------- - ------ ----------------- -- -- --- - -- --- -- --------------------------------- -- - ----- ------- ------- - ------------------------------ ---- -- --------------------- -------------------------------------- ------ ------------ -------- --------- --------------------------------- -- ---------- ----------------- -- --- - --------
在这个示例中，我们先定义了一个被篡改的数组 tamperedArray，并在其原型上添加了一个名为 sum 的方法。我们通过 console.log() 输出了 tamperedArray.sum() 的结果，是 6。这说明篡改后的数组确实拥有了新的方法，并且可以正常使用。
接着，我们使用 Proxy.revocable() 方法创建了一个可撤销代理对象 proxy，在此省略了拦截器的具体实现。然后，我们给 sum 方法添加了一个 enumerable 属性，并将其设置为 false，使得该属性不可被遍历。接着，我们调用了 revoke() 方法，撤销了代理对象。
后面我们再次通过 console.log() 输出 tamperedArray.sum() 的结果，发现已经抛出了 TypeError 类型的错误。这说明代理对象已经被撤销，被篡改的对象恢复为原本的状态，也就是不能访问新增的 sum 方法了。这个例子展示了可撤销代理对象在保护被篡改对象方面的作用，实际应用中也可以通过类似的方式来增强对象的安全性和可靠性。
总结
在本文中，我们详细介绍了 ECMAScript 2016 中新增的 Proxy.revocable() 方法，用于创建可撤销代理对象。我们通过各种示例代码，让读者更好地理解了代理对象和可撤销代理对象的特点和用法，希望本文对前端开发者有所启发和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f449fef6b2d6eab3d5ce34