- ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为能力。
- 可以给目标对象定义一个关联的代理对象,这个代理对象可以作为抽象的目标对象来使用。
- 在对目标对象进行各种操作影响目标之前,可以在代理对象中对这些操作加以控制。
- 不能转译成之前的代码,无可替代,只有在支持的平台使用。
1、代理基础
- 代理是目标对象的抽象,代理类似C++指针,因为它可以用作目标对象的替身,但又完全独立于目标对象。目标对象既可以直接被操作,也可以通过代理来操作。
1、创建空代理
-
最简单的代理,即什么也不做。默认情况在代理对象上的任何操作都会传播到目标对象。在任何可以使用目标对象的地方都可以通过同样的方式来使用与之关联的代理对象。
-
代理使用Proxy构造函数创建。
- 两个参数,目标对象和处理程序对象。缺少一个就会抛错。
- 创建空代理可以传一个简单的对象字面量作为处理程序对象
const target = { id: 'target' } const handler = {} const proxy = new Proxy(target, handler) // id属性会访问同一个值 target.id // target proxy.id // target // 给目标属性赋值 target.id = 'foo' target.id // foo proxy.id // foo // 给代理对象赋值会转移到目标对象 proxy.id = 'bar' target.id // bar proxy.id // bar // hasOwnProperty() 方法在两个地方都会应用到目标对象 target.hasOwnProperty('id') // true proxy.hasOwnProperty('id') // true // Proxy.prototype 是 undefined // 所以不能用instanceof操作符 target instanceof Proxy // 报错 proxy instanceof Proxy // 报错 target === proxy // false 可以区分
2、定义捕获器
-
主要目的是可以定义捕获器(trap)
-
捕获器就是在处理程序对象中定义的“基本操作的拦截器”。
-
每个处理程序对象可以包含零个或多个捕获器。
-
每个捕获器都对应一种基本操作,可以直接或间接在代理对象调用
-
每次在代理对象上调用这些基本操作时,代理可以在这些操作传播到目标对象之前先调用捕获器函数,从而拦截并修改相应行为。
-
捕获器,操作系统概念,程序流中一个同步的中断,可以暂停程序流,转而执行一段子进程,之后在返回原始程序流
const target = { foo: 'bar' } const handler = { // 捕获器在处理程序时以方法名为键 get() { return 'handler override' } } const proxy = new Proxy(target, handler) target.foo // bar proxy.foo // handler override target['foo'] //bar proxy['foo'] // handler override Object.create(target)['foo'] //bar Object.create(proxy)['foo'] // handler override
- 在代理对象执行get() 操作时,会触发定义的get()捕获器。
- get() 触发的方法
- proxy[property]
- proxy.prototype
- Object.create(proxy)[property] 等
- 只有在代理对象执行才会触发。
3、捕获器参数和反射API
-
所有捕获器都可以访问相应的参数,基于这些可以重新构建被捕获方法的原始行为。
-
get() 捕获器会收到 目标对象、要查询的属性和代理对象三个参数
const target = { foo: 'bar' } const handler = { get(trapTarget, property, receiver) { console.log(trapTarget === target) console.log(property) console.log(receiver === proxy) } } const proxy = new Proxy(target, handler) proxy.foo // true // foo // true
const target = { foo: 'bar' } const handler = { get(trapTarget, property, receiver) { return trapTarget[property] } } const proxy = new Proxy(target, handler) target.foo // bar proxy.foo // bar
-
原始操作可以通过调用全局Reflect对象上的同名方法来重建
-
处理程序对象中所有可捕获方法都有对应的反射(Reflect)API方法。
-
这些方法与捕获器拦截的方法具有相同的名称和函数签名。也具有与被拦截方法相同的行为
const target = { foo: 'bar' } const handler = { get() { return Reflect.get(...arguments) } } const proxy = new Proxy(target, handler) target.foo // bar proxy.foo // bar // 更简单的写法 ... const handler = { get: Reflect.get } ...
-
创建捕获所有方法,将每个方法转发给对应反射API的空代理,不需要定义处理程序对象
const target = { foo: 'bar' } const proxy = new Proxy(target, Reflect)
-
修饰捕获方法
const target = { foo: 'bar', bar: 'qux' } const handler = { get(trapTarget, property, receiver) { let decoration = '' if(property === 'foo') { decoration = '!!!' } return Reflect.get(...arguments) + decoration } } const proxy = new Proxy(target, handler) proxy.foo // bar!!! target.foo // bar proxy.bar // qux target.bar // qux
4、捕获器不变式
-
捕获处理程序的行为必须遵循“捕获器不变式”
-
“捕获器不变式”因为方法不同而异,防止出现过于反常行为
-
如果目标对象有一个不可配置不可写的数据属性,那么在捕获器返回一个与该属性不同的值时,会抛出TypeError
const target = {} Object.defineProperty(target, 'foo', { configurable: false, writable: false, value: 'bar' }) const handler = { get() { return 'qux' } } const proxy = new Proxy(target, handler) proxy.foo // TypeError
5、可撤销代理
-
有时候需要中断代理对象和目标对象之间的联系,使用new Proxy()创建的普通代理的联系会在代理对象的声明周期内一直存在。
-
Proxy暴露的revoable方法,支持撤销代理对象与目标对象的关联
-
撤销代理的操作不可逆
-
撤销函数(revoke()) 是幂等的,调用多少次结果都一样。
-
撤销代理之后再调用代理会抛出TypeError
-
撤销函数和代理函数是同时生成的。
const target = { foo: 'bar' } const handler = { get() { return 'intercepted' } } const {proxy, revoke} = Proxy.revocable(target, handler) proxy.foo // intercepted target.foo // bar revoke() proxy.foo // TypeError
6、实用反射API
- 某些情况下优先使用反射API
1、反射API与对象API
-
反射API不限于捕获处理程序
-
大多数反射API在Obejct类型上有对应的方法
Object的方法适用于通用程序,而反射方法适用于细粒度的对象控制与操作
2、状态标记
-
很多反射方法返回“状态标记”的布尔值,表示意图执行的操作是否成功。有时,状态标记比那些返回修改后的对象或者抛出错误的反射API更有用。
// init const o = {} try { Object.defineProperty(o, 'foo', 'bar') console.log('success') }catch(e) { console.log('failure') } // 重构后 const o = {} if(Reflect.defineProperty(o, 'foo', {value:'bar'})){ console.log('success') }else { console.log('failure') }
-
提供状态标记的反射:
- Reflect.defineProperty()
- Reflect.preventExtensions()
- Reflect.setProptotypeOf()
- Reflect.set()
- Reflect.deleteProperty()
3、用一等函数替代操作符
- 以下反射方法只有通过操作符才能完成的操作
- Reflect.get():可以替代对象属性访问操作符
- Reflect.set():可以替代=赋值操作符
- Reflect.has():可以替代in操作符或with()
- Reflect.deleteProperty():可以替代delete操作符
- Reflect.construct():可以替代new操作符
4、安全地应用函数
-
通过apply调用函数时,被调用的函数可能也定义了自己的apply属性,可以使用定义在Function原型上的apply方法绕过这问题
Function.prototype.apply.call(myFunc, thisVal, argumentList)
-
可以使用Reflect.apply避免
Reflect.apply(myFunc, thisVal, argumentList)
-
7、代理另一个代理
-
代理可以拦截反射API的操作,可以完全创建一个代理去代理另一个代理。
const target = { foo: 'bar' } const firstProxy = new Proxy(target, { get() { console.log('first proxy') return Reflect.get(...arguments) } }) const secondProxy = new Proxy(firstProxy, { get() { console.log('second proxy') return Reflect.get(...arguments) } }) secondProxy.foo // second proxy // first proxy // bar
8、代理的问题与不足
1、代理中的this
const target = {
thisValEqualProxy() {
return this === proxy
}
}
const proxy = new Proxy(target, {})
target.thisValEqualProxy() // false
proxy.thisValEqualProxy() // true
-
如果目标对象依赖于对象标识,可能有意料之外问题
const wm = new WeakMap() class User { constructor(userId) { wm.set(this, userId) } set id(userId) { wm.set(this, userId) } get id() { return wm.get(this) } } // 由于这个实现依赖User实例的对象标识,在这个实例被代理的情况下会有问题 const user = new User(123) user.id = 123 const userInstanceProxy = new Proxy(user, {}) userInstanceProxy.id // undefined
-
因为user实例使用目标对象作为WeakMap的键,代理对象尝试从自身取得这个实例。需要重新配置代理,把代理User实例改为代理User类本身
const UserClassProxy = new Proxy(User, {}) const proxyUser = new UserClassProxy(456) proxyUser.id // 456
-
2、代理与内部槽位
-
部分内置类型可能依赖代理无法控制的机制
// Date 依赖this上的[[NumberDate]]内部槽位,但代理对象没有这个 const target = new Date(); const proxy = new Proxy(target, {}); console.log(proxy instanceof Date); // true proxy.getDate(); // TypeError: 'this' is not a Date object
2、代理捕获器与反射方法
- 几种JaveScript操作会调用同一个捕获器处理程序
- 在代理对象上的任何一种操作,只有一个捕获处理程序被调用
1、get()
-
在获取属性值的操作中被调用,对应Reflect.get()
const myTarget = {}; const proxy = new Proxy(myTarget, { get(target, property, receiver) { console.log('get()'); return Reflect.get(...arguments) } }); proxy.foo; // get()
1、返回值
返回值无限制
2、拦截的操作
- proxy.property
- proxy[property]
- Object.create(proxy)[property]
- Reflect.get(proxy, property, receiver)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
- receiver 代理对象或继承代理对象的对象
4、捕获不变式
- 若target.property 不可写且不可配置,则处理程序返回的值必须与之匹配
- 若target.property 不可配置且[[Get]]特征为undefined,必须返回undefined
2、set()
-
set() 捕获器会在设置属性值的操作中被调用,对应Reflect.set()
const myTarget = {} const proxy = new Proxy(myTarget, { set(target, property, value, receiver) { console.log('set()') return Reflect.set(...arguments) } }) proxy.foo = 'bar' // set()
1、返回值
返回true 表示成功,返回false表示失败,严格模式TypeError
2、拦截的操作
- proxy.property = value
- proxy[property] = value
- Object.create(proxy)[property] = value
- Reflect.set(proxy, property, value, receiver)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
- value 要赋给属性的值
- receiver 接收最初赋值的对象
4、捕获不变式
- 若target.property 不可写且不可配置,则不能修改目标属性的值
- 若target.property 不可配置且[[Set]]特征为undefined,则不能修改目标属性的值, 严格模式下,处理程序中返回false会抛出TypeError
3、has()
-
has() 捕获器会在in操作符中被调用,对应Reflect.has()
const myTarget = {}; const proxy = new Proxy(myTarget, { has(target, property) { console.log('has()'); return Reflect.has(...arguments) } }); 'foo' in proxy // has()
1、返回值
has() 必须返回布尔值,表示属性是否存在,返回非布尔值会被转为布尔值
2、拦截的操作
- property in proxy
- property in Object.create(proxy)
- with(proxy) {(property)}
- Reflect.has(proxy, property)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
4、捕获不变式
- 若target.property 存在且不可配置,则处理程序必须返回true
- 若target.property 存在且目标对象不可扩展,则处理程序必须返回true
4、defineProperty()
-
defineProperty() 捕获器会在Object.defineProperty()中被调用,对应Reflect.defineProperty()
const myTarget = {}; const proxy = new Proxy(myTarget, { defineProperty(target, property, descriptor) { console.log('defineProperty()'); return Reflect.defineProperty(...arguments) } }); Object.defineProperty(proxy, 'foo', { value: 'bar' }); // defineProperty()
1、返回值
defineProperty() 必须返回布尔值,表示属性是否成功定义,返回非布尔值会被转为布尔值
2、拦截的操作
- Object.defineProperty(proxy, property, descriptor)
- Reflect.defineProperty(proxy, property, descriptor)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
- descriptor 包含可选的enumerable、configurable、writable、value、get和set定义的对象
4、捕获不变式
- 如果目标对象不可扩展,则无法定义属性
- 如果目标对象有一个可配置属性,则不能添加同名的不可配置属性
- 如果目标对象有一个不可配置属性,则不能添加同名的可配置属性
5、getOwnPropertyDescriptor()
-
getOwnPropertyDescriptor() 捕获器会在Object.getOwnPropertyDescriptor()中被调用,对应Reflect.getOwnPropertyDescriptor()
const myTarget = {}; const proxy = new Proxy(myTarget, { getOwnPropertyDescriptor(target, property) { console.log('getOwnPropertyDescriptor()'); return Reflect.getOwnPropertyDescriptor(...arguments) } }); Object.getOwnPropertyDescriptor(proxy, 'foo'); // getOwnPropertyDescriptor()
1、返回值
getOwnPropertyDescriptor() 必须返回对象,或者属性不存在时返回undefined
2、拦截的操作
- Object.getOwnPropertyDescriptor(proxy, property)
- Reflect.getOwnPropertyDescriptor(proxy, property)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
4、捕获不变式
- 如果自有的target.property 存在且不可配置,则处理程序必须返回一个表示该属性存在的对象。
- 如果自有的target.property 存在且可配置,则处理程序必须返回表示该属性可配置的对象
- 如果自有的target.property 存在且target不可扩展,则处理程序必须返回一个表示该属性存在的对象。
- 如果target.property 不存在且target不可扩展,则处理程序必须返回undefined表示该属性不存在。
- 如果target.property 不存在,则处理程序不能返回表示该属性可配置的对象
6、deleteProperty()
-
deleteProperty() 捕获器会在delete操作符中被调用,对应Reflect.deleteProperty()
const myTarget = {}; const proxy = new Proxy(myTarget, { deleteProperty(target, property) { console.log('deleteProperty()'); return Reflect.deleteProperty(...arguments) } }); delete proxy.foo // deleteProperty()
1、返回值
deleteProperty() 必须返回布尔值,表示删除属性是否成功,返回非布尔值会被转为布尔值
2、拦截的操作
- delete proxy.property
- delete proxy[property]
- Reflect.deleteProperty(proxy, property)
3、捕获器处理程序函数
- target 目标对象
- property 引用的目标对象上的字符串属性(也可是symbol)
4、捕获不变式
- 如果自有的target.property存在且不可配置,则处理程序不能删除这个属性
7、ownKeys()
-
ownKeys() 捕获器会在 Object.keys() 及类似方法中被调用,对应Reflect.ownKeys()
const myTarget = {} const proxy = new Proxy(myTarget, { ownKeys(target) { console.log('ownKeys()') return Reflect.ownKeys(...arguments) } }) Object.keys(proxy) // ownKeys()
1、返回值
ownKeys() 必须返回包含字符串或符号的可枚举对象
2、拦截的操作
- Object.getOwnPropertyNames(proxy)
- Object.getOwnPropertySymbols(proxy)
- Object.keys(proxy)
- Reflect.ownKeys(proxy)
3、捕获器处理程序函数
- target 目标对象
4、捕获不变式
- 返回的可枚举对象必须包含target的所有不可配置的自有属性
- 如果target不可扩展,则返回可枚举对象必须准确地包含自有属性键
8、getPrototypeOf()
-
getPrototypeOf() 捕获器会在Object.getPrototypeOf()中被调用,对应Reflect.getPrototypeOf()
const myTarget = {}; const proxy = new Proxy(myTarget, { getPrototypeOf(target) { console.log('getPrototypeOf()'); return Reflect.getPrototypeOf(...arguments) } }); Object.getPrototypeOf(proxy); // getPrototypeOf()
1、返回值
getPrototypeOf() 必须返回对象或null
2、拦截的操作
- Object.getPrototypeOf(proxy)
- Reflect.getPrototypeOf(proxy)
- proxy._proto_
- Object.prototype.isPrototypeOf(proxy)
- proxy instanceof Object
3、捕获器处理程序函数
- target 目标对象
4、捕获不变式
- 如果target不可扩展,则Object.getPrototypeOf(proxy)唯一有效返回值就是Object.getPrototypeOf(proxy)的返回值
9、setPrototypeOf()
-
setPrototypeOf() 捕获器会在Object.setPrototypeOf()中被调用,对应Reflect.setPrototypeOf()
const myTarget = {}; const proxy = new Proxy(myTarget, { setPrototypeOf(target, prototype) { console.log('setPrototypeOf()'); return Reflect.setPrototypeOf(...arguments) } }); Object.setPrototypeOf(proxy, Object); // setPrototypeOf()
1、返回值
setPrototypeOf() 必须返回布尔值,表示原型赋值是否成功,返回非布尔值会转为布尔值
2、拦截的操作
- Object.setPrototypeOf(proxy)
- Reflect.setPrototypeOf(proxy)
3、捕获器处理程序函数
- target 目标对象
- prototype target的替代原型,如果是顶级原型则为null
4、捕获不变式
- 如果target不可扩展,则唯一有效的prototype参数就是Object.getPrototypeOf(target)的返回值
10、isExtensible()
-
isExtensible() 捕获器会在Object.isExtensible()中被调用,对应Reflect.isExtensible()
const myTarget = {}; const proxy = new Proxy(myTarget, { isExtensible(target) { console.log('isExtensible()'); return Reflect.isExtensible(...arguments) } }); Object.isExtensible(proxy); // isExtensible()
1、返回值
isExtensible() 必须返回布尔值,表示target是否可扩展,返回非布尔值会转为布尔值
2、拦截的操作
- Object.isExtensible(proxy)
- Reflect.isExtensible(proxy)
3、捕获器处理程序函数
- target 目标对象
4、捕获不变式
- 如果target可扩展,则处理程序必须返回true
- 如果target不可扩展,则处理程序必须返回false
11、preventExtensions()
-
preventExtensions() 捕获器会在Object.preventExtensions()中被调用,对应Reflect.preventExtensions()
const myTarget = {}; const proxy = new Proxy(myTarget, { preventExtensions(target) { console.log('preventExtensions()'); return Reflect.preventExtensions(...arguments) } }); Object.preventExtensions(proxy); // preventExtensions()
1、返回值
preventExtensions() 必须返回布尔值,表示target是否已经不可扩展,返回非布尔值会转为布尔值
2、拦截的操作
- Object.preventExtensions(proxy)
- Reflect.preventExtensions(proxy)
3、捕获器处理程序函数
- target 目标对象
4、捕获不变式
- 如果Object.isExtensible(proxy) 是false,则处理程序必须返回true
12、apply()
-
apply() 捕获器会在调用函数时被调用,对应Reflect.apply()
const myTarget = {}; const proxy = new Proxy(myTarget, { apply(target, thisArg, ...arguments) { console.log('apply()'); return Reflect.preventExtensions(...arguments) } }); proxy() // apply()
1、返回值
返回值无限制
2、拦截的操作
- proxy(...argumentsList)
- Function.prototype.apply(thisArg, argumentsList)
- Function.prototype.call(thisArg, ...argumentsList)
- Reflect.apply(target, thisArgument, argumentsList)
3、捕获器处理程序函数
- target 目标对象
- thisArg 调用函数时的this参数
- argumentsList 调用函数时的参数列表
4、捕获不变式
- target必须时一个函数对象
13、construct()
-
construct() 捕获器会在new操作符中被调用,对应Reflect.construct()
const myTarget = {}; const proxy = new Proxy(myTarget, { construct(target, argumentsList, newTarget) { console.log('construct()'); return Reflect.construct(...arguments) } }); new proxy() // construct()
1、返回值
construct() 必须返回一个对象
2、拦截的操作
- new proxy(...argumentsList)
- Reflect.construct(target, argumentsList, newTarget)
3、捕获器处理程序函数
- target 目标构造对象
- argumentsList 传给目标构造函数的参数列表
- newTarget 最初被调用的构造函数
4、捕获不变式
- target必须可以用作构造函数
3、代理模式
1、跟踪属性访问
-
捕获get、set、has知道对象属性什么时候被访问、被查询
const user = { name: 'Jake' } const proxy = new Proxy(user, { get(target, property, receiver) { console.log(`Getting ${property}`) return Reflect.get(...arguments) }, set(target, property, value, receiver) { console.log(`Setting ${property}=${value}`) return Reflect.set(...arguments) } }) proxy.name // Getting name proxy.age = 27 // Setting age=27
2、隐藏属性
-
代理内部实现对外部代码不可见,隐藏目标对象上的属性很容易
const hiddenProperties = ['foo', 'bar']; const targetObject = { foo: 1, bar: 2, baz: 3 }; const proxy = new Proxy(targetObject, { get(target, property) { if (hiddenProperties.includes(property)) { return undefined; } else { return Reflect.get(...arguments); } }, has(target, property) { if (hiddenProperties.includes(property)) { return false; } else { return Reflect.has(...arguments); } } }); // get() console.log(proxy.foo); // undefined console.log(proxy.bar); // undefined console.log(proxy.baz); // 3 // has() console.log('foo' in proxy); // false console.log('bar' in proxy); // false console.log('baz' in proxy); // true
3、属性验证
-
所有赋值操作都会触发set() ,可以根据所赋的值决定是否允许赋值
const target = { onlyNumbersGoHere: 0 }; const proxy = new Proxy(target, { set(target, property, value) { if (typeof value !== 'number') { return false; } else { return Reflect.set(...arguments); } } }); proxy.onlyNumbersGoHere = 1; console.log(proxy.onlyNumbersGoHere); // 1 proxy.onlyNumbersGoHere = '2'; console.log(proxy.onlyNumbersGoHere); // 1
4、函数与构造函数参数验证
-
可以让函数只接收某种类型的值
function median(...nums) { return nums.sort()[Math.floor(nums.length / 2)]; } const proxy = new Proxy(median, { apply(target, thisArg, argumentsList) { for (const arg of argumentsList) { if (typeof arg !== 'number') { throw 'Non-number argument provided'; } } return Reflect.apply(...arguments); } }); console.log(proxy(4, 7, 1)); // 4 console.log(proxy(4, '7', 1)); // Error: Non-number argument provided
-
可以要求实例化时必须给构造函数传参
class User { constructor(id) { this.id_ = id; } } const proxy = new Proxy(User, { construct(target, argumentsList, newTarget) { if (argumentsList[0] === undefined) { throw 'User cannot be instantiated without id'; } else { return Reflect.construct(...arguments); } } }); new proxy(1); new proxy(); // Error: User cannot be instantiated without id
5、数据绑定与可观察对象
-
把运行时的原本不相关的部分联系到一起,实现各种模式,让不同代码互操作
-
可以将被代理的类绑定到全局实例集合,所有创建的实例都被添加到这个集合
const userList = [] class User { constructor(name) { this._name = name } } const proxy = new Proxy(User, { construct() { const newUser = Reflect.construct(...arguments) userList.push(newUser) return newUser } }) new proxy('John') new proxy('Jacob') new proxy('Jingleheimerschmidt') userList // [User {}, User {}, User {}]
-
还可以把集合绑定到一个事件分派程序,每次插入新实例都会发送消息
const userList = [] function emit(newValue) { console.log(newValue) } const proxy = new Proxy(User, { set(target, property, value, reveiver) { const result = Reflect.set(...arguments) if(result) { emit(Reflect.get(target, property, reveiver)) } return result } }) proxy.push('John') // John proxy.push('Jacob') // Jacob