JavaScript -- 代理和反射

·  阅读 619

代理基础

代理是es6为开发者提供的可以拦截住针对对象的一些底层操作,并且额外在这基础上面添加一些其他的行为。 它相当于一个看门的,拦住来客(底层操作)问话(开发者逻辑)。行就开门进去,不行就打一顿丢出去

创建代理

const handler = {}
const target = {
  id: 'target'
}
const proxy = new Proxy(target, handler)
复制代码

代理是由Proxy构造函数创建出来的一个代理对象,构造函数接收两个参数

  • target 目标对象(要操作的对象)
  • handler 处理程序对象(拦截后触发的捕获器api的集合对象)

目标对象可以直接调用,我们也可以通过代理对象进行调用。最终的操作结果也会反映到目标对象里面

const handler = {}
const target = {
  id: 'target'
}
const proxy = new Proxy(target, handler)
proxy.id = 'proxy'
// 修改代理对象的属性值,也会反映到目标对象
console.log(target) // { id: "proxy" }
console.log(proxy) // { id: 'proxy' }
// 再目标对象里面操作,同样也会反映到代理对象
// 因为引用的是同一个对象
traget.name = 'yu'
console.log(target) // { id: "proxy", name: 'yu' }
console.log(proxy) // { id: "proxy", name: 'yu' }
复制代码

注:Proxy构造函数的prototype是undefined

捕获器

代理之所以能够针对底层操作进行拦截并且能够进行额外的操作,就是通过捕获器来实现的。捕获器是定义再处理程序对象里面的,一个处理程序对象可以定义多个捕获器方法。每个捕获器都对应着一个基本操作。

  • 比如获取对象属性的操作,对应着get捕获器方法
const handler = {
  get(target, property, proxy) {
  	console.log('触发了get方法')
    return target[property]
  }
}
const target = {
  id: 'target'
}
const proxy = new Proxy(target, handler)
proxy.id // '触发了get方法'
复制代码

这些捕获器只在代理对象触发,直接使用目标对象是不会触发的

捕获器方法都有对应的参数,通过这些参数可以重新构建新的行为逻辑。比如get方法就会有三个参数

  • target 目标对象
  • property 要查询的属性
  • proxy 代理对象

一个代理里面包含着13种捕获器方法,这些捕获器方法可以重新构造新的行为。但是也要遵守一个就是要有这个操作的原始行为,但是有些原始行为十分复制,我们手动如法炮制可能很麻烦。所以es6给开发者提供了反射API,他给我们提供了基本的原始行为不需要我们来写。

反射(Reflect)

反射对象是一个有13个方法的对象,相当于一个Object的子集。但是它将Object的一些命令式的操作转变成了函数式。

  • 比如 in操作符 这个就对应着Reflect.has
  • 比如 delete操作符 这个就对应着Reflect.deleteProperty

反射对象还有一个好处就是修改某些Object方法的返回结果,让其变得更合理。比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false

reflect对象的最大作用是和proxy代理对象的捕获器的方法是一一对应的,可以结合proxy代理对象一起使用

const target = {
  id: 'target'
}
const handler = {
  get(target, property, handler) {
      let a = ''
      if (property === 'id') {
          a = '!!!'
      }
      return Reflect.get(...arguments) + a
  }
}
const proxy = new Proxy(target, handler)
console.log(proxy.id) // target!!!
复制代码

捕获器API

get()

get捕获器是再获取属性的时候触发的,对应的反射api是Reflect.get

get方法的返回值是没有限制的

拦截的操作

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

参数

  • target 目标对象
  • property 要查询的属性
  • proxy 代理对象
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 get(target, property, receiver) { 
 console.log('get()'); 
 return Reflect.get(...arguments) 
 } 
}); 
proxy.foo; 
// get()
复制代码

set()

set捕获器是通过设置属性的时候触发的,对应的反射api是Reflect.set

set方法的返回值 返回 true 表示成功;返回 false 表示失败,严格模式下会抛出 TypeError

拦截操作

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

参数

  • target:目标对象。
  • property:引用的目标对象上的字符串键属性。
  • value:要赋给属性的值。
  • receiver:接收最初赋值的对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 set(target, property, value, receiver) { 
 console.log('set()'); 
 return Reflect.set(...arguments) 
 } 
}); 
proxy.foo = 'bar'; 
// set()
复制代码

has()

has捕获器是通过使用了in操作符触发的,对应的反射api是Reflect.has()

has方法必须返回布尔值,表示属性是否存在。返回非布尔值会被转型为布尔值

拦截操作

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

参数

  • target:目标对象。
  • property:引用的目标对象上的字符串键属性。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 has(target, property) { 
 console.log('has()'); 
 return Reflect.has(...arguments) 
 } 
}); 
'foo' in proxy; 
// has()
复制代码

defineProperty()

defineProperty捕获器是通过使用了Object.defineProperty()中被触发,对应的反射api是Reflect.defineProperty()

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

拦截操作

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

参数

  • target:目标对象。
  • property:引用的目标对象上的字符串键属性。
  • descriptor:包含可选的 enumerable、configurable、writable、value、get 和 set定义的对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 defineProperty(target, property, descriptor) { 
 console.log('defineProperty()'); 
 return Reflect.defineProperty(...arguments) 
 } 
}); 
Object.defineProperty(proxy, 'foo', { value: 'bar' }); 
// defineProperty()
复制代码

getOwnPropertyDescriptor()

getOwnPropertyDescriptor捕获器是通过使用了Object.getOwnPropertyDescriptor()中触发的,对应的反射api是Reflect.getOwnPropertyDescriptor()

getOwnPropertyDescriptor方法必须返回对象,或者在属性不存在时返回 undefined。

拦截操作

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

参数

  • target:目标对象。
  • property:引用的目标对象上的字符串键属性。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 getOwnPropertyDescriptor(target, property) { 
 console.log('getOwnPropertyDescriptor()'); 
 return Reflect.getOwnPropertyDescriptor(...arguments) 
 } 
}); 
Object.getOwnPropertyDescriptor(proxy, 'foo'); 
// getOwnPropertyDescriptor()
复制代码

deleteProperty()

deleteProperty捕获器是通过使用了delete操作符触发的,对应的反射api是Reflect.deleteProperty()

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

拦截操作

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

参数

  • target:目标对象。
  • property:引用的目标对象上的字符串键属性。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 deleteProperty(target, property) { 
 console.log('deleteProperty()'); 
 return Reflect.deleteProperty(...arguments) 
 } 
}); 
delete proxy.foo 
// deleteProperty()
复制代码

ownKeys()

ownKeys捕获器是通过Object.keys()及类似方法中被触发。对应的反射 API 方法为 Reflect.ownKeys()

拦截操作

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

参数

  • target:目标对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 ownKeys(target) { 
 console.log('ownKeys()'); 
 return Reflect.ownKeys(...arguments) 
 } 
}); 
Object.keys(proxy); 
// ownKeys()
复制代码

getPrototypeOf()

getPrototypeOf捕获器是通过在 Object.getPrototypeOf()获取原型对象中被触发的,对应的Reflect.getPrototypeOf()

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

拦截操作

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

参数

  • target:目标对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 getPrototypeOf(target) { 
 console.log('getPrototypeOf()'); 
 return Reflect.getPrototypeOf(...arguments) 
 } 
}); 
Object.getPrototypeOf(proxy); 
// getPrototypeOf()
复制代码

setPrototypeOf()

setPrototypeOf捕获器是通过使用Object.setPrototypeOf()设置原型对象中触发的,对应的Reflect.setPrototypeOf()

setPrototypeOf方法必须返回布尔值,表示原型赋值是否成功。返回非布尔值会被转型为布尔值

拦截操作

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

参数

  • target:目标对象。
  • prototype:target 的替代原型,如果是顶级原型则为 null。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 setPrototypeOf(target, prototype) { 
 console.log('setPrototypeOf()'); 
 return Reflect.setPrototypeOf(...arguments) 
 } 
}); 
Object.setPrototypeOf(proxy, Object); 
// setPrototypeOf()
复制代码

isExtensible

isExtensible捕获器的通过Object.isExtensible()是否可扩展中被调用。对应的反射 API 方法为Reflect.isExtensible()

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

拦截操作

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

参数

  • target:目标对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 isExtensible(target) { 
 console.log('isExtensible()');
 return Reflect.isExtensible(...arguments) 
 } 
}); 
Object.isExtensible(proxy); 
// isExtensible()
复制代码

preventExtensions

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

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

拦截操作

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

参数

  • target:目标对象。
const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
 preventExtensions(target) { 
 console.log('preventExtensions()'); 
 return Reflect.preventExtensions(...arguments) 
 } 
}); 
Object.preventExtensions(proxy); 
// preventExtensions()
复制代码

apply

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

拦截操作

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

参数

  • target:目标对象。
  • thisArg:调用函数时的 this 参数。
  • argumentsList:调用函数时的参数列表
const myTarget = () => {}; 
const proxy = new Proxy(myTarget, { 
 apply(target, thisArg, ...argumentsList) { 
 console.log('apply()'); 
 return Reflect.apply(...arguments) 
 } 
}); 
proxy(); 
// apply()
复制代码

construct

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

construct()必须返回一个对象

拦截操作

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

参数

  • target:目标构造函数。
  • argumentsList:传给目标构造函数的参数列表。
  • newTarget:最初被调用的构造函数。
const myTarget = function() {}; 
const proxy = new Proxy(myTarget, { 
 construct(target, argumentsList, newTarget) { 
 console.log('construct()'); 
 return Reflect.construct(...arguments) 
 } 
}); 
new proxy; 
// construct()
复制代码
分类:
前端
标签:
分类:
前端
标签: