什么是proxy?
Opened this issue · 4 comments
proxy基础学习记录
《javascript高级程序设计第4版》
proxy 第一章节 代理基础:
- 创建空代理
- 定义捕获器
- 捕获器参数与反射API
- 捕获器不变式
- 可撤销代理
- 实用反射API
- 代理另一个代理
- 代理的问题与不足
proxy 第二章节 代理捕获器与反射方法:
- get()
- set()
- has()
- defineProperty()
- getOwnPropertyDescriptor()
- deleteProperty()
- ownKeys()
- getPrototypeOf()
- setPrototypeOf()
- isExtensionble()
- preventExtensions()
- apply()
proxy 第三章节 代理模式:
- 跟踪属性访问
- 隐藏属性
- 属性验证
- 函数与构造函数参数验证
- 数据绑定与可观察对象
引言
ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体来说,可以给目标对象定义一个关联的代理对象,而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响到目标对象之前,可以在代理对象中对这些操作加以控制。
由于代理是一种新的基础性语言能力,很多转译程序都不能把代理行为转换为之前的ECMASCRIPT代码,因为代理的行为是无法替代的。为此,代理和反射只在百分之百支持它们的平台使用(即需要确保兼容性)。可以检测代理是否存在,不存在则提供兜底代码。不过这样做会导致代码冗余,因此并不推荐。
9.1 代理基础 --摘自红宝书
代理是目标对象的抽象。从很多方面看 ,代理类似c++指针,因为它可以用做目标对象的替身,但又完全独立于目标对象。目标对象既可以直接被操作,也可以通过代理来操作,但直接操作会绕过代理施予的行为(即捕获器)。
9.2 代理捕获器与反射方法 --摘自红宝书
代理可以捕获13种不同的基本操作。这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。
正如前面示例所展示的,有几种不同的JavaScript操作会调用同一个捕获器处理程序。不过,对于在代理对象上执行的任何一种操作,只会有一个捕获处理程序被调用,不会存在重复捕获的情况。
只要在代理上调用,所有捕获器都会拦截它们对应的反射API操作。
9.3 代理模式 --摘自红宝书
使用代理可以在代码中实现一些有用的编程模式
主要介绍了跟踪属性访问
、隐藏属性
、属性验证
、函数与构造函数参数验证
、数据绑定与可观察对象
小结
proxy开辟了js元编程及抽象的新天地。
从宏观上看,代理是真实js对象的透明操作层。代理可以定义包含捕获器的处理程序对象。而这些捕获器可以拦截绝大部分js的基本操作和方法。在这个捕获器处理程序中,可以修改任何基本操作的行为,前提是遵从捕获器不变式
。
与代理如影随形的反射API,封装了一整套与捕获器拦截的操作相对应的方法。可以把反射API看成一套基本操作。
代理的应用场景不可限量,开发者使用它可以创建出各种编码模式,比如跟踪属性访问
、隐藏属性
、阻止修改或删除属性
、函数参数验证
、构造函数参数验证
、数据绑定
以及可观察对象
等等...
面试官:Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?
参考答案链接: https://vue3js.cn/interview/vue3/proxy.html#%E4%B8%80%E3%80%81object-defineproperty
有空一定要自己梳理一遍。
有空看一下proxy的相关文章:
- 1. 一文搞懂Vue2和Vue3的Proxy
- 2. VUE 3.0 Proxy浅谈
- 3. vue3 vuex 4.X getters 打印结果是proxy对象,应该怎样获取其中的值
- 4. 学习Vue3.0,你需要先了解一下Proxy
- 5. vue3为何放弃defineProperty,使用Proxy
- 6. Vue3 的 Proxy 能做到哪些精确的拦截操作?原理揭秘
- 7. Vue(2.x 和 3.0) 双向绑定原理及实现(Object.defineProperty 和 Proxy)以及常见错误区分
- 8. Vue3.0 中 Object.defineProperty 的代替方案 Proxy
- 9.Vue3 的响应式和以前有什么区别,Proxy 无敌?
- 10.简单通俗的理解 Vue3.0 中的 Proxy
- 11.TypeScript 从零实现基于 Proxy 的响应式库,带你彻底搞懂 Vue3 的响应式原理
- 12.带你彻底搞懂 Vue3 的 Proxy 响应式原理基于函数劫持实现 Map 和 Set 的响应式
- 13.从 Object.defineProperty 到 Proxy 深入理解 Vue 3.0 响应系统
- 14.为什么 Vue3.0 使用 Proxy 实现数据监听?defineProperty 表示不背这个锅
- 15.代理模式 Proxy 和 Vue3 数据响应系统
- 16.使用 Proxy 实现 Vue.js 3 中的响应式**