关于ES6 Proxy #

本教程详细介绍ES6的Proxy API及其原理，通过大量实例详解其应用，并一步步实现@vue/reactivity

Proxy是什么？ #

Proxy是JavaScript 标准内置对象之一。

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

Proxy兼容性 #

不兼容IE，现代浏览器基本都支持，包括IE Edge。

Proxy基本语法 #

/***
* target
* 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
* handler
* 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
*/
const p = new Proxy(target, handler)

Proxy Traps #

traps 即proxy handler 可以代理的方法。

类似于操作系统中捕获器的概念。

🌹 共13个trap

• handler.getPrototypeOf() Object.getPrototypeOf 方法的捕捉器。
• handler.setPrototypeOf() Object.setPrototypeOf 方法的捕捉器。
• handler.isExtensible() Object.isExtensible 方法的捕捉器。
• handler.preventExtensions() Object.preventExtensions 方法的捕捉器。
• handler.getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor 方法的捕捉器。
• handler.defineProperty() Object.defineProperty 方法的捕捉器。
• handler.has() in 操作符的捕捉器。
• handler.get() 属性读取操作的捕捉器。
• handler.set() 属性设置操作的捕捉器。
• handler.deleteProperty() delete 操作符的捕捉器。
• handler.ownKeys() Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。
• handler.apply() 函数调用操作的捕捉器。
• handler.construct() new 操作符的捕捉器。

其中最常用的主要要get、set、has和apply等。

Proxy.revocable() #

Proxy.revocable()方法返回一个可撤销的 Proxy 实例。