浅析 JavaScript 的代理对象-51CTO.COM

JavaScript 支持 setters[1] 和 getters[2] 已经很长时间了。他们用带有 set 和 get 关键字的简单语法来拦截对象的属性访问和值的修改操作。

const obj = { 
  propValue: 1, 
  get prop() { 
    console.log("Retrieving property prop"); 
    return this.propValue; 
  }, 
  set prop(value) { 
    console.log("Setting property prop to", value); 
    this.propValue = value; 
  } 
}; 
 
obj.prop; // 1 | [in console] Retrieving  property prop 
obj.prop = 2; // [in console] Setting property prop to 2 
 
1234567891011121314 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

但是，setter/getter 有多个缺点：

它们仅限 get 和 get 操作(显然)。
它们不能与相同键(即“常规”属性)的数据入口一起使用。
它们不是动态的，必须在对象声明期间用静态的 Object.defineProperty() 方法或通过使用计算值(仅适用于新的浏览器)显式地应用于每个属性。

// ... 
Object.defineProperty(obj, "anotherProp", { 
  get() { 
    /* Do something on get */ 
  }, 
  set(value) { 
    /*Do something on set */ 
  } 
}); 
 
123456789 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

因此，setter 和 getter 不太适合观察整个对象或执行非常简单的操作。因此，ECMAScript 6(ES6)引入了代理对象(Proxy object)。

代理(Proxy)

代理是内置的 JS 对象，可用于拦截和更改与对象相关的不同操作的行为。

const originalObj = { prop: 1, anotherProp: "value" }; 
const proxyObj = new Proxy(originalObj, { 
  get(obj, prop) { 
    console.log("Retrieving property", prop); 
    return obj[prop]; 
  }, 
  set(obj, prop, value) { 
    console.log("Setting property", prop, "to", value); 
    obj[prop] = value; 
    return true; 
  } 
}); 
originalObj.prop; // 1 
originalObj.prop = 2; 
 
proxyObj.prop; // 2 | [in console] Retrieving property "prop" 
proxyObj.anotherProp = "new value"; // [in console] Setting property "anotherProp" to "new value" 
 
1234567891011121314151617 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

很快我们就可以看到 Proxy 与 setter 和 getters 之间的区别。它们不仅在语法上有所不同(Proxy 更为冗长)，而且在与原始对象的交互方面也有所不同。Proxy会创建一个新对象供你与之交互，而不是与原始对象进行交互，原始对象在使用 setter/getter 时会直接修改。

在使用 Proxy 的情况下，原始对象(也称为 target)用作一种存储。你对其执行的任何操作都会直接影响代理，但不会触发其任何 trap。

代理的 trap 是执行特定操作时调用的简单方法。它们都是在单个 handler 对象上定义的，然后传递给 Proxy 构造函数。除此之外，它们不仅限于 set() 和 get()，还包括一些有趣的操作，你可以在 MDN 文档[3]中找到。

可撤销代理

如果出于某种原因，你以后想取消或撤消代理，则应该用静态的 Proxy.revocable() 方法创建它。

// ... 
const revocableProxyObj = Proxy.revocable(originalObj, { 
  get(obj, prop) { 
    /* Do something on get */ 
  }, 
  set(obj, prop, value) { 
    /*Do something on set */ 
  } 
}); 
const proxy = revocableProxyObj.proxy; 
proxy.prop; // OK 
revocable.revoke(); 
proxy.prop // TypeError 
 
12345678910111213 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

该方法不是直接返回 Proxy 对象，而是返回一个对象，该对象包含位于 proxy 属性下的实际 Proxy 和一个附加的 revoke() 方法。

调用时，此方法会使 Proxy 无效，使以后的任何调用均以 TypeError 结尾。之后该代理将被自动“垃圾收集”，从而释放内存空间。

用例

与setter/getter 相比，Proxy 可以让你做更多的事情。它们更快[4](声明后)并且更加灵活，使其成为状态管理等用例的理想解决方案。

Proxy 带来了很多可定制性，使开发人员可以控制 JS 的某些元功能(meta-functionalities)。所以它们并不是向后兼容的，并且没有任何完全兼容的 polyfill 的选项存在。话虽如此，根据 Can I use...[5] 的数据，总体的支持看上去不错，覆盖率约为 93%(不支持 IE 和 Safari <10 的版本)。