关注前端小讴，浏览更多原创技术文章

代理捕捉器与反射办法

• 代理能够捕捉 13 种 不同的基本操作，代理对象上执行的任一种操作 只会 有一种捕捉处理程序被调用，不存在反复捕捉景象
• 只有在代理上操作，所有捕捉器都会拦挡对应的反射 API 操作

相干代码 →

get()

• 在 获取属性值 的操作中被调用，对应的反射 API 办法为Reflect.get(target, property, receiver)

  • 返回值

    • 无限度

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）
    • receiver：代理对象或继承代理对象的对象

  • 捕捉器不变式

    • 如果 target.property 不可写且不可配，处理程序返回值 必须 与target.property匹配
    • 如果 target.property 不可配置且 [[Get]] 个性为 undefined，处理程序返回值 必须 是undefined

const myTarget = {foo: 'bar',}
const proxy = new Proxy(myTarget, {get(target, property, receiver) {console.log(target) // {foo: 'bar'}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(receiver) // {foo: 'bar'}，代理对象
    return Reflect.get(...arguments)
  },
})
console.log(proxy.foo) // 'bar'，拦挡的操作

// 捕捉器不变式
Object.defineProperty(myTarget, 'foo', {configurable: false, // 不可配置})
const proxy2 = new Proxy(myTarget, {get() {return 'baz' // 试图重写},
})
console.log(proxy2.foo) // TypeError

set()

• 在 设置属性值 的操作中被调用，对应的反射 API 办法为Reflect.set(target, property, value, receiver)

  • 返回值

    • 布尔值，true 胜利 / false 失败（严格模式下抛出 TypeError）

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）
    • value：要赋给属性的值
    • receiver：接管最后赋值的对象

  • 捕捉器不变式

    • 如果 target.property 不可写且不可配，则不能批改指标属性的值
    • 如果 target.property 不可配置且 [[Set]] 个性为undefined，则不能批改指标属性的值
    • 严格模式下，处理程序返回 false 会抛出 TypeError

const myTarget2 = {}
const proxy3 = new Proxy(myTarget2, {set(target, property, value, receiver) {console.log(target) // {}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(value) // 'baz'，要赋给属性的值
    console.log(receiver) // {}，接管最后赋值的对象
    console.log(Reflect.set(...arguments)) // true，操作胜利
    return Reflect.set(...arguments)
  },
})
proxy3.foo = 'baz' // 拦挡的操作
console.log(proxy3.foo) // 'baz'
console.log(myTarget2.foo) // 'baz'，赋值转移到指标对象上

// 捕捉器不变式
Object.defineProperty(myTarget2, 'foo', {
  configurable: false, // 不可配置
  writable: false, // 不可重写
})
const proxy4 = new Proxy(myTarget2, {set() {console.log(Reflect.set(...arguments)) // false，操作失败
    return undefined
  },
})
proxy4.foo = 'bar'
console.log(proxy4.foo) // 'baz'
console.log(myTarget2.foo) // 'baz'

has()

• 在 in 操作符 中被调用，对应的反射 API 办法为Reflect.has(target, property)

  • 返回值

    • 布尔值，示意属性是否存在，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）

  • 捕捉器不变式

    • 如果 target.property 存在且不可配置，则处理程序 必须 返回true
    • 如果 target.property 存在且指标对象不可扩大，则处理程序 必须 返回true

const myTarget3 = {foo: 'bar'}
const proxy5 = new Proxy(myTarget3, {has(target, property) {console.log(target) // {foo: 'bar'}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(Reflect.set(...arguments)) // true，属性存在
    return Reflect.set(...arguments)
  },
})
'foo' in proxy5 // 拦挡的操作

// 捕捉器不变式
Object.defineProperty(myTarget3, 'foo', {configurable: false, // 不可配置})
const proxy6 = new Proxy(myTarget3, {has() {return false // 试图返回 false},
})
'foo' in proxy6 // TypeError

defineProperty()

• 在 Object.defineProperty() 中被调用，对应的反射 API 办法为Reflect.defineProperty(target, property, descriptor)

  • 返回值

    • 布尔值，示意属性是否胜利定义，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）
    • descriptor：描述符对象（描述符对象的属性：configurable、enumerable、writable、value、get、set的一个或多个）

  • 捕捉器不变式

    • 如果指标对象不可扩大，则无奈定义属性
    • 如果指标对象有一个可配置的属性，则不能增加同名的不可配置属性
    • 如果指标对象有一个不可配置的属性，则不能增加同名的可配置属性

const myTarget4 = {}
const proxy7 = new Proxy(myTarget4, {defineProperty(target, property, descriptor) {console.log(target) // {}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(descriptor) // {value: 'bar'}，描述符对象
    console.log(Reflect.defineProperty(...arguments)) // true，属性定义胜利
    return Reflect.defineProperty(...arguments)
  },
})
Object.defineProperty(proxy7, 'foo', { value: 'bar'}) // 拦挡的操作
console.log(proxy7.foo) // 'bar'
console.log(myTarget4.foo) // 'bar'

// 捕捉器不变式
Object.defineProperty(myTarget4, 'fox', {
  value: 'baz',
  configurable: false, // 不可配置
})
const proxy8 = new Proxy(myTarget4, {defineProperty() {return true},
})
Object.defineProperty(proxy8, 'fox', {
  value: 'qux',
  configurable: true,
  writable: true,
}) // TypeError

getOwnPropertyDescriptor()

• 在 Object.getOwnPropertyDescriptor() 中被调用，对应的反射 API 办法为Reflect.getOwnPropertyDescriptor(target, property)

  • 返回值

    • 属性的描述符对象，属性不存在时返回undefined

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）

  • 捕捉器不变式

    • 如果自有的 target.property 存在且不可配置，则处理程序 必须 返回一个示意该属性存在的对象
    • 如果自有的 target.property 存在且可配置，则处理程序 必须 返回该属性可可配置的对象
    • 如果自有的 target.property 存在且指标对象不可扩大，则处理程序 必须 返回一个示意该属性存在的对象
    • 如果 target.property 不存在且指标对象不可扩大，则处理程序 必须 返回 undefined 示意改属性不存在
    • 如果 target.property 不存在，则处理程序不能返回示意该属性存在的对象

const myTarget5 = {foo: 'bar'}
const proxy9 = new Proxy(myTarget5, {getOwnPropertyDescriptor(target, property) {console.log(target) // {foo: 'bar'}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(Reflect.getOwnPropertyDescriptor(...arguments)) // {value: 'bar', writable: true, enumerable: true, configurable: true}，属性的描述符对象
    return Reflect.getOwnPropertyDescriptor(...arguments)
  },
})
Object.getOwnPropertyDescriptor(proxy9, 'foo') // 拦挡的操作

// 捕捉器不变式
Object.defineProperty(myTarget5, 'fox', {
  value: 'baz', // 指标对象的属性存在
  configurable: false, // 不可配置
})
const proxy10 = new Proxy(myTarget5, {getOwnPropertyDescriptor() {
    // return undefined // TypeError，必须返回一个示意该属性存在的对象
    return {
      value: 'baz',
      writable: false,
      enumerable: false,
      configurable: false,
    }
  },
})
Object.getOwnPropertyDescriptor(proxy10, 'fox')

deleteProperty()

• 在 delete 操作符 中被调用，对应的反射 API 办法为Reflect.deleteProperty(target, property)

  • 返回值

    • 布尔值，示意删除属性是否胜利，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • property：指标对象的键属性（字符串键或符号键）

  • 捕捉器不变式

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

const myTarget6 = {foo: 'bar'}
const proxy11 = new Proxy(myTarget6, {deleteProperty(target, property) {console.log(target) // {foo: 'bar'}，指标对象
    console.log(property) // 'foo'，指标对象键属性
    console.log(Reflect.deleteProperty(...arguments)) // true，删除属性胜利
    return Reflect.deleteProperty(...arguments)
  },
})
delete proxy11.foo // 拦挡的操作
console.log(proxy11.foo) // undefined
console.log(myTarget6.foo) // undefined

// 捕捉器不变式
Object.defineProperty(myTarget6, 'fox', {
  value: 'baz', // 指标对象的属性存在
  configurable: false, // 不可配置
})
const proxy12 = new Proxy(myTarget6, {deleteProperty() {console.log(Reflect.deleteProperty(...arguments)) // false，删除属性失败
    return Reflect.deleteProperty(...arguments)
  },
})
delete proxy12.fox
console.log(proxy12.fox) // 'baz'
console.log(myTarget6.fox) // 'baz'

ownKeys()

• 在 Object.keys() 及相似办法中被调用，对应的反射 API 办法为Reflect.ownKeys(target)

  • 返回值

    • 必须 返回蕴含字符串或符号的 可枚举 对象

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象

  • 捕捉器不变式

    • 返回的可枚举对象 必须 蕴含 target 的所有 不可配置的自有属性
    • 如果 target 不可扩大，则返回可枚举对象 必须 精确蕴含自有属性键

Object.defineProperty(myTarget7, 'fox', {
  value: 'baz',
  configurable: false, // 不可配置
})
const proxy14 = new Proxy(myTarget7, {ownKeys() {// return [] // TypeError: 'ownKeys' on proxy: trap result did not include 'fox'，必须蕴含指标对象所有不可配置的自有属性
    return ['fox', 'qux'] // 必须蕴含 fox 键
  },
})
Object.keys(proxy14)

getPrototypeOf()

• 在 Object.getPrototypeOf() 中被调用，对应的反射 API 办法为Reflect.getPrototypeOf(target)

  • 返回值

    • 必须 返回对象或 null

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象

  • 捕捉器不变式

    • 如果 target 不可扩大，则 Object.getPrototypeOf(proxy) 惟一无效 的返回值就是 Object.getPrototypeOf(target) 的返回值

const myTarget8 = new Array(1, 2, 3)
const proxy15 = new Proxy(myTarget8, {getPrototypeOf(target) {console.log(target) // [1, 2, 3]，指标对象
    console.log(Reflect.getPrototypeOf(...arguments)) // Array 的原型对象，可在浏览器中查看
    return Reflect.getPrototypeOf(...arguments)
  },
})
Object.getPrototypeOf(proxy15) // 拦挡的操作

// 捕捉器不变式
Object.preventExtensions(myTarget8) // 不可扩大
const proxy16 = new Proxy(myTarget8, {getPrototypeOf(target) {// return [] // TypeError，惟一无效的返回值是 Object.getPrototypeOf(target)的返回值
    return Object.getPrototypeOf(target) // 无效
  },
})
Object.getPrototypeOf(proxy16)

setPrototypeOf()

• 在 Object.setPrototypeOf() 中被调用，对应的反射 API 办法为Reflect.setPrototypeOf(target, prototype)

  • 返回值

    • 布尔值，示意原型赋值是否胜利，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象
    • prototype：target的代替原型，顶级原型则为null

  • 捕捉器不变式

    • 如果 target.property 不可扩大，则 惟一无效 的prototype参数就是 Object.getPrototypeOf(target) 的返回值

const myTarget9 = {}
const targetPrototype = {foo: 'bar'}
const proxy17 = new Proxy(myTarget9, {setPrototypeOf(target, prototype) {console.log(target) //{}，指标对象
    console.log(targetPrototype) // {foo: 'bar'}，target 的代替原型
    console.log(Reflect.setPrototypeOf(...arguments)) // true，原型赋值胜利
    return Reflect.setPrototypeOf(...arguments)
  },
})
Object.setPrototypeOf(proxy17, targetPrototype)
console.log(proxy17) // {}
console.log(proxy17.__proto__ === targetPrototype) // true
console.log(proxy17.foo) // 'bar'
console.log(myTarget9.foo) // 'bar'

// 捕捉器不变式
Object.preventExtensions(myTarget9) // 不可扩大
const proxy18 = new Proxy(myTarget9, {setPrototypeOf() {return Reflect.setPrototypeOf(...arguments)
  },
})
// Object.setPrototypeOf(proxy18, targetPrototype) // TypeError，惟一无效的 prototype 参数是 Object.getPrototypeOf(target)的返回值
Object.setPrototypeOf(proxy18, Object.getPrototypeOf(myTarget9)) // 无效
console.log(proxy18.__proto__ === Object.getPrototypeOf(myTarget9)) // true

isExtensible()

• 在 Object.isExtensible() 中被调用，对应的反射 API 办法为Reflect.isExtensible(target)

  • 返回值

    • 布尔值，示意 target 是否可被扩大，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象

  • 捕捉器不变式

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

const myTarget10 = {}
const proxy19 = new Proxy(myTarget10, {isExtensible(target) {console.log(target) // {}，指标对象
    console.log(Reflect.isExtensible(...arguments)) // true，target 可扩大
    return Reflect.isExtensible(...arguments)
  },
})
Object.isExtensible(proxy19) // 拦挡的操作

// 捕捉器不变式
Object.preventExtensions(myTarget10) // 不可扩大
const proxy20 = new Proxy(myTarget10, {isExtensible() {
    // return true // TypeError，不可扩大必须返回 false
    console.log(Reflect.isExtensible(...arguments)) // false，target 不可扩大
    return false
  },
})
Object.isExtensible(proxy20)

preventExtensions()

• 在 Object.preventExtensions() 中被调用，对应的反射 API 办法为Reflect.preventExtensions(target)

  • 返回值

    • 布尔值，示意 target 是否曾经不可扩大，非布尔值会被 转型 为布尔值

  • 拦挡的操作

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

  • 捕捉器处理程序参数

    • target：指标对象

  • 捕捉器不变式

    • 如果 Object.isExtensions(target) 是false，则处理程序 必须 返回true

const myTarget11 = {}
const proxy21 = new Proxy(myTarget11, {preventExtensions(target) {console.log(target) // {}，指标对象
    console.log(Reflect.preventExtensions(...arguments)) // true，target 曾经不可扩大
    return Reflect.preventExtensions(...arguments)
  },
})
Object.preventExtensions(proxy21) // 拦挡的操作

// 捕捉器不变式
Object.preventExtensions(myTarget11) // 不可扩大
console.log(Object.isExtensible(myTarget11)) // false，指标对象曾经不可扩大
const proxy22 = new Proxy(myTarget11, {preventExtensions() {
    // return false // TypeError，处理程序此时必须返回 true
    return true
  },
})
Object.preventExtensions(proxy22)

apply()

• 在 调用函数 时被调用，对应的反射 API 办法为Reflect.apply(target, thisArg, argumentsList)

  • 返回值

    • 返回值无限度

  • 拦挡的操作

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

  • 捕捉器处理程序参数

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

  • 捕捉器不变式

    • target必须 是一个函数对象

const myTarget12 = () => {}
const targetApply = {foo: 'bar'}
const proxy23 = new Proxy(myTarget12, {apply(target, thisArg, argumentsList) {console.log(target) // [Function: myTarget12]，指标对象
    console.log(thisArg) // {foo: 'bar'}，调用函数时的 this 参数
    console.log(argumentsList) // [1, 2, 3]，调用函数时的参数列表
    return Reflect.apply(...arguments)
  },
})
Reflect.apply(proxy23, targetApply, [1, 2, 3]) // 拦挡的操作

// 捕捉器不变式
const proxy24 = new Proxy(targetApply, {apply() {return Reflect.apply(...arguments)
  },
})
// proxy24() // TypeError: proxy24 is not a function，target 必须是函数对象

construct()

• 在 new 操作符 时被调用，对应的反射 API 办法为Reflect.construct(target, argumentsList, newTarget)

  • 返回值

    • 必须 返回一个对象

  • 拦挡的操作

    • new proxy(...argumentsList)
    • Reflect.construct(proxy, argumentsList, newTarget)

  • 捕捉器处理程序参数

    • target：指标构造函数
    • argumentsList：传给指标构造函数的参数列表
    • newTarget：最后被调用的构造函数

  • 捕捉器不变式

    • target必须 能够用作构造函数

const MyTarget13 = function () {}
const proxy25 = new Proxy(MyTarget13, {construct(target, argumentsList, newTarget) {console.log(target) // [Function: MyTarget13]，指标构造函数
    console.log(argumentsList) // [123]，传给指标构造函数的参数列表
    console.log(newTarget) // [Function: MyTarget13]，最后被调用的构造函数
    return Reflect.construct(...arguments)
  },
})
new proxy25(123) // 拦挡的操作

const MyTarget14 = () => {} // 箭头函数，不能用作构造函数
const proxy26 = new Proxy(MyTarget14, {construct() {return Reflect.construct(...arguments)
  },
})
new proxy26() // TypeError: proxy26 is not a constructor，target 必须能够用作构造函数

总结 & 问点