自从 ES6 的推出，Javascript 语言的能力得到了极大的提升。尤其是在 ES6、ES7 的语法中，JavaScript 中新增了类和模块等语法，使得 Javascript 语言从一个单纯的脚本语言向一个更为成熟的面向对象语言转型。同时，ES6 也引入了新的数据类型如结构体、Map 和 Set 等。在 ES9 中，又加入了 Proxy 对象，引入了更多操作对象的能力，为我们前端开发提供了更多的可能性。在本文中，我们将着重解析 Proxy 对象及其优势。
Proxy 简介
Proxy 是 ES6 引入的新对象，它可以拦截对一个对象的访问，从而可以对这个对象的访问进行增强或限制。Proxy 通过建立一个代理层，提供一个拦截操作的机会，让外部可以修改对象的行为。Proxy 可以被认为是 Object.defineProperty 或 proxy 等 API 的通用版本，但 Proxy 的功能比它们更强大，可以支持更多的操作。Proxy 应用了一种元编程（Meta Programming）的概念，它使得我们可以在运行时动态地修改代码，这样我们可以实现一些十分灵活的逻辑需求。Sebastian Markbåge 在他的博客中提到 “Proxy 对象是为了能在任何前置属性调用之前运行一份自定义操作而设计的”。
Proxy 的优势
通过 Proxy，我们可以不必使用复杂的、不可维护的代码来实现对象的代理，而且还可以将代理逻辑与原对象逻辑进行解耦。Proxy 很适合实现逻辑复杂、维护成本高的场景，例如将多个函数和类似重复的操作组合成一个单一的接口。在这种情况下，我们可以在 Proxy 中定义几个捕获器（handler）供操作调用，在这个工具顶部，我们可以定义一个 API 层，使提供了一些前置属性、方法等，同时，可以在更深层的捕获器中进行处理，以执行具体操作。这种行为将代理逻辑与原对象逻辑分离开来，这种优势是通过这种解耦性实现的。由此，我们可以在代理对象中使用代码块，将不同的操作或代码组合在一起，以实现更灵活的代理逻辑。相应的，这样也使我们的代码便于重用和解耦。Proxy 还有其他一些优点，如：
- 对原对象保持透明度：基于 Proxy 的 Code 代理可以保持原对象的透明度，而不需要暴露它的所有信息。
- 更强的验证和安全：借助于 Proxy 对象，我们可以保证对象的安全，有效地验证输入和检查错误。
- 更少的业务逻辑：因为 Proxy 提供了更多的操作，所以我们可以在代理对象中放置更多的代码块，可以更轻松地处理出现在原对象中的常见错误。
- 增加性能：我们可以通过 Proxy 对象来提高代码的性能，例如通过缓存对象状态等方式。
Proxy 的实际应用
下面用 ES9 的 Proxy 对象来实现一个简单的应用，模拟拦截窗口广告的功能，同时还会看到 Proxy 的使用效果。
-- -------------------- ---- ------- ----- -------- - - ----------- --- -- - ---------- -- ----------- ---- - -- ---- --- ------------- - -------------------------------------- ------ ---------- - ------ ------------ -- -- - ------- -- ----------- ---- ------ - ---------------------------------------- ----------- - ------ ------ ----- -- -- - --------- -- ------------- -------- ----- - ---------------------------------------- ------ --------------------- ------ -- -- -- - ------ ------ ----- ------------ - --- ------------- ---------- -- --------- --------- ---- --------------- - ---------------------------展开代码
该代码定义了一个代理对象 blockAds，该对象将拦截 window 对象的访问，如果操作是获取 window.blockedAds，则代理对象将向内部数组添加一个新的 windowAdBlocker ，并返回 '广告已经被拦截' 。当设置 window 属性时，代理对象将记录此操作并向内部数组添加一个新的 windowAdBlocker, 并将窗口属性设置为给定的值。当您调用窗口中的一个方法时，代理对象将记录此操作并向内部数组添加一个新的 windowAdBlocker。这个例子演示了 Proxy 的三个操作捕获器——“get”、“set”和“apply”——以及在它们内部实现应用的方式。
小结
在ES6、ES7和现在的 ES9 中，JavaScript 的新增功能均体现为更为先进的面向对象语言特性和更加灵活的编写方式。代理技术提供了更多的编写方法，以实现更灵活、更易于复用和更易于维护的代码。Proxy 不仅对于开发人员提供了很多新的工具和操作，同时也是一个伟大的框架，可以用来提高代码的性能和安全性。因此，建议在开发中，更加深入的学习此功能，以优化您的代码和确保模块的优良性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc3470a231b2b7eddaa6e9
