ES2021 引入了一种新的元编程机制—— Proxy，它可以拦截 JavaScript 对象上的属性访问、赋值、删除等行为，并在这些行为发生时执行自定义的函数逻辑。Proxy 的出现极大地扩展了 JavaScript 的功能，也带来了许多新的编程可能性，同时也带来了一些潜在的风险和陷阱，特别是在处理元属性时。本文将介绍 ES2021 中 Proxy 的新特性，并探讨如何防止在处理元属性时遇到的陷阱情况。
Proxy 的基本用法
首先，我们来看一下 Proxy 的基本用法。Proxy 的创建方式如下：
let proxy = new Proxy(target, handler);
其中 target 是需要拦截的对象，handler 是一个对象，用于拦截 target 上的属性访问、赋值、删除等行为。handler 对象中需要定义一个或多个拦截器函数，这些拦截器函数接收的参数和返回值将决定 Proxy 对象的行为逻辑。
举个例子，我们可以通过 Proxy 来实现一个简单的访问计数器：
-- -------------------- ---- ------- --- ------- - - ------ - -- --- ----- - --- -------------- - ----------- ----- - --------------- ------ ------------- - --- ------------------------- -- -- - ------------------------- -- -- - ------------------------- -- -- -展开代码
上面的代码中，我们使用了 Proxy 对象来拦截 counter 对象的 count 属性的访问行为。每次访问 count 属性时，get 拦截器函数会自增 count 属性的值，并返回该属性的值。通过这样的方式，我们就实现了一个访问计数器的功能。
Proxy 针对元属性的陷阱
虽然 Proxy 的出现大大增加了 JavaScript 的编程能力，但是它也带来了一些新的风险和陷阱，特别是在处理元属性时。下面我们将介绍几种可能导致 Proxy 针对元属性的陷阱情况。
陷阱 1：重写不可扩展对象的元属性
JavaScript 中的对象分为可扩展对象和不可扩展对象两种类型。可扩展对象可以向其添加新属性，而不可扩展对象不支持添加新属性。
在默认情况下，我们创建的对象是可扩展的。但是，可以通过 Object.preventExtensions() 或 Object.seal() 等方法将对象设置成不可扩展的。
如果我们在一个不可扩展的对象上使用 Proxy，可能会出现重写元属性的情况：
-- -------------------- ---- ------- --- --- - - ---- --- -- ------------------------------ --- ----- - --- ---------- - ----------- ----- ------ - ---------------- ------- - ----------- ------------ - ------ ------ ----- - --- --------- - ---- -- ------ --- - --- ----------------------- -- ------展开代码
上面的代码中，我们首先使用 Object.preventExtensions() 方法把 obj 对象设置为不可扩展的，然后通过 Proxy 对象来拦截该对象的 set 行为。在执行 proxy.foo = 456 时，由于 obj 对象不可扩展，所以实际上并没有添加新的属性，而是重写了元属性 foo 的值。但是由于 set 拦截器函数总是返回 true，所以 Proxy 认为新的属性赋值成功了，因此没有任何错误和警告。
这种情况下，重写元属性可能会导致应用程序出现预料之外的行为，因此需要特别小心。如果你需要阻止重写元属性，可以在 set 拦截器函数中增加一些额外的逻辑来判断对象是否可扩展或属性是否已经存在。
陷阱 2：忽略不可枚举属性
JavaScript 中的对象属性可以设置为不可枚举，这意味着它们不会出现在 for-in 循环中，也不会被 Object.keys() 和 Object.values() 等方法使用。
由于 Proxy 只能拦截当前对象上的属性行为，因此它无法拦截不可枚举属性的行为。如果我们在一个对象上使用 Proxy，并且该对象包含不可枚举的属性，那么 Proxy 将无法正确拦截该属性的行为，可能会导致应用程序出现预料之外的行为。
-- -------------------- ---- ------- --- --- - - ---- --- -- -------------------------- ------ - ------ ---- ----------- ----- --- --- ----- - --- ---------- - ----------- ----- - ---------------- ---------- ------ ------------- - --- ----------------------- -- ------ -------- ----------------------- -- ------展开代码
上面的代码中，我们首先定义了一个对象 obj，并在其中添加了两个属性 foo 和 bar。foo 是可枚举的，而 bar 是不可枚举的。然后我们使用 Proxy 对象来拦截该对象的 get 行为。在执行 proxy.foo 时，get 拦截器函数能够正确地拦截该行为，并打印出 get foo。但是在执行 proxy.bar 时，get 拦截器函数却无法拦截该行为。这是由于 bar 属性是不可枚举的，而 Proxy 只能拦截当前对象上的可枚举属性行为。因此，在 Object.defineProperty() 时应该尽量避免将属性设置为不可枚举。
陷阱 3：错误地拦截 Object.prototype 上的方法
JavaScript 中的所有对象都继承自 Object.prototype 对象。Object.prototype 上定义了许多核心方法，如 toString()、hasOwnProperty() 等。
通过 Proxy 对象，我们可以拦截这些核心方法的访问和调用，从而实现一些自定义的逻辑。但是，如果我们不小心将这些核心方法定义在 Proxy 对象上，就可能会破坏 JavaScript 的内部机制，导致应用程序出现预料之外的行为。
-- -------------------- ---- ------- --- --- - - ---- --- -- --- ----- - --- ---------- - ----------- ----- - ---------------- ---------- ------ ------------- -- ----------- ----- - ---------------- ---------- ------ ---- -- ------- -- ---------- - ------ ------- -------- - --- ----------------- -- ------- -- ------ --------- ------------------------------ -- --------- ------ ----------------------------------------- -- -- --------- --展开代码
上面的代码中，我们使用 Proxy 对象来拦截 obj 对象上的 get、has 和 toString 行为。在执行 proxy.toString() 时，由于 Proxy 对象上定义了自定义的 toString 方法，所以将返回字符串 'Custom object'。但是在执行 proxy.hasOwnProperty('foo') 时，由于 hasOwnProperty 方法定义在 Object.prototype 上，而 Proxy 对象无法拦截 Object.prototype 上的属性访问行为，所以将抛出 TypeError 异常。
这种情况下，我们应该尽量避免直接拦截 Object.prototype 上的方法，并始终保持对它们的尊重和正确使用。
Proxy 针对元属性的正确使用方式
虽然 Proxy 针对元属性存在一些潜在的风险和陷阱，但只要遵循一些正确的使用方法，就可以很好地规避这些风险和陷阱。
以下是一些 Proxy 针对元属性的正确使用方式：
- 在
get和set拦截器函数中，始终检查对象是否可扩展，以防止重写元属性； - 尽量避免将属性设置为不可枚举，以确保 Proxy 能够拦截所有属性的行为；
- 不要重新定义
Object.prototype上的核心方法，以避免破坏 JavaScript 的内部机制。
最后，我们来看一个基于 Proxy 对象的缓存实现：
-- -------------------- ---- ------- -------- --------------- - --- ----- - --- ------ ------ --- ------------ - ------------- -------- ----- - --- --- - -------- -- ----------------- - ---------------- ---- ------ --------- ------ ---------------- - ---- - --- ------ - ----------------- ------ --------------- -------- ------ ------- - - --- - -------- ------------ - -- -- --- - -- - --- -- - ------ -- - ---- - ------ ----------- - -- - ----------- - --- - - --- -------------- - ----------------------- -------------------------------- -- ----- -------------------------------- -- ------ ---- ------ ------ -------------------------------- -- ------ ---- ------ -------- -------------------------------- -- ------ ---- ------ --------展开代码
上面的代码中，我们使用 Proxy 对象来实现一个缓存机制。通过 createCache() 函数创建一个缓存对象，该对象内部持有一个 Map，key 是计算的参数，value 是计算的结果。Proxy 对象拦截函数调用行为，当参数为已缓存的值时，从缓存中返回对应的结果；否则，计算出新的结果并添加到缓存中。通过这样的方式，我们就实现了一个简单的缓存函数的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c01e23314edc268463cf28
