zhaoyuuu

Appearance

Return to top
On this page

代理基础

难度：⭐️⭐️⭐️⭐️

ECMAScript 6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。

💌 对刚刚接触这个主题的开发者而言，代理是一个比较模糊的概念，而且还夹杂着很多新术语。但其实只要看几个例子，就很容易理解了。

创建空代理

代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出 TypeError。

如下面的代码所示，在代理对象上执行的任何操作实际上都会应用到目标对象。唯一可感知的不同就是代码中操作的是代理对象：

js
const target = {
  id: 'target',
}
const handler = {}
const proxy = new Proxy(target, handler)

// id 属性会访问同一个值
console.log(target.id) // target
console.log(proxy.id) // target
// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
target.id = 'foo'
console.log(target.id) // foo
console.log(proxy.id) // foo
// 给代理属性赋值会反映在两个对象上
// 因为这个赋值会转移到目标对象
proxy.id = 'bar'
console.log(target.id) // bar
console.log(proxy.id) // bar
// hasOwnProperty()方法在两个地方
// 都会应用到目标对象
console.log(target.hasOwnProperty('id')) // true
console.log(proxy.hasOwnProperty('id')) // true
// Proxy.prototype 是 undefined
// 因此不能使用 instanceof 操作符
console.log(target instanceof Proxy) // TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(proxy instanceof Proxy) // TypeError: Function has non-object prototype 'undefined' in instanceof check
// 严格相等可以用来区分代理和目标
console.log(target === proxy) // false

定义捕获器

使用代理的主要目的是可以定义捕获器（trap）。 捕获器就是在处理程序对象(handler) 中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

例如，下面定义了一个 get() 捕获器：

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

这样，当通过代理对象执行 get() 操作时，就会触发定义的 get() 捕获器：

js
const target = {
  foo: 'bar',
}
const handler = {
  // 捕获器在处理程序对象中以方法名为键
  get() {
    return 'handler override'
  },
}
const proxy = new Proxy(target, handler)
console.log(target.foo) // bar
console.log(proxy.foo) // handler override
console.log(target['foo']) // bar
console.log(proxy['foo']) // handler override
console.log(Object.create(target)['foo']) // bar
console.log(Object.create(proxy)['foo']) // handler override

捕获器参数和 Reflect API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如，get() 捕获器会接收到目标对象、要查询的属性和代理对象三个参数：

js
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

有了这些参数，就可以重建被捕获方法的原始行为：

js
const target = {
  foo: 'bar',
}
const handler = {
  get(trapTarget, property, receiver) {
    return trapTarget[property]
  },
}
const proxy = new Proxy(target, handler)
console.log(proxy.foo) // bar
console.log(target.foo) // bar

所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像 get() 那么简单。因此，通过手动写码如法炮制的想法是不现实的 🤔 。
实际上，开发者并不需要手动重建原始行为，而是可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建🤗 。

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

js
const target = {
  foo: 'bar',
}
const handler = {
  get() {
    return Reflect.get(...arguments)
  },
}
const proxy = new Proxy(target, handler)
console.log(proxy.foo) // bar
console.log(target.foo) // bar

甚至还可以写得更简洁一些：

js
const handler = {
  get: Reflect.get
};

事实上，如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应 Reflect API 的空代理，那么甚至不需要定义处理程序对象：

js
const target = {
  foo: 'bar',
}
const proxy = new Proxy(target, Reflect)
console.log(proxy.foo) // bar
console.log(target.foo) // bar

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

js
const target = {
  foo: 'bar',
  baz: 'qux',
}
const handler = {
  get(trapTarget, property, receiver) {
    let decoration = ''
    if (property === 'foo') {
      decoration = '!!!'
    }
    return Reflect.get(...arguments) + decoration
  },
}
const proxy = new Proxy(target, handler)
console.log(proxy.foo) // bar!!!
console.log(target.foo) // bar
console.log(proxy.baz) // qux
console.log(target.baz) // qux

捕获器不变式

使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）。捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。 比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出 TypeError：

js
const target = {}
Object.defineProperty(target, 'foo', {
  configurable: false,
  writable: false,
  value: 'bar',
})
const handler = {
  get() {
    return 'qux'
  },
}
const proxy = new Proxy(target, handler)
console.log(proxy.foo)
// TypeError

可撤销代理

对于使用 new Proxy() 创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。但是有时候可能需要中断代理对象与目标对象之间的联系。 Proxy 也暴露了 revocable() 方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数（revoke()）是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出 TypeError。

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

js
const target = {
  foo: 'bar',
}
const handler = {
  get() {
    return 'intercepted'
  },
}
const { proxy, revoke } = Proxy.revocable(target, handler)
console.log(proxy.foo) // intercepted
console.log(target.foo) // bar
revoke()
console.log(proxy.foo) // TypeError

实用 Reflect API

某些情况下应该优先使用 Reflect API，这是有一些理由的。

1. Reflect API 与对象 API

在使用 Reflect API 时，要记住：

  • Reflect API 并不限于捕获处理程序
  • 大多数 Reflect API 方法在 Object 类型上有对应的方法

通常，Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。

2. 状态标记

很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。例如，可以使用 Reflect API 对下面的代码进行重构：

js
// 初始代码
const o = {}
try {
  Object.defineProperty(o, 'foo', 'bar')
  console.log('success')
} catch (e) {
  console.log('failure')
}

在定义新属性时如果发生问题，Reflect.defineProperty() 会返回 false，而不是抛出错误：

js
// 重构后的代码
const o = {}
if (Reflect.defineProperty(o, 'foo', { value: 'bar' })) {
  console.log('success')
} else {
  console.log('failure')
}

以下反射方法都会提供状态标记：

  • Reflect.defineProperty()
  • Reflect.preventExtensions()
  • Reflect.setPrototypeOf()
  • Reflect.set()
  • Reflect.deleteProperty()

代理另一个代理

代理可以拦截 Reflect API 的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网：

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