JS代理Proxy和反射Reflect

ECMAScript 6新增的代理和反射可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。

如果对Object的API不太熟悉，可以阅读全面介绍JavaScript的Object构造函数 这篇文章。

代理就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由我们自己来定义。例如对数据的处理，对构造函数的处理，对数据的验证等等。

一、代理语法

Proxy语法：

const proxy = new Proxy(target, handler)

new Proxy()可以传入两个参数：

• target: 目标对象（可以是任何类型的对象，包括原生数组，函数，也可以是另一个代理）
• handler: 处理程序对象（定义了一个或多个函数的对象）。

最简单的代理是空代理，除了作为一个抽象的目标对象，什么也不做。如下代码：

// 目标对象
const target = {
  id: 'foo'
}

// 创建空的处理程序对象
const handler = {}

// 创建代理
const proxy = new Proxy(target, handler)

// id 属性会访问同一个值
console.log(target.id) // foo
console.log(proxy.id) // foo

// 给代理属性赋值会反映在两个对象上, 因为这个赋值会转移到目标对象
proxy.age = 30;

console.log(target.age) // 30

console.log(proxy.age)   // 30

// 严格相等可以区分代理和目标
console.log(proxy === target) // false

如果处理程序对象（handler）为空对象，操作将透明地将操作转发给目标对象（target）。

还有一点需要注意，Proxy是一种特殊对象。它没有自己的原型对象。可以从控制台打印看出来这一点：

console.dir(Proxy)

所以Proxy.prototype是undefined,因此不能使用instanceof操作符：

console.log(Proxy.prototype) // undefined
// TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(target instanceof Proxy) 
// TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(proxy instanceof Proxy) 

二、代理的使用

对于对象的大多数操作，JavaScript规范中有一个内部方法，它描述了最底层的工作方式。例如[[Get]]，用于读取属性的内部方法，[[Set]]用于写入属性的内部方法，等等。这些方法仅在规范中使用，不能直接通过方法名调用它们。

对于每个内部方法，可以在new Proxy的handler对象中添加捕获器来拦截基本操作。捕获器就是在处理程序对象中定义的基本操作的拦截器。下面表格列出了13种可以拦截内部操作捕获器的名称：

内部方法	Handler方法（捕获器）
[[Get]]	get()	读取属性
[[Set]]	set()	写入属性
[[HasProperty]]	has()	in 操作符等
[[Delete]]	deleteProperty()	delete 操作符
[[Call]]	apply()	函数调用
[[Construct]]	construct()	new 操作符
[[GetPrototypeOf]]	getPrototypeOf()	Object.getPrototypeOf
[[SetPrototypeOf]]	setPrototypeOf()	Object.setPrototypeOf
[[IsExtensible]]	isExtensible()	Object.isExtensible
[[PreventExtensions]]	preventExtensions()	Object.preventExtensions
[[DefineOwnProperty]]	defineProperty()	Object.defineProperty,Object.defineProperties
[[GetOwnProperty]]	getOwnPropertyDescriptor()	Object.getOwnPropertyDescriptor, for..in, Object.keys/values/entries
[[OwnPropertyKeys]]	ownKeys()	Object.getOwnPropertyNames, Object.getOwnPropertySymbols, for..in, Object/keys/values/entries

可以用JS对象来表示handler：

const target = {
  id: 'foo'
}
const proxy = new Proxy(target, {
  get() {},
  set() {},
  has() {},
  defineProperty() {},
  apply() {},
  construct() {},
  getPrototypeOf() {},
  setPrototypeOf() {},
  isExtensible() {},
  preventExtensions() {},
  deleteProperty() {},
  getOwnPropertyDescriptor() {},
  ownKeys() {}
})

三、代理捕获器

使用代理的主要目的是可以定义捕获器（trap）。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。

比如说要拦截读取操作，handler需要定义get()方法。当使用代理对象读取属性时触发该方法，就会触发定义的get()捕获器：

const target = {
  id: 'foo'
}
// 创建处理程序对象
const handler = {
  // 捕获器在处理程序对象中以方法名为键
  get() {
    return 'handler override'
  }
}
// 创建代理
const proxy = new Proxy(target, handler)

console.log(proxy.id) // handler override
console.log(target.id) // foo

只有在代理对象上执行这些操作才会触发捕获器。在目标对象上执行这些操作仍然会产生正常的行为。

四、代理的捕获器不变式

使用捕获器几乎可以改变所有基本方法的行为，但是也是有限制的。

根据ECMAScript规范，每个捕获器都必须遵循捕获器不变式 (trap invatiant)。

比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出 TypeError：

const target = {}

// 设置id属性为不可配置且不可写的数据属性
Object.defineProperty(target, 'id', {
  configurable: false,
  writable: false,
  value: 'foo'
})

const handler = {
  get() {
    return 'bar'
  }
}

const proxy = new Proxy(target, handler)
// TypeError
console.log(proxy.id) 

之所以会抛出异常，就是因为ECMAScript为了防止这类过于反常的行为，而提出的一些限制，这就是捕获器不变式。除了get之外，其余的一些捕获器也都有各自的不变式，也就是使用要求，后面会一一列出来。

五、可撤销代理

有时候可能需要中断代理对象与目标对象之间的联系。

对于使用new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。

Proxy暴露了revocable()方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数revoke()是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出TypeError。

撤销函数和代理对象是在实例化时同时生成的：

const target = {
  id: 'foo'
}

const handler = {
  get() {
    return 'bar'
  }
}

const { proxy, revoke } = Proxy.revocable(target, handler)

// bar
console.log(proxy.id) 

// foo
console.log(target.id) 

// 撤销
revoke()

// TypeError
console.log(proxy.foo) 

六、反射

在理解Reflect之前，先来看一个问题，如下代码：

const myTarget = {
  id: 'foo'
}

const handler = {
  // get 捕获器，拦截 get 操作
  get(target, property, receiver) {
    return myTarget[property]
  }
}

const proxy = new Proxy(myTarget, handler)

console.log(proxy.id) // foo
console.log(myTarget.id) // foo

所有捕获器都可以基于拦截器传入的参数来手动编写代码来重建原始操作，但不是所有捕获器行为都像get()那么简单。所以通过我们手动写代码是不现实的。

当捕获器比较复杂的时候，我们这种办法就无从应对了。但是Reflect可以帮我们解决这个问题。我们可以通过调用全局Reflect对象上（封装了原始行为）的同名方法来轻松重建原始操作。

对于每个可被Proxy捕获的内部方法，在Reflect中都有一个对应的方法，其名称和参数与Proxy捕获器相同。

Reflect的这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。所以使用反射API也可以像下面这样定义出空代理对象：

const target = {
  id: 'foo'
}
const handler = {
  get() {
    return Reflect.get(...arguments)
  }
}
const proxy = new Proxy(target, handler)

console.log(proxy.id) // foo
console.log(target.id) //foo

还可以更简洁：

const target = {
  id: 'foo'
}

const handler = {
  get: Reflect.get
}

const proxy = new Proxy(target, handler)

console.log(proxy.id) // foo
console.log(target.id) // foo

如果想创建一个可以捕获所有方法，然后将每个方法转发给对应反射API的空代理，就不需要定义处理程序对象：

const target = {
  id: 'foo'
}
const proxy = new Proxy(target, Reflect)

console.log(proxy.id) // foo
console.log(target.id) // foo

反射API准备好了样板代码，在此基础上可以用最少的代码修改捕获的方法。比如，下面的代码在某个属性被访问时，会对返回的值进行修改：

const target = {
  id: 'foo',
  name: 'zhangsan'
}

const handler = {
  get(trapTarget, property, receiver) {
    let decoration = ''
    if (property === 'id') {
      decoration = '!!!'
    }
    return Reflect.get(...arguments) + decoration
  }
}

const proxy = new Proxy(target, handler)
console.log(proxy.id) // foo!!!
console.log(proxy.name) // zhangsan

console.log(target.id) // foo
console.log(target.name) // zhangsan

某些情况下应该优先使用反射API，在使用反射API时有几点需要注意：

1. 反射API并不限于捕获处理程序，可以单独使用。

2. 大多数反射API方法在Object类型上有对应的方法。

使用反射API可以替代只有通过操作符才能完成的操作：

• Reflect.get()：可以替代对象属性访问操作符。

• Reflect.set()：可以替代=赋值操作符。

• Reflect.has()：可以替代in操作符或with()。

• Reflect.deleteProperty()：可以替代delete操作符。

• Reflect.construct()：可以替代new操作符。

七、代理和反射的结合

代理可以捕获13种不同的基本操作。这些操作有各自不同的反射API方法、参数、关联ECMAScript操作和不变式。 对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。

只要在代理上调用，所有捕获器都会拦截它们对应的反射API操作。

7.1、get()

get()捕获器会在获取属性值的操作中被调用。对应的反射API方法为Reflect.get()。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  get(target, property, receiver) {
    console.log('get()')
    return Reflect.get(...arguments)
  }
})

// get()
// foo
console.log(proxy.id)

// get()
// foo
console.log(proxy['id'])

// get()
// foo
console.log(Object.create(proxy)['id'])

// get()
// foo
console.log(Reflect.get(proxy, 'id'))

1. 返回值

返回值无限制，可以是任意值。

2. 触发get()捕获器的操作

• proxy.property
• proxy[property]
• Object.create(proxy)[property]
• Reflect.get(proxy,property,receiver)

3. get(target, property, receiver)可以传入三个参数

• target： 目标对象，该对象被作为第一个参数传递给new Proxy。
• property：标属性名。
• receiver：代理对象，通常是proxy对象本身。

const myTarget = {
  id: 'foo'
}

const handler = {
  get(target, property, receiver) {
    console.log(target === myTarget) // true
    console.log(property) // id
    console.log(receiver === proxy) // true
  }
}

const proxy = new Proxy(myTarget, handler)

proxy.id // 触发get()捕获器

7.2、set()

set()捕获器会在设置属性值的操作中被调用。对应的反射API方法为Reflect.set()。

const myTarget = {
 id: 'foo'
}
const proxy = new Proxy(myTarget, {
 set(target, property, value, receiver) {
   return Reflect.set(...arguments)
 }
})

proxy.age = 20
// {id: "foo", age: 20}
console.log(myTarget)
// Proxy {id: "foo", age: 20}
console.log(proxy)

1. 返回值

返回true表示成功。返回false表示失败，严格模式下会抛出TypeError。

2. 触发set()捕获器的操作

• proxy.property = value

• proxy[property] = value

• Object.create(proxy)[property] = value

• Reflect.set(proxy,property,value,receiver)

3. set(target, property, value, receiver)可以传入四个参数

target：目标对象。

property：引用的目标对象上的字符串键属性。

value：要赋给属性的值。

receiver：代理对象，通常是proxy对象本身。

const myTarget = {
  id: 'foo'
}
const proxy = new Proxy(myTarget, {
  set(target, property, value, receiver) {
    console.log(target === target) // true
    console.log(property) // age
    console.log(value) // 20
    console.log(receiver === proxy) // true
    return Reflect.set(...arguments)
  }
})
proxy.age = 20

7.3、has()

has()捕获器会在 in 操作符中被调用。对应的反射API方法为Reflect.has()。

const myTarget = {
  id: 'foo'
}
const proxy = new Proxy(myTarget, {
  has(target, property) {
    console.log('has()')
    return Reflect.has(...arguments)
  }
})
// has()
'id' in proxy

1. 返回值

has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。

2. 触发has()捕获器的操作

• property in proxy
• property in Object.create(proxy)
• with(proxy) {(property);}
• Reflect.has(proxy,property)

3. has(target, property)可以传入三个参数

• target：目标对象。
• property：引用的目标对象上的字符串键属性

4. 捕获器不变式

• 如果target.property存在且不可配置，则处理程序必须返回true。

const myTarget = {}
Object.defineProperty(myTarget, 'age', {
  configurable: false,
  value: 30
})
const proxy = new Proxy(myTarget, {
  has(target, property) {
    return false
  }
})
// Uncaught TypeError
console.log('age' in proxy)

• 如果target.property存在且目标对象不可扩展，则处理程序必须返回true。

const myTarget = {
  age: 30
}

Object.preventExtensions(myTarget)

const proxy = new Proxy(myTarget, {
  has(target, property) {
    return false
  }
})
// Uncaught TypeError
console.log('age' in proxy)

7.4、defineProperty()

defineProperty()捕获器会在Object.defineProperty()中被调用。对应的反射API方法为 Reflect.defineProperty()。

const myTarget = {
 id: 'foo'
}

const proxy = new Proxy(myTarget, {
 defineProperty(target, property, descriptor) {
   console.log('defineProperty()')
   console.log(descriptor)
   return Reflect.defineProperty(...arguments)
 }
})
// defineProperty()
// {value: 20, enumerable: false}
Object.defineProperty(proxy, 'age', { value: 20, enumerable: false }) 

1. 返回值

defineProperty()必须返回布尔值，表示属性是否成功定义，返回非布尔值会被转型为布尔值。

2. 触发defineProperty()捕获器的操作

• Object.defineProperty(proxy, property, descriptor)
• Reflect.defineProperty(proxy, property, descriptor)

3. defineProperty(target, property, descriptor)可以传入三个参数

• target：目标对象。
• property：引用的目标对象上的字符串键属性。
• descriptor：包含可选的enumerable、configurable、writable、value、get 和set定义的对象。

7.5、getOwnPropertyDescriptor()

getOwnPropertyDescriptor()捕获器会在Object.getOwnPropertyDescriptor()中被调用。对应的反射API方法为Reflect.getOwnPropertyDescriptor()。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  getOwnPropertyDescriptor(target, property) {
    console.log('getOwnPropertyDescriptor()')
    return Reflect.getOwnPropertyDescriptor(...arguments)
  }
})
// getOwnPropertyDescriptor()
// undefined
console.log(Object.getOwnPropertyDescriptor(proxy, 'foo'))
// getOwnPropertyDescriptor()
// { value: "foo", writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(proxy, 'id'))

1. 返回值

getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回undefined。

2. 触发getOwnPropertyDescriptor()捕获器的操作

• Object.getOwnPropertyDescriptor(proxy, property)
• Reflect.getOwnPropertyDescriptor(proxy, property)

3. getOwnPropertyDescriptor(target, property)可以传入二个参数

• target：目标对象。
• property：引用的目标对象上的字符串键属性。

4. 捕获器不变式

• 如果自有的target.property存在且不可配置，则处理程序必须返回一个表示该属性存在的对象。

const myTarget = {
 id: 'foo'
}

Object.defineProperty(myTarget, 'id', {
 value: 'foo',
 configurable: false
})

const proxy = new Proxy(myTarget, {
 getOwnPropertyDescriptor(target, property) {
   return undefined
 }
})

// Uncaught TypeError
console.log(Object.getOwnPropertyDescriptor(proxy, 'id'))

• 如果自有的target.property存在且可配置，则处理程序必须返回表示该属性可配置的对象。

const myTarget = {
 id: 'foo'
}

Object.defineProperty(myTarget, 'id', {
 value: 'foo',
 configurable: true
})

const proxy = new Proxy(myTarget, {
 getOwnPropertyDescriptor(target, property) {
   return { value: 'foo', configurable: false }
 }
})
// Uncaught TypeError
console.log(Object.getOwnPropertyDescriptor(proxy, 'id')) 

• 如果自有的target.property存在且target不可扩展，则处理程序必须返回一个表示该属性存在的对象。

const myTarget = {
  id: 'foo'
}
Object.preventExtensions(myTarget)
const proxy = new Proxy(myTarget, {
  getOwnPropertyDescriptor(target, property) {
    return undefined
  }
})
// Uncaught TypeError
console.log(Object.getOwnPropertyDescriptor(proxy, 'id'))
 

• 如果target.property不存在且target不可扩展，则处理程序必须返回undefined表示该属性不存在。

const myTarget = {
  id: 'foo'
}

Object.preventExtensions(myTarget)

const proxy = new Proxy(myTarget, {
  getOwnPropertyDescriptor(target, property) {
    return { value: 'foo', configurable: true }
  }
})

// Uncaught TypeError
console.log(Object.getOwnPropertyDescriptor(proxy, 'name')) 

• 如果target.property属性存在且可配置的时候或者target.property不存在，属性不能返回为不可配置。

const myTarget = {}


Object.defineProperty(myTarget, 'id', {
  configurable: true,
  value: 'foo'
})

const proxy = new Proxy(myTarget, {
  getOwnPropertyDescriptor(target, property) {
    return { value: 'foo', configurable: false }
  }
})
// 属性存在且可配置时候会抛出异常：Uncaught TypeError
Object.getOwnPropertyDescriptor(proxy, 'id')
 

const myTarget = {}

const proxy = new Proxy(myTarget, {
  getOwnPropertyDescriptor(target, property) {
    return { value: 'foo', configurable: false }
  }
})

// 属性不存在会抛出异常：Uncaught TypeError
Object.getOwnPropertyDescriptor(proxy, 'name')

7.6、deleteProperty()

deleteProperty()捕获器会在delete操作符中被调用。对应的反射API方法为Reflect.deleteProperty()。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  deleteProperty(target, property) {
    console.log('deleteProperty()')
    return Reflect.deleteProperty(...arguments)
  }
})

// deleteProperty()
delete proxy.id
// Proxy {}
console.log(proxy)

1. 返回值

deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。

2. 触发deleteProperty()捕获器的操作

• delete proxy.property
• delete proxy[property]
• Reflect.deleteProperty(proxy, property)

3. deleteProperty(target, property)可以传入二个参数

target：目标对象。

property：引用的目标对象上的字符串键属性。

4. 捕获器不变式

• 如果自有的target.property存在且不可配置，则处理程序不能删除这个属性。

const myTarget = {}

Object.defineProperty(myTarget, 'id', {
  value: 'foo',
  configurable: false
})

const proxy = new Proxy(myTarget, {
  deleteProperty(target, property) {
    return Reflect.deleteProperty(...arguments)
  }
})

// deleteProperty()
delete proxy.id
// Proxy {id: "foo"}
console.log(proxy)

7.7、ownKeys()

ownKeys()捕获器会在Object.keys()及类似方法中被调用。对应的反射API方法为 Reflect.ownKeys()。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  ownKeys(target) {
    console.log('ownKeys()')
    return Reflect.ownKeys(...arguments)
  }
})
// ownKeys()
// ["id"]
console.log(Object.keys(proxy))

1. 返回值

ownKeys()必须返回包含字符串或符号的可枚举对象。

2. 触发ownKeys()捕获器的操作

• Object.getOwnPropertyNames(proxy)
• Object.getOwnPropertySymbols(proxy)
• Object.keys(proxy)
• Reflect.ownKeys(proxy)

3. ownKeys()可以传入一个参数

• target：目标对象

4. 捕获器不变式

• 返回的可枚举对象必须包含target的所有不可配置和自有属性的key。

const myTarget = {
  id: 'foo'
}
Object.defineProperty(myTarget, 'age', {
  configurable: false,
  enumerable: true,
  value: 30
})
const proxy = new Proxy(myTarget, {
  ownKeys(target) {
    return ['id']
  }
})
// Uncaught TypeError
console.log(Object.keys(proxy))

• 如果target不可扩展，那么结果列表必须包含目标对象的所有自有属性的key，不能有其它值。

const myTarget = {
  id: 'foo'
}
Object.preventExtensions(myTarget) //  不可扩展
const proxy = new Proxy(myTarget, {
  ownKeys(target) {
    return ['id', 'age']
  }
})
// Uncaught TypeError
console.log(Object.keys(proxy))

7.8、getPrototypeOf()

getPrototypeOf()捕获器会在Object.getPrototypeOf()中被调用。对应的反射API方法为Reflect.getPrototypeOf()。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  getPrototypeOf(target) {
    console.log('getPrototypeOf()')
    return Reflect.getPrototypeOf(...arguments)
  }
})
// getPrototypeOf()
Object.getPrototypeOf(proxy)

1. 返回值 getPrototypeOf()必须返回对象或null。

2. 触发getPrototypeOf()捕获器的操作

• Object.getPrototypeOf(proxy)
• Reflect.getPrototypeOf(proxy)
• proxy.__proto__
• Object.prototype.isPrototypeOf(proxy)
• proxy instanceof Object

4. getPrototypeOf(target)可以传入一个参数

target：目标对象。

4. 捕获器不变式

如果target不可扩展，则Object.getPrototypeOf(proxy)唯一有效的返回值就是 Object.getPrototypeOf(target)的返回值。

const myTarget = {
  id: 'foo'
}

Object.preventExtensions(myTarget)

const proxy = new Proxy(myTarget, {
  getPrototypeOf(target) {
    return {}
  }
})

// Uncaught TypeError
console.log(Object.getPrototypeOf(proxy))

7.9、setPrototypeOf()

setPrototypeOf()捕获器会在Object.setPrototypeOf()中被调用。对应的反射API方法为Reflect.setPrototypeOf()。

const myTarget = {}

const proxy = new Proxy(myTarget, {
  setPrototypeOf(target, prototype) {
    console.log('setPrototypeOf()')
    return Reflect.setPrototypeOf(...arguments)
  }
})
// setPrototypeOf()
Object.setPrototypeOf(proxy, Object)

1. 返回值

setPrototypeOf()必须返回布尔值，表示原型赋值是否成功。返回非布尔值会被转型为布尔值。

2. 触发setPrototypeOf()捕获器的操作

• Object.setPrototypeOf(proxy)
• Reflect.setPrototypeOf(proxy)

3. setPrototypeOf(target, prototype)可以传入二个参数

• target：目标对象。

• prototype：target的替代原型，如果是顶级原型则为null。

4. 捕获器不变式

如果target不可扩展，则唯一有效的prototype参数就是Object.getPrototypeOf(target)的返回值。

const myTarget = {}

Object.preventExtensions(myTarget)

const proxy = new Proxy(myTarget, {
  setPrototypeOf(target, prototype) {
    return Reflect.setPrototypeOf(...arguments)
  }
})
Object.setPrototypeOf(proxy, Object.getPrototypeOf(myTarget))

// Uncaught TypeError
Object.setPrototypeOf(proxy, {})

7.10、isExtensible()

isExtensible()捕获器会在Object.isExtensible()中被调用。对应的反射API方法为Reflect.isExtensible()。

const myTarget = {}

const proxy = new Proxy(myTarget, {
  isExtensible(target) {
    console.log('isExtensible()')
    return Reflect.isExtensible(...arguments)
  }
})
// isExtensible()
Object.isExtensible(proxy)

1. 返回值

isExtensible()必须返回布尔值，表示target是否可扩展。返回非布尔值会被转型为布尔值。

2. 触发isExtensible()捕获器的操作

• Object.isExtensible(proxy)
• Reflect.isExtensible(proxy)

3. isExtensible(target)可以传入一个参数

target：目标对象。

4. 捕获器不变式

• 如果target可扩展，则处理程序必须返回true。

const myTarget = {}

const proxy = new Proxy(myTarget, {
  isExtensible(target) {
    return false
  }
})

// Uncaught TypeError
Object.isExtensible(proxy)

• 如果target不可扩展，则处理程序必须返回false。

const myTarget = {}

Object.preventExtensions(myTarget)

const proxy = new Proxy(myTarget, {
  isExtensible(target) {
    return true
  }
})

// Uncaught TypeError
Object.isExtensible(proxy)

7.11、preventExtensions()

preventExtensions()捕获器会在Object.preventExtensions()中被调用。对应的反射API方法为 Reflect.preventExtensions()。

const myTarget = {
  id: 'foo'
}
const proxy = new Proxy(myTarget, {
  preventExtensions(target) {
    console.log('preventExtensions()')
    return Reflect.preventExtensions(...arguments)
  }
})

// preventExtensions()
Object.preventExtensions(proxy)

1. 返回值

preventExtensions()必须返回布尔值，表示target是否已经不可扩展。返回非布尔值会被转型为布尔值。

2. 触发get()捕获器的操作

• Object.preventExtensions(proxy)
• Reflect.preventExtensions(proxy)

3. preventExtensions(target)可以传入一个参数

target: 目标对象。

4. 捕获器不变式

如果目标对象是可扩展的，必须返回false。

const myTarget = {
  id: 'foo'
}

const proxy = new Proxy(myTarget, {
  preventExtensions(target) {
    return true
  }
})
// Uncaught TypeError
Object.preventExtensions(proxy)

7.12、apply()

apply()捕获器会在调用函数时中被调用。对应的反射API方法为Reflect.apply()。

const myTarget = () => {}

const proxy = new Proxy(myTarget, {
  apply(target, thisArg, ...argumentsList) {
    console.log('apply()')
    return Reflect.apply(...arguments)
  }
})

// apply()
proxy()

1. 返回值

返回值无限制，可以是任意值。

2. 触发apply()捕获器的操作

• proxy(...argumentsList)
• Function.prototype.apply(thisArg, argumentsList)
• Function.prototype.call(thisArg, ...argumentsList)
• Reflect.apply(target, thisArgument, argumentsList)

3. apply(target, thisArg, ...argumentsList)可以传入三个参数

• target：目标对象。
• thisArg：调用函数时的this参数。
• argumentsList：调用函数时的参数列表。

4. 捕获器不变式

target必须是一个函数对象。

const myTarget = {}

const proxy = new Proxy(myTarget, {
 apply(target, thisArg, ...argumentsList) {
   return Reflect.apply(...arguments)
 }
})

//Uncaught TypeError
proxy()

7.13、construct()

construct()捕获器会在new操作符中被调用。对应的反射API方法为Reflect.construct()。

const myTarget = function () {}

const proxy = new Proxy(myTarget, {
  construct(target, argumentsList, newTarget) {
    console.log('construct()')
    return Reflect.construct(...arguments)
  }
})
// construct()
new proxy

1. 返回值

construct()必须返回一个对象。

2. 触发construct()捕获器的操作

• new proxy(...argumentsList)

• Reflect.construct(target, argumentsList, newTarget)

3. construct(target, argumentsList, newTarget)可以传入三个参数

target：目标构造函数。

argumentsList：传给目标构造函数的参数列表。

newTarget：最初被调用的构造函数。

4. 捕获器不变式

target必须可以用作构造函数。

const myTarget = {}

const proxy = new Proxy(myTarget, {
  construct(target, argumentsList, newTarget) {
    return Reflect.construct(...arguments)
  }
})

// Uncaught TypeError
new proxy()

八、代理另一个代理

我们可以创建一个代理，通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网：

const target = {
  id: 'foo'
}

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)
  }
})
// second proxy
// first proxy
// foo
console.log(secondProxy.id)

九、代理的问题与不足

代理是在ECMAScript现有基础之上构建起来的一套新API，代理作为对象的虚拟层可以正常使用。但在某些情况下，代理也不能与现在的ECMAScript机制很好地协同。

代理提供了一种独特的方法，可以在最底层更改或调整现有对象的行为。但是，它并不完美。有局限性。

9.1、代理中的this

Proxy代理的情况下，目标对象内部的this关键字会指向Proxy代理。

const target = {
  m: function () {
    console.log(this === proxy)
  }
}
const handler = {}

const proxy = new Proxy(target, handler)

target.m() // false
proxy.m() // true

上面代码中，一旦proxy代理target，target.m()内部的this就是指向proxy，而不是target。

对原生的浏览器HTMLElement对象进行拦截：

//  Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理
const div = document.querySelector('div')

// 创建代理
let divProxy = new Proxy(div, {
  get: function (target, key, receiver) {
    return target[key]
  }
})
// Uncaught TypeError: Illegal invocation
console.log(divProxy.querySelector('a')) 

上面的代码，可能是因为querySelector方法内部有访问this指向，导致报错。

9.2、代理与内部槽位

许多内建对象，例如Map，Set，Date，Promise等，都使用了所谓的内部插槽 。

它们类似于属性，但仅限于内部使用，仅用于规范目的。例如，Map将项目（item）存储在 [[MapData]] 中。

内建方法可以直接访问它们，而不通过 [[Get]]/[[Set]] 内部方法。所以Proxy无法拦截它们。

在类似这样的内建对象被代理后，代理对象没有这些内部插槽，因此内建方法将会失败。

consg map = new Map()

const proxy = new Proxy(map, {})

proxy.set('age', 30) // Error

在内部，一个Map将所有数据存储在[[MapData]]内部插槽中。代理对象没有这样的插槽，于是代理拦截后本应转发给目标对象的方法会抛出TypeError。

十、代理模式的小实例

使用代理可以实现一些有用的功能。

10.1、跟踪属性访问

通过捕获 get、set 和 has 等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

const user = {
  id: 'foo'
}

const proxy = new Proxy(user, {
  get(target, property, receiver) {
    console.log(`get ${property}`)
  },
  set(target, property, value, receiver) {
    console.log(`set ${property}=${value}`)
  },
  has() {}
})
// get id
proxy.id
// set age=27
proxy.age = 27

10.2、隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也很容易。比如：

const hiddenProperties = ['id', 'name']
const target0bject = {
  id: 'foo',
  name: 'bob',
  age: 28
}

const proxy = new Proxy(target0bject, {
  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)
    }
  }
})

console.log(proxy.id) // undefined
console.log(proxy.name) // undefined
console.log(proxy.age) // 28

console.log('id' in proxy) // false
console.log('name' in proxy) // false
console.log('age' in proxy) //true

10.3、属性验证

因为所有赋值操作都会触发set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值：

const target = {
  onlyNumber: 0
}
const proxy = new Proxy(target, {
  set(target, property, value) {
    if (typeof value !== 'number') {
      return false
    } else {
      return Reflect.set(...arguments)
    }
  }
})

proxy.onlyNumber = 1
console.log(proxy.onlyNumber) // 1

proxy.onlyNumber = '2'
console.log(proxy.onlyNumber) // 1

10.4、函数与构造函数参数验证

我们可以对函数和构造函数参数进行审查。比如，可以让函数只接收某种类型的值：

function mustNumber(...nums) {
  return nums.sort()[Math.floor(nums.length / 2)]
}

const proxy = new Proxy(mustNumber, {
  apply(target, thisArg, argumentsList) {
    for (let arg of argumentsList) {
      if (typeof arg !== 'number') {
        throw 'Non-number argument provided!'
      }
    }
    return Reflect.apply(...arguments)
  }
})
// 4
console.log(proxy(4, 7, 1))

// Error: Non-number argument provided
console.log(proxy(4, '7', 1))

也可以要求实例化时必须给构造函数传参：

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)

// Error: User cannot be instantiated without id
new proxy()

10.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('bob')
new proxy('smith')

// [User {}, User {}]
console.log(userList)

还可以把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息：

const userList = []
function emit(newValue) {
  console.log(newValue)
}
const proxy = new Proxy(userList, {
  set(target, property, value, receiver) {
    const result = Reflect.set(...arguments)
    if (result) {
      emit(Reflect.get(target, property, receiver))
    }
    return result
  }
})
// bob
proxy.push('bob')
// smith
proxy.push('smith')

十一、参考

zh.javascript.info/proxy

book.douban.com/subject/351…

book.douban.com/subject/268…

www.nicefe.dev/proxy-he-re…

es6.ruanyifeng.com/#docs/proxy

juejin.cn/post/684490…

github.com/sl1673495/n…

segmentfault.com/a/119000001…

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…