Proxy

Proxy 介绍

什么是 Proxy？

Proxy 用于创建一个对象的代理，从而实现基本操作的拦截并自定义行为（如属性查找、赋值、枚举、函数调用等）。

Proxy 可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须先通过这层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写等操作。

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种元编程（meta programming），即对编程语言进行编程。

Proxy 的语法

let proxy = new Proxy(target, handler)

target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生对象、数组、函数、甚至另一个代理）。注意：target 必须是一个对象，不能是原始类型的值。
handler：一个对象，用来定制拦截行为，其属性全部为函数类型。这些函数类型的属性被称为捕获器、拦截器或陷阱函数（trap），其作用就是基本操作的拦截并自定义行为（如属性查找、赋值等）。注意：这里的拦截其实是对代理对象（proxy）的基本操作的拦截，而不是对被代理的对象（target）的拦截

handler 对象总共有 13 个捕获器（trap）：

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。

如果目标对象是函数，那么还有两种额外操作可以拦截。

apply(target, ctx, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(ctx, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

注意：

上面的每个捕获器都是可选的。如果没有设置某个捕获器，那么对应的操作会直接落在目标对象上。
Proxy 只能对对象的基本操作进行代理，无法代理复合操作

const obj = {
  foo: 'bar',
  fn() {
    console.log('fn调用了')
  },
}
const handler = {
  get(target, key) {
    console.log(`我被读取了${key}属性`)
    return target[key]
  },
  apply(target, thisArg, argumentsList) {
    console.log('fn调用被拦截')
    return target.call(thisArg, ...argumentsList)
  },
}
const p = new Proxy(obj, handler)
p.foo // 输出：我被读取了foo属性
p.fn() // 输出：我被读取了fn属性 fn调用了

上述代码中，并没有拦截到 obj.fn() 函数调用操作，而却是只是输出了“我被读取了 fn 属性”。究其原因，我们可以再次从 Proxy 的定义里的关键词“基本操作”找到答案。那么何为基本操作呢？在上述代码中就表明了对象属性的读取 p.foo 就是基本操作，与之对应的就是非基本操作，我们可以称之为复合操作。而 obj.fn() 就是一个典型的复合操作，它是由两个基本操作组成的分别是读取操作 obj.fn , 和函数调用操作（取到 obj.fn 的值再进行调用），而我们代理的对象是 obj，并不是 obj.fn。因此，我们只能拦截到 fn 属性的读取操作。这也说明了 Proxy 只能对对象的基本操作进行代理，这点尤为重要。

有些捕获器的参数中有receiver，它指的是原始的操作所在的那个对象。通常情况下是指代理对象本身，即 Proxy 实例。

例 1：

let proxy = new Proxy(
  {},
  {
    get: function(target, propKey, receiver) {
      return receiver
    },
  }
)
proxy.getReceiver === proxy // true

上面代码中，proxy 对象的 getReceiver 属性会被 get()拦截，得到的返回值就是 proxy 对象。

例 2：

let proxy = new Proxy(
  {},
  {
    get: function(target, propKey, receiver) {
      return receiver
    },
  }
)

let obj = Object.create(proxy)
obj.getReceiver === obj // true

上面代码中，obj 对象本身没有 getReceiver 属性，所以读取 obj.getReceiver 的时候，会去 obj 的原型 proxy 对象找。这时，receiver 就指向 obj，代表原始的读操作所在的那个对象。

例 3：

let proxy = new Proxy(
  {},
  {
    set: function(target, propKey, value, receiver) {
      target[propKey] = receiver
      return true
    },
  }
)
const proxy = new Proxy({}, handler)
const myObj = {}
Object.setPrototypeOf(myObj, proxy)

myObj.foo = 'bar'
myObj.foo === myObj // true

上面代码中，设置 myObj.foo 属性的值时，myObj 并没有 foo 属性，因此引擎会到 myObj 的原型链去找 foo 属性。myObj 的原型对象 proxy 是一个 Proxy 实例，设置它的 foo 属性会触发 set 方法。这时，第四个参数 receiver 就指向原始赋值行为所在的对象 myObj。

如果目标对象自身的某个属性不可写（writable）且不可配置（configurable），那么 get 和 set 捕获器无法修改该属性，严格模式下会报错。
set 捕获器应当返回一个布尔值。严格模式下，set 代理如果没有返回 true，就会报错。

Proxy 的应用

数组负索引

const handler = {
  get(target, propKey, receiver) {
    const index = Number(propKey)
    if (index < 0) {
      propKey = String(target.length + index)
    }
    return Reflect.get(target, propKey, receiver)
  },
}
const arr = new Proxy([1, 2, 3], handler)
arr[-1] // 3

内部属性的保护

const handler = {
  has: function(target, key) {
    if (key[0] === '_') {
      return false
    }
    return key in target
  },
  ownKeys: function(target) {
    return Reflect.ownKeys(target).filter((key) => key[0] !== '_')
  },
  get: function(target, key, receiver) {
    if (key[0] === '_') {
      throw new Error(`私有属性 ${key} 不能访问`)
    }
    return Reflect.get(target, key, receiver)
    // 或者 return key in receiver ? target[key] : undefined
  },
}

运算符重载

const range = (min, max) =>
  new Proxy(
    {},
    {
      has: (target, prop) => Number(prop) >= min && Number(prop) <= max,
    }
  )

console.log(2 in range(1, 3)) // true
const nums = [1, 5, 50, 100]
console.log(nums.filter((n) => n in range(1, 10))) // [1, 5]

解决层级很深的对象取值判断不严谨的问题

参考：一个函数搞定线上 bug——proxy 代理方案

表单验证

参考：探索两种优雅的表单验证——策略设计模式和 ES6 的 Proxy 代理模式

Reflect

Reflect 设计的目的

（1）将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。

（2）修改某些 Object 方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回 false。

（3）让 Object 操作都变成函数行为。某些 Object 操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

（4）Reflect 对象的方法与 Proxy 对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的方法。这就让 Proxy 对象可以方便地调用对应的 Reflect 方法，完成默认行为，作为修改行为的基础。也就是说，不管 Proxy 怎么修改默认行为，你总可以在 Reflect 上获取默认行为。

Reflect 的静态方法

Reflect 对象一共有 13 个静态方法。

Reflect.apply(target, thisArg, args)：等同于Function.prototype.apply.call(target, thisArg, args)，用于绑定函数的this对象，并执行函数。
Reflect.construct(target, args)：等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。
Reflect.get(target, name, receiver)：获取对象身上某个属性的值，类似于target[name]。
Reflect.set(target, name, value, receiver)：设置对象身上某个属性的值，类似于target[name] = value。
Reflect.defineProperty(target, name, desc)：类似于Object.defineProperty，用于在对象上定义一个新属性或修改一个已经存在的属性，并返回一个布尔值。
Reflect.deleteProperty(target, name)：类似于delete obj[name]，用于删除对象的属性，返回一个布尔值。
Reflect.has(target, name)：类似于name in obj，用于检查对象是否具有某个属性，返回一个布尔值。
Reflect.ownKeys(target)：类似于Object.getOwnPropertyNames和Object.getOwnPropertySymbols的合集，用于获取对象的所有属性名，返回一个数组。
Reflect.getOwnPropertyDescriptor(target, name)：类似于Object.getOwnPropertyDescriptor，用于获取对象指定属性的描述对象。
Reflect.getPrototypeOf(target)：类似于Object.getPrototypeOf，用于获取对象的原型对象。
Reflect.setPrototypeOf(target, prototype)：类似于Object.setPrototypeOf，用于设置对象的原型对象。
Reflect.preventExtensions(target)：类似于Object.preventExtensions，用于让一个对象变为不可扩展，返回一个布尔值。
Reflect.isExtensible(target)：类似于Object.isExtensible，用于判断一个对象是否可扩展，返回一个布尔值。

Reflect 在 Proxy 中的应用

const obj = {
  foo: 'foo',
  get bar() {
    return this.foo
  },
}
const handler = {
  get(target, key, receiver) {
    console.log(`我被读取了${key}属性`)
    return target[key]
  },
  set(target, key, val, receiver) {
    console.log(`我被设置了${key}属性, val: ${val}`)
    target[key] = val
  },
}
const p = new Proxy(obj, handler)
p.bar // 输出：我被读取了bar属性
// Q： 为什么读取foo属性没有被拦截

定义了一个 foo 属性和 bar 属性，其中 bar 属性是一个访问器属性，通过 get 函数 return this.foo 获取得到的，因此按理来说我们在读取 bar 属性时候会触发读取 foo 属性，也同样会被 get 的 trap 所拦截到，但实际代码运行结果并没有拦截到 foo 属性。

这是为什么呢？答案的关键在于 bar 访问器里的 this 指向。梳理下代码运行过程：p.bar 实际上会被 handler 的 get 捕获，返回 target['bar']，而这里的 target 实际上就是 obj，所以这时候 bar 访问器里的 this 指向 obj，this.foo，实际就是 obj.foo。而 obj 并不是 proxy 对象 p，所以访问其 foo 属性并不会被拦截到。

那么如何也能触发到 foo 属性的拦截呢，这时候 Reflect 就派上用场了，有以下代码：

const obj = {
  foo: 'foo',
  get bar() {
    return this.foo
  },
}
const handler = {
  get(target, key, receiver) {
    console.log(`我被读取了${key}属性`)
    // 注意下面的 receiver
    return Reflect.get(target, key, receiver)
  },
  set(target, key, val, receiver) {
    console.log(`我被设置了${key}属性, val: ${val}`)
    return Reflect.set(target, key, val, receiver)
  },
}
const p = new Proxy(obj, handler)
p.bar // 输出：我被读取了bar属性   我被读取了foo属性

如上面代码所示，我们能正确地触发了 foo 属性的拦截，其实现的关键在于 Reflect.get 的第三个参数 receiver ，其作用就是改变 this 指向。

建议在 proxy 对象拦截器里的属性方法都通过 Reflex.*去操作。

资料

你可能不知道的 Proxy

PreviousJavaScript Promise 详解 NextSet 和 Map

Last updated 9 days ago

Was this helpful?