ES12（也称为 ES2021）是 JavaScript 的最新版本，它带来了许多新特性，其中一个最引人注目的是 Proxy。Proxy 是一种在运行时拦截并自定义 JavaScript 对象的操作的机制。本文将介绍 Proxy 的优点和用法，并提供一些示例代码以帮助您更好地理解。
优点
- 保护对象
使用 Proxy 可以保护对象，因为可以在对象上设置一些规则，以防止未经授权的访问和修改。例如，您可以使用 Proxy 来禁止对对象的某些属性进行更改或删除。
- 简化代码
Proxy 可以帮助您简化代码，因为您可以使用它来拦截对象上的所有操作，并在必要时执行自定义逻辑。这使得您可以更轻松地编写更简洁、更易于维护的代码。
- 提高性能
Proxy 可以提高性能，因为它可以缓存某些操作的结果，并且只有在必要时才会重新计算它们。这意味着您可以避免重复计算，并在需要时提高代码的响应速度。
用法
- 拦截对象上的属性访问
您可以使用 Proxy 来拦截对象上的属性访问，以执行自定义逻辑。以下是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- --
--
----- ------- - -
----------- ----- -
-------------------- ----------
------ -------------
-
--
----- ----- - --- ------------- ---------
------------------------ -- -- -------- ----- - ------
----------------------- -- -- -------- ---- - --在上面的示例中，我们使用 Proxy 来拦截 person 对象上的属性访问，以便在每次访问属性时记录它们。我们定义了一个名为 handler 的对象，其中包含一个 get 方法，它会在每次访问属性时被调用。然后，我们使用 new Proxy 创建了一个名为 proxy 的新对象，并将 person 对象和 handler 对象作为参数传递给它。最后，我们访问了 proxy 对象上的 name 和 age 属性，并在控制台中记录了它们。
- 拦截对象上的属性设置
您可以使用 Proxy 来拦截对象上的属性设置，以执行自定义逻辑。以下是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- --
--
----- ------- - -
----------- ----- ------ -
-------------------- ------- -- -----------
------------ - ------
-
--
----- ----- - --- ------------- ---------
--------- - --- -- -- -------- --- -- ---
----------------------- -- -- --在上面的示例中，我们使用 Proxy 来拦截 person 对象上的属性设置，以便在每次设置属性时记录它们。我们定义了一个名为 handler 的对象，其中包含一个 set 方法，它会在每次设置属性时被调用。然后，我们使用 new Proxy 创建了一个名为 proxy 的新对象，并将 person 对象和 handler 对象作为参数传递给它。最后，我们设置了 proxy 对象上的 age 属性，并在控制台中记录了它们。
- 拦截对象上的函数调用
您可以使用 Proxy 来拦截对象上的函数调用，以执行自定义逻辑。以下是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
--
----- ------- - -
------------- -------- ----- -
-------------------- -------------- ---- --------- ----------
------ --------------------- ------
-
--
----- ----- - --- ------------------- ---------
-------- -- -- -------- ----- ---- --------- --- - ------- -- ---- -- ---- --- - -- -- ----- -----在上面的示例中，我们使用 Proxy 来拦截 person.greet 函数的调用，以便在每次调用函数时记录它们。我们定义了一个名为 handler 的对象，其中包含一个 apply 方法，它会在每次调用函数时被调用。然后，我们使用 new Proxy 创建了一个名为 proxy 的新对象，并将 person.greet 函数和 handler 对象作为参数传递给它。最后，我们调用了 proxy 对象，并在控制台中记录了它们。
总结
在本文中，我们介绍了 Proxy 的优点和用法，并提供了一些示例代码以帮助您更好地理解。使用 Proxy 可以保护对象、简化代码和提高性能。您可以使用 Proxy 来拦截对象上的属性访问、属性设置和函数调用，并在必要时执行自定义逻辑。如果您是前端开发人员，那么掌握 Proxy 将有助于您更好地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f7ccaed10417a2223239e2