本文最后更新于:2023年12月5日 晚上
MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
target
:要使用Proxy
包装的目标对象(可以是任何类型的对象,包括原生数组、函数、甚至另一个代理)。
handler
:一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p
的行为。
方法
创建一个可撤销的Proxy
对象。
handler对象的方法
handler
对象是一个容纳一批特定属性的占位符对象。它包含有Proxy
的各个捕获器(trap)。
所有的捕获器是可选的。如果没有定义某个捕获器,那么就会保留源对象的默认行为。
getPrototypeOf()
handler.getPrototypeOf()
是一个代理(Proxy)方法,当读取代理对象的原型时,该方法就会被调用。
setPrototypeOf()
handler.setPrototypeOf()
方法主要用来拦截 Object.setPrototypeOf()
.
isExtensible()
handler.isExtensible() 方法用于拦截对对象的 Object.isExtensible()。
preventExtensions()
handler.preventExtensions()
方法用于设置对Object.preventExtensions()
的拦截。
Object.preventExtensions()
方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。
getOwnPropertyDescriptor()
handler.getOwnPropertyDescriptor()
方法是 Object.getOwnPropertyDescriptor()
的钩子。
defineProperty()
handler.defineProperty()
用于拦截对象的 Object.defineProperty()
操作。
vue2的双向绑定就是通过 Object.defineProperty()
实现的。
has()
handler.has()
方法是针对 in
操作符的代理方法。
示例,_
开头的属性为私有属性,使用in
判断的时候返回false
:
get()
handler.get()
方法用于拦截对象的读取属性操作。
set()
handler.set()
方法是设置属性值操作的捕获器。
deleteProperty()
handler.deleteProperty()
方法用于拦截对对象属性的 delete
操作。
ownKeys()
handler.ownKeys()
方法用于拦截 Reflect.ownKeys()
.
apply()
handler.apply()
方法用于拦截函数的调用。
construct()
handler.construct()
方法用于拦截 new
操作符。为了使 new 操作符在生成的 Proxy 对象上生效,用于初始化代理的目标对象自身必须具有 [[Construct]] 内部方法(即 new target
必须是有效的)。
上例中,sum不能是只能是普通函数,不能是箭头函数,因为箭头函数不能new。