一、概述
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”(meta programming)，即对编程语言进行编程。Proxy 可以理解成在目标对象前架设一个 “拦截” 层，外界对该对象的访问都必须先通过这层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。
var obj = new Proxy({}, {
get(target, key, receiver) {
console.log(`getting ${key}!`)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log(`setting ${key}`)
return Reflect.set(target, key, value, receiver)
}
})
上面的代码对一个空对象进行了一层拦截，重定义了属性的读取(get) 和 设置(set) 行为。
运行如下
obj.count = 1
// setting count
++obj.count
// getting count!
// setting count
上面代码 说明，Proxy 实际上重载(overload) 了 点运算符，即用自己的定义覆盖了语言的原始定义。
ES6 原生提供 Proxy 构造函数，用于生成 Proxy 实例
var proxy = new Proxy(target, handler)
Proxy 对象的所有用法都是上面这种形式，不同的只是 handler 参数的写法。其中，new Proxy() 表示生成一个 Proxy 实例，target 参数表示所要拦截的目标对象，handler 参数也是一个对象，用来定制拦截行为。
拦截读取属性
var proxy = new Proxy({}, {
get(target, property) {
return 35
}
})
proxy.time // 35
proxy.name // 35
proxy.title // 35
第一个参数是索要代理的目标对象
第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。
要使 Proxy 起作用，必须针对 Proxy 实例（上例中是 proxy 对象）进行操作，而不是针对目标对象（上栗中是空对象）进行操作。
如果 handler 没有设置任何拦截，那就等同于直接通向原对象
var target = {}
var handler = {}
var proxy = new Proxy(target, handler)
proxy.a = 'b'
target.a // "b"
一个技巧是 将 Proxy 对象设置到 object.proxy 属性，从而可以在 object 对象上调用。
var object = { proxy: new Proxy(target, handler)}
Proxy 实例也可以作为其他对象的原型对象
var proxy = new Proxy({}, {
get(target, property) {
return 35
}
})
let obj = Object.create(proxy)
obj.time // 35
proxy 对象是 obj 对象的原型，obj对象本身并没有 time 属性，所以根据原型链会在在 proxy对象上读取该属性，导致被拦截。
同一个拦截去函数可以设置拦截多个操作。
var handler = {
get(target, name) {
if (name === 'prototype') {
return Object.prototype
}
return 'Hello, ' + name
},
apply(target, thisBinding, args) {
return args[0]
},
construct(target, args) {
return {value: args[1]}
}
}
var fproxy = new Proxy(function(x, y) {
return x + y
}, handler)
fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo // "Hello foo"
二、Proxy 实例的方法
下面介绍 Proxy支持的所有拦截方法
2.1、 get(target, propKey, receiver)
get 方法用于拦截某个属性的读取操作。最后一个参数 receiver 是一个可选对象，参见后面的 Reflect.get
get 方法可以继承
let proto = new Proxy({}, {
get(target, propertyKey, receiver) {
console.log('GET' + propertyKey)
return target[]propertyKey
}
})
let obj = Object.create(proto)
obj.xxx // "GET XXX"
拦截操作定义在 Prototype 对象上，所以如多读取 obj 对象继承的属性，拦截会生效。
使用 get 拦截实现数组读取负数索引
function createArray(...elements) {
let handler = {
get(target, propKey, receiver) {
let index = Number(propKey)
if (index < 0) {
propKey = String(target.length + index)
}
return Reflect.get(target, propKey, receiver)
}
}
let target = []
target.push(...elements)
return new Proxy(target, handler)
}
let arr = createArray('a', 'b', 'c')
arr[-1]
如果数组的位置参数是 -1，就会输出数组的最后一个成员
利用 Proxy，可以将读取属性的操作（get）转变为执行某个函数，从而实现属性的链式操作。
var pipe = (function() {
return function(value) {
var funcStack = []
var oproxy = new Proxy({}, {
get(pipeObject, fnName) {
if (fnName === 'get') {
return funcStack.reduce(function (val, fn) {
return fn(val)
}, value)
}
funcStack.push(window[fnName])
return oproxy
}
})
}
}())
var double = n => n * 2 // 6
var pow = n => n * n // 36
var reverseInt = n => n.toString().split("").reverse().join("") | 0; // 63
pipe(3).double.pow.reverseInt.get // 63
利用 get 拦截实现一个生产 各种 DOM 节点的通用函数 dom
const dom = new Proxy({}, {
get(target, property) {
return function(attrs = {}, ...children) {
const e1 = document.createElement(property)
for (let prop of Object.keys(attrs)) {
el.setAttribute(prop, attrs[prop])
}
for (let child of children) {
if (typeof child === 'string') {
child = document.createTextNode(child)
}
el.appendChild(child)
}
return el
}
}
})
const e1 = dom.div({},
'Hello, my name is',
dom.a({href: '//example.com'}, 'Mark'),
'. I like:',
dom.ul({},
dom.li({}, 'The Web'),
dom.li({}, 'Food'),
dom.li({}, '...actually that\'s it')
)
)
document.body.appendChild(el)
如果一个属性不可配置(configurable) 或 不可写(writable)，则该属性不能被代理，通过 Proxy 对象访问该属性将会报错
const target = Object.defineProperties({}, {
foo: {
value: 123,
writable: false,
configurable: false
}
})
const handler = {
get(target, propKey) {
return 'abc'
}
}
const proxy = new Proxy(target, handler)
proxy.foo
// TypeError
2.2、Set(target, propKey, value, receiver)
拦截某个属性的赋值操作，返回一个布尔值
假定 Person 对象有一个 age 属性，该属性应该是一个不大于 200 的整数，那么可以使用 Proxy 对象保证 age 的属性值符合要求
let validator = {
set(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError ('The age is not an integer')
}
if (value > 200) {
throw new RangeError('The age seems invalid')
}
}
// age 以外的属性，直接保存
obj[prop] = value
}
}
let person = new Proxy({}, validator)
person.age = 100
person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错
上面是数据验证的一种实现方式。利用 set 方法还可以实现数据绑定，即每当对象发生变化时，会自动更新 DOM
有时，我们会在对象上设置内部属性，属性名的第一个字符是由 下划线开头，表示这些属性不应该被外部使用。结合 get 和 set 方法，就可以做到防止这些内部属性被外部读/写
var handler = {
get(target, key) {
invariant(key, 'get')
return target[key]
},
set(target, key, value) {
invariant(key, 'set')
target[key] = value
return true
}
}
function invariant(key, action) {
if (key[0] === '_') {
throw new Error(`Invalid attempt to ${action} private "${key}" property`)
}
}
var target = {}
var proxy = new Proxy(target, handler)
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property
注意：如果目标对象自身的某个属性不可写也不可配置，那么 set 不得改变这个属性的值，只能返回同样的值，否则会报错。
2.3、apply(target, object, args)
apply 方法拦截函数的调用、call 和 apply 操作，可以接受三个参数，分别是目标对象、目标对象的上下文对象(this) 和 目标对象的参数数组。
var target = function() { return 'I am the target' }
var handler = {
apply() {
return 'I am the proxy'
}
}
var p = new Proxy(target, handler)
p()
// "I am the proxy"
作为函数调用时(p()) 就会被 apply 方法拦截，返回一个字符串
var twice = {
apply(target, ctx, args) {
return Reflect.apply(...arguments) * 2
}
}
function sum(left, right) {
return left + right
}
var proxy = new Proxy(sum, twice)
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
上面的代码中，每当执行 proxy 函数(直接调用或 call 和 apply 调用) 就会被 appy 方法拦截
直接调用 Reflect.apply 方法也会被拦截
Reflect.apply(proxy, null, [9, 10]) // 38
2.4、has(target, propKey)
用来拦截 HasProperty 操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作符就是 in 操作符（propKey in proxy)，返回一个布尔值。
var handler = {
has(target, key) {
if (key[0] === '_') {
return false
}
return key in target
}
}
var target = {_prop: 'foo', prop: 'foo' }
var proxy = new Proxy(target, handler)
'_prop' in proxy // false
'prop' in proxy // true
上面代码中，如果原对象的属性名的第一个字符时下划线，proxy.has 就会返回 false，从而不会被 in 运算符发现
如果原对象不可配置或者禁止扩展，那么这时 has 拦截会报错
var obj = {a: 10}
// 不可扩展对象
Object.preventExtensions(obj)
var p = new Proxy(obj, {
has(target, prop) {
return false
}
})
'a' in p
// TypeError: ... the proxy target is not extensible
如果某个属性不可配置（或者目标对象不可扩展），则 has 方法就不得“隐藏”(即返回 false) 目标对象的该属性
注意：has 方法拦截的是 HasProperty 操作，而不是 HasOwnProperty 操作，即 has 方法不判断一个属性时对象自身的属性还是继承的属性。
此外，虽然 for ... in 循环也用到了 in 运算符，但是 has 拦截对 for...in 循环不生效。
let stu1 = {name: '张三', score: 59}
let stu2 = {name: '李四', score: 99}
let handler = {
has(target, prop) {
if (prop === 'score' && target[prop] < 60) {
console.log(`${target.name} 不及格`)
return false
}
return prop in target
}
}
let oproxy1 = new Proxy(stu1, handler)
let oproxy2 = new Proxy(stu2, handler)
'score' in oproxy1
// 张三 不及格
// fase
'score' in oproxy2
// true
for (let a in oproxy1) {
console.log(oproxy1[a])
}
// 张三
// 59
for (let b in oproxy2) {
console.log(oproxy2[b])
}
// 李四
// 99
2.5、construct(target, args)
construct 方法用于拦截 new 命令
下面是拦截对象的写法
var handler = {
construct(target, args, newTarget) {
return new target(...args)
}
}
construct 方法可以接受两个参数
- target：目标对象
- args：构建函数的参数对象
var p = new Proxy(function() {}, {
construct: function(target, args) {
console.log('called：' + args.join(', '));
return {value: args[0] * 10}
}
})
(new p(1)).value
// 'called: 1'
// 10
construct 方法返回的必须是一个对象，否则会报错
var p = new Proxy(function() {}, {
construct(target, argumentsList) {
return 1
}
})
new p() // 报错
2.6、deleteProperty(target, propKey)
deleteProperty 方法用于拦截 delete 操作，如果这个方法抛出错误或者返回false
当前属性就无法被 delete 命令删除
var handler = {
deleteProperty (target, key) {
invariant(key, 'delete')
return true
}
}
function invariant(key, action) {
if (key[0] === '_') {
throw new Error(`Invalid attempt to ${action} private "${key}" property`)
}
}
var target = {_prop: 'foo'}
var proxy = new Proxy(target, handler)
delete proxy._prop
// Error：Invalid attemp to delete private "_prop" property
上面代码， deleteProperty 方法拦截了 delete 操作符，删除第一个字符为下划线的属性会报错
目标对象自身的不可配置（configurable）的属性不能被 deleteProperty 方法删除，否则会报错
2.7、defineProperty(target, propKey, propDesc)
defineOrioerty 方法拦截 Object.defineProperty 操作
var handler = {
defineProperty(target, key, descriptor) {
console.log(1)
return false
}
}
var target = {}
var proxy = new Proxy(target, handler)
proxy.foo = 'bar'
proxy.foo
// undefined
注意：如果目标对象不可扩展(extensible)，则 defineProperty 不能增加目标对象中不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写(writable)或不可配置(configurable)，则 defineProperty 方法不得改变这两个设置
2.8、getOwnPropertyDescriptor(target, propKey)
getOwnPropertyDescriptor 方法拦截 Object.getOwnPropertyDescriptor()，返回一个属性描述对象 或者 undefined
var handler = {
getOwnPropertyDescriptor(target, key) {
if (key[0] === '_') {
return
}
return Object.getOwnPropertyDescriptor(target, key)
}
}
var target = {_foo: 'bar', baz: 'tar'}
var proxy = new Proxy(target, handler)
Object.getOwnPropertyDescriptor(proxy, 'wat')
// undefined
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// {value: "tar", writable: true, enumerable: true, configurable: true}
2.9、getPrototypeOf(target)
getPrototypeOf 方法主要用来拦截获取对象原型。
用于拦截以下操作：
- Object.prototype.proto
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof
var proto = {}
var p = new Proxy({}, {
getPrototypeOf(target) {
return proto
}
})
Object.getPrototypeOf(p) === proto // true
注意：getPrototypeOf 方法的返回值必须是对象或者 null，否则会报错。另外，如果目标对象不可扩展(extensible)，getPrototypeOf 方法必须返回目标对象的原型对象。
2.10、isExtensible(target)
isExtensible 方法拦截 Object.isExtensible 操作。
var p = new Proxy({}, {
isExtensible(target) {
console.log('called')
return true
}
})
Object.isExtensible(p)
// called
// true
注意：以上方法只能返回布尔值，否则返回值会被自动转为布尔值
这个方法有一个强限制，它的返回值必须与目标对象的 isExtensible 属性保持一致，否则就会抛出错误。
Object.isExtensible(proxy) === Object.isExtensible(target)
下面是一个例子
var p = new Proxy({}, {
isExtensible(target) {
return false
}
})
Object.isExtensible(p)
// TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')
2.11、ownKeys(target)
ownKeys 方法用来拦截对象自身属性的读取操作
拦截以下操作：
- Object.getOwnPropertyNames()
- Object.getOwnPropertySymbols()
- Object.keys()
下面是拦截 Object.keys() 的例子。
let target = {
a: 1,
b: 2,
c: 3
}
let handler = {
ownKeys(target) {
return ['a']
}
}
let proxy = new Proxy(target, handler)
Object.keys(proxy)
// ['a']
下面是拦截第一个字符为下划线的属性名。
let target = {
_bar: 'foo',
_prop: 'bar',
prop: 'baz'
}
let handler = {
ownKeys(target) {
return Reflect.ownKeys(target).filter(key => key[0] !== '_')
}
}
let proxy = new Proxy(target, handler)
for (let key of Object.keys(proxy)) {
console.log(target[key])
}
// 'baz'
需要注意的是，使用 Object.keys() 方法是，有三类属性会被 ownKeys 方法自动过滤，不会返回
- 目标对象上不存在的属性
- 属性名为 Symbol 值
- 不可遍历(enumerable) 的属性
let target = {
a: 1,
b: 2,
c: 3,
[Symbol.for('secret')]: '4'
}
Object.defineProperty(target, 'key', {
enumerable: false,
configurable: true,
writable: true,
value: 'static'
})
let handler = {
ownKeys(target) {
return ['a', 'b', 'd', Symbol.for('secret'), 'key']
}
}
let proxy = new Proxy(target, handler)
Object.keys(proxy)
// ["a", "b"]
上面的 不存在属性(d)、Symbol 值(Symbol.for('secret'))、不可遍历属性(key)，结果都被自动过滤掉。
ownKeys 方法还可以拦截 Object.getownPropertyNames()
var p = new Proxy({}, {
ownKeys(target) {
return ['a', 'b', 'c']
}
})
Object.getOwnPropertyNames(p)
// ["a", "b", "c"]
注意：ownKeys 方法返回的数组成员只能是字符串或 Symbol 值。如果有其它类型的值，或者返回的根本不是数组，就会报错。
var obj = {}
var p = new Proxy(obj, {
ownKeys(target) {
return [123, true, undefined, null, {}, []]
}
})
Object.getOwnPropertyNames(p)
// TypeError: 123 is not a valid property name
上面代码中， ownkeys 方法虽然返回一个数组，但是每一个数组成员都不是字符串或Symbol 值，因此就会报错。
如果目标对象自身包含不可配置的属性，则该属性必须被 ownkeys 方法返回，否则会报错，
var obj = {}
Object.defineProperty(obj, 'a', {
configurable: false,
enumerable: true,
value: 10
})
var p = new Proxy(obj, {
ownKeys(target) {
return ['b']
}
})
Object.getOwnPropertyNames(p)
// TypeError: 'ownKeys' on proxy: trap result did not include 'a'
上面代码中，obj 对象的 a 属性时不可配置的，这是 ownKeys 方法返回的数组之中必须包含a，否则会报错。
如果目标对象是不可扩展的(non-extensition)，这是 ownKeys 方法返回的数组之中必须包含原对象的所有属性，且不能包含多余的属性，否则会报错
var obj = {
a: 1
}
// 不可扩展对象
Object.preventExtensions(obj)
var p = new Proxy(obj, {
ownKeys(target) {
return ['a', 'b']
}
})
Object.getOwnPropertyNames(p)
// TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible
上面代码中，Obj 对象被设置为不可扩展对象，这是 ownKeys 方法返回的数组之中包含了 obj 对象的多余属性 b，所以导致了出错
2.12、preventExtensions(target)
preventExtensions 方法拦截 Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。
这个方法有一个限制，只有目标对象不可扩展时(即 Object.isExtensible(proxy) 为 false)，proxy.preventExtensions 才能返回 true，否则会报错
var p = new Proxy({}, {
preventExtensions(target) {
return true
}
})
Object.isExtensible(p)
// true
Object.preventExtensions(p)
// 报错
proxy.preventExtensions 方法返回 true，但此时 Object.isExtensible(proxy) 会返回 true，因此报错。
为了防止这个问题，一般会在 proxy.preventExtensions 方法中调用一次 Object.preventExtensions.
代码如下：
var p = new Proxy({}, {
preventExtensions(target) {
console.log('called')
// 设置为不可扩展对象
Object.preventExtensions(target)
return true
}
})
Object.preventExtensions(p)
// 'called'
// true
2.13、setPrototypeOf(target, proto)
setPrototypeOf 方法主要用于拦截 Object.setPrototypeOf 方法。
var handler = {
setPrototypeOf(target, proto) {
throw new Error('changeing the prototype is forbidden')
}
}
var proto = {}
var target = function() {}
var proxy = new Proxy(target, handler)
Object.setPrototypeOf(proxy, proto)
// Error: changeing the prototype is forbidden
注意：该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（extensible），setPrototypeOf 方法不得改变目标对象的原型。
三、Proxy.revocable()
Proxy.revocable 方法返回一个可取消的 Proxy 实例
let target = {}
let handler = {}
let {proxy, revoke} = Proxy.revocable(target, handler)
proxy.foo = 123
proxy.foo // 123
revoke()
proxy.foo // TypeError: Revoked
Proxy.revocable 方法返回一个对象，包含两个属性
- proxy属性 是 Proxy 实例
- revoke 属性是一个函数，可以取消 Proxy 实例
proxy.revocable 的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。
四、this 问题
虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。
const target = {
m() {
console.log(this === proxy)
}
}
const handler = {}
const proxy = new Proxy(target, handler)
target.m() // false
proxy.m() // true
由于 this 执行的变化导致 Proxy 无法代理目标对象。
const _name = new WeakMap()
class Person {
constructor(name) {
_name.set(this, name)
}
get name() {
return _name.get(this)
}
}
const jane = new Person('Jane')
jane.name // 'Jane'
const proxy = new Proxy(jane, {})
proxy.name // undefined
此外，有些原生对象的内部属性只有通过正确的 this 才能获取，所以 Proxy 也无法代理这些原生对象的属性
const target = new Date()
const handler = {}
const proxy = new Proxy(target, handler)
proxy.getDate()
// TypeError: this is not a Date object
对于以上情况，可以让 this 绑定原始对象，从而解决这个问题
const target = new Date('2015-01-01')
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target)
}
return Reflect.get(target, prop)
}
}
const proxy = new Proxy(target, handler)
proxy.getDate()// 1
五、实例：Web 服务的客户端
Proxy 对象可以拦截目标对象的任意属性，这使得它很合适来编写 Web 服务的客户端。
const service = createWebService('http://example.com/data')
service.employees().then(json => {
const employees = JSON.parse(json)
})
上面的代码新建了 一个 Web 服务的接口，这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截即可。
function createWebService(baseUrl) {
return new Proxy({}, {
get(target, propKey, receiver) {
return () => httpGet(baseUrl + '/' + propKey)
}
})
}
同理，Proxy 也可以用来实现数据库的 ORM 层。