本文详解 JavaScript Proxy 的基本语法、拦截器方法及可撤销代理特性，并深入分析 Vue3 采用 Proxy 重构双向绑定的原因。通过对比 Proxy 与 Object.defineProperty，阐述 Proxy 在对象劫持、性能及兼容性方面的差异，帮助开发者理解现代前端框架底层原理。
1.语法
const proxy = new Proxy(target, handle);- target，被代理的对象
- handle，拦截规则
2.基本用法
const obj = {};
const proxy = new Proxy(obj, {
// target 目标对象；propKey 属性名；receiver 实例本身；
get: function(target, propKey, receiver) {
return 10;
}
})
console.log(proxy.a); // 10
console.log(proxy.b); // 10
console.log(obj.a); // undefined
console.log(obj.b); // undefined
上述代码对 obj 对象的 get 操作进行了拦截，任何读取操作都仅会返回 10，且该操作只作用在代理对象 proxy 上，对原对象本身是不起作用的。
ps.若 obj 对象是不可写及不可配置的，代理对象的返回值要与被代理对象的返回值保持一致；若被代理对象没有配置 get 方位方法，即 get 方法是 undefined，那么返回值必须是 undefined
handle 对象的常用方法：
| 方法 | 描述 |
|---|---|
| has | in操作符捕捉器 |
| get | 属性读取操作符捕捉器 |
| set | 属性设置操作符读取器 |
| deleteProperty | delete操作符读取器 |
| ownKeys | Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。 |
| apply | 函数调用捕捉器 |
| construct | new操作符的捕捉器 |
3.可消除的Proxy
Proxy 有一个唯一的静态方法 Proxy.revocable(target, handler)，可以用来创建一个可撤销的代理对象，该方法的返回值是一个对象，其结构为： {"proxy": proxy, "revoke": revoke}。
- proxy 表示新生成的代理对象本身，和用一般方式 new Proxy(target, handler) 创建的代理对象没什么不同，只是它可以被撤销掉。
- revoke 撤销方法，调用的时候不需要加任何参数，就可以撤销掉和它一起生成的那个代理对象。
ps.该方法常用于完全封闭对目标对象的访问。
4.Vue为什么要用Proxy重构
Vue3.0 之前，双向绑定主要是由 defineProperty 实现的。而 defineProperty 这个方法本身其实是存在不足的，比如说对于对象属性增加、数组按下标修改等一下操作无法做到原生实现。虽然 Vue 有提供相应的手动 observer 方法，但在使用体验上还是不尽如人意的。而想较于 defineProperty 针对属性进行拦截，Proxy 直接劫持了整个对象，即不需要对特殊的操作做单独处理。
5.Proxy与defineProperty的对比
（1）Proxy 作为新标准，浏览器支持良好
（2）Proxy 能观察的类型比 defineProperty 更丰富
（3）Proxy 不兼容 IE，也没有 polyfill，defineProperty 可以支持到 IE9
（4）defineProperty 劫持对象的属性，当新增属性时，需要再次 defineProperty；Proxy 直接劫持整个对象，不需要额外操作。
（5）defineProperty 在原对象本身进行拦截操作，而 Proxy 只能在生成的拦截的对象上进行拦截操作。
到此这篇关于 JavaScript Proxy 基本用法详解的文章就介绍到这了,更多相关 JS Proxy 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！