在 ES6 中，我们可以通过 Proxy 和 Object.defineProperty 来拦截对象的读取、赋值、删除等操作。这两个特性都可以用来实现数据双向绑定、数据校验、缓存等功能。本文将对这两个特性进行比较，并给出使用建议。
Proxy
Proxy 是 ES6 中新增的一个对象，可以用来拦截对象的读取、赋值、删除等操作。下面是一个例子：
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
----- ----- - --- ---------- -
----------- ---- -
---------------- ---------
------ ------------
--
----------- ---- ------ -
---------------- ------------------
----------- - ------
--
---------------------- ---- -
------------------- ---------
------ ------------
--
---
----------- -- --- ----
---------- - ------ -- --- --------
------ ---------- -- ------ ---上面的例子中，我们创建了一个 Proxy 对象，并在其 handler 中定义了 get、set、deleteProperty 等拦截器。当我们通过 proxy 对象读取、赋值、删除属性时，会触发相应的拦截器，并输出对应的日志。
Proxy 的优点是可以拦截更多的操作，比如函数调用、in 操作符等。同时，它的语法更加简洁，易于理解和使用。
Object.defineProperty
Object.defineProperty 是 ES5 中引入的一个方法，可以用来定义对象的属性。下面是一个例子：
-- -------------------- ---- -------
----- --- - - ----- -------- ---- -- --
-------------------------- ------- -
----- -
---------------- -------
------ -----------
--
---------- -
---------------- ----------------
---------- - ------
--
---
--------- -- --- ----
-------- - ------ -- --- --------上面的例子中，我们使用 Object.defineProperty 方法来定义了 name 属性的 get 和 set 方法。当我们通过 obj 对象读取、赋值属性时，会触发相应的 get 和 set 方法，并输出对应的日志。
Object.defineProperty 的优点是可以在旧版浏览器中使用，同时也可以实现数据双向绑定等功能。
比较
下面是 Proxy 和 Object.defineProperty 的比较：
功能
Proxy 可以拦截更多的操作，比如函数调用、in 操作符等，而 Object.defineProperty 只能拦截属性的读取、赋值操作。
语法
Proxy 的语法更加简洁，易于理解和使用。而 Object.defineProperty 的语法相对复杂，需要传入一个 descriptor 对象。
兼容性
Proxy 不支持旧版浏览器，只能在现代浏览器中使用。而 Object.defineProperty 可以在旧版浏览器中使用。
性能
Proxy 的性能比 Object.defineProperty 差，因为它需要拦截更多的操作。但是，对于大多数应用来说，性能影响并不大。
使用建议
如果只需要拦截属性的读取、赋值操作，且需要兼容旧版浏览器，可以使用 Object.defineProperty。如果需要拦截更多的操作，或者只需要在现代浏览器中使用，可以使用 Proxy。
示例
下面是一个使用 Proxy 实现数据校验的例子：
-- -------------------- ---- -------
----- --------- - -
----------- ---- ------ -
-- ---- --- ----- -- ------ ----- --- --------- -
----- --- -------------- ---- -- - ---------
-
----------- - ------
--
--
----- ------ - --- --------- -----------
----------- - --------
---------- - ---
---------- - ----- -- ------ --- ---- -- - ------上面的例子中，我们使用 Proxy 对象来实现数据校验。在 set 拦截器中，我们判断了 age 属性是否为数字，如果不是则抛出错误。这样可以保证 person 对象的数据类型正确。
结论
Proxy 和 Object.defineProperty 都是非常有用的特性，可以用来实现数据双向绑定、数据校验、缓存等功能。根据实际需求选择合适的特性，并注意其语法、兼容性和性能等方面的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d70c3e1dcc5c0fa3cbff6