第 9 章代理与反射

✎printf("YT");

已于 2023-05-07 10:24:56 修改

阅读量92

点赞数

分类专栏： JavaScript 文章标签：前端开发语言 javascript es6 html

于 2023-04-06 12:00:15 首次发布

本文链接：https://blog.csdn.net/qq_50564231/article/details/129966447

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

虽然之前在课堂上已经学过 JavaScript 的相关用法了，但是现在要开始找工作的时候才发现好多知识点都忘记了（正所谓基础不牢，地动山摇😂），而且有些知识点学校教材上都没有，便有了要写这个 JavaScript 学习系列文章的想法。

由于博主只是做知识点总结与学习笔记分享，导致本系列文章对于 JavaScript 的使用方面介绍较少，还望读者能够自己多勤学苦练。废话不多说，让我们开始第 9 章代理与反射 的学习吧。

一、代理基础

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

1.创建空代理

代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出 TypeError。要创建空代理，可以传一个简单的对象字面量作为处理程序对象，从而让所有操作畅通无阻地抵达目标对象。

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

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

2.定义捕获器

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

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

3.捕获器参数和反射 API

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

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。

4.捕获器不定式

根据 ECMAScript 规范，每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）。捕获器不变式因方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。

5.可撤销代理

有时候可能需要中断代理对象与目标对象之间的联系。对于使用 new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。

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

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

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

6.实用反射 API

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

反射 API 与对象 API
在使用反射 API 时，要记住：
(1) 反射 API 并不限于捕获处理程序；
(2) 大多数反射 API 方法在 Object 类型上有对应的方法。
通常，Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
状态标记
很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。有时候，状态标记比那些返回修改后的对象或者抛出错误（取决于方法）的反射 API 方法更有用。

以下反射方法都会提供状态标记：
- Reflect.defineProperty()
- Reflect.preventExtensions()
- Reflect.setPrototypeOf()
- Reflect.set()
- Reflect.deleteProperty()
用一等函数替代操作符
以下反射方法提供只有通过操作符才能完成的操作。
- Reflect.get()：可以替代对象属性访问操作符。
- Reflect.set()：可以替代=赋值操作符。
- Reflect.has()：可以替代 in 操作符或 with()。
- Reflect.deleteProperty()：可以替代 delete 操作符。
- Reflect.construct()：可以替代 new 操作符。
安全地应用函数
在通过 apply 方法调用函数时，被调用的函数可能也定义了自己的 apply 属性（虽然可能性极小）。为绕过这个问题，可以使用定义在 Function 原型上的 apply 方法，比如：
```
Function.prototype.apply.call(myFunc, thisVal, argumentList); 
```
这种可怕的代码完全可以使用 Reflect.apply 来避免：
```
Reflect.apply(myFunc, thisVal, argumentsList); 
```

7.代理另一个代理

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

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

8.代理的问题与不足

代理中的 this
代理与内部槽位

二、代理捕获器与反射方法

代理可以捕获 13 种不同的基本操作。这些操作有各自不同的反射 API 方法、参数、关联 ECMAScript 操作和不变式。

1.get()

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

const myTarget = {}; 

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

proxy.foo; 
// get()

返回值
返回值无限制
拦截的操作
- proxy.property
- proxy[property]
- Object.create(proxy)[property]
- Reflect.get(proxy, property, receiver)
捕获器处理程序参数
- target：目标对象。
- property：引用的目标对象上的字符串键属性。
  严格来讲，property 参数除了字符串键，也可能是符号（symbol）键。后面几处也一样。
- receiver：代理对象或继承代理对象的对象。
捕获器不变式
如果 target.property 不可写且不可配置，则处理程序返回的值必须与 target.property 匹配。

如果 target.property 不可配置且[[Get]]特性为 undefined，处理程序的返回值也必须是 undefined。

2.set()

set()捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.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：接收最初赋值的对象。
捕获器不变式
如果 target.property 不可写且不可配置，则不能修改目标属性的值。

如果 target.property 不可配置且[[Set]]特性为 undefined，则不能修改目标属性的值。在严格模式下，处理程序中返回 false 会抛出 TypeError。

3.has()

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

const myTarget = {}; 

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

'foo' in proxy; 
// has()

返回值
has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。
拦截的操作
- property in proxy
- property in Object.create(proxy)
- with(proxy) {(property);}
- Reflect.has(proxy, property)
捕获器处理程序参数
- target：目标对象。
- property：引用的目标对象上的字符串键属性。
捕获器不变式
如果 target.property 存在且不可配置，则处理程序必须返回 true。

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

4.defineProperty()

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

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()

返回值
defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布尔值会被转型为布尔值。
拦截的操作
- Object.defineProperty(proxy, property, descriptor)
- Reflect.defineProperty(proxy, property, descriptor)
捕获器处理程序参数
- target：目标对象。
- property：引用的目标对象上的字符串键属性。
- descriptor：包含可选的 enumerable、configurable、writable、value、get 和 set定义的对象。
捕获器不变式
如果目标对象不可扩展，则无法定义属性。

如果目标对象有一个可配置的属性，则不能添加同名的不可配置属性。

如果目标对象有一个不可配置的属性，则不能添加同名的可配置属性。

5.getOwnPropertyDescriptor()

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

const myTarget = {}; 

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

Object.getOwnPropertyDescriptor(proxy, 'foo'); 
// getOwnPropertyDescriptor()

返回值
getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回 undefined。
拦截的操作
- Object.getOwnPropertyDescriptor(proxy, property)
- Reflect.getOwnPropertyDescriptor(proxy, property)
捕获器处理程序参数
- target：目标对象。
- property：引用的目标对象上的字符串键属性。
捕获器不变式
如果自有的 target.property 存在且不可配置，则处理程序必须返回一个表示该属性存在的对象。

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

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

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

如果 target.property 不存在，则处理程序不能返回表示该属性可配置的对象。

6.deleteProperty()

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

返回值
deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。
拦截的操作
- delete proxy.property
- delete proxy[property]
- Reflect.deleteProperty(proxy, property)
捕获器处理程序参数
- target：目标对象。
- property：引用的目标对象上的字符串键属性。
捕获器不变式
如果自有的 target.property 存在且不可配置，则处理程序不能删除这个属性。

7.ownKeys()

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

const myTarget = {}; 

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

Object.keys(proxy); 
// ownKeys()

返回值
ownKeys()必须返回包含字符串或符号的可枚举对象。
拦截的操作
- Object.getOwnPropertyNames(proxy)
- Object.getOwnPropertySymbols(proxy)
- Object.keys(proxy)
- Reflect.ownKeys(proxy)
捕获器处理程序参数
- target：目标对象。
捕获器不变式
返回的可枚举对象必须包含 target 的所有不可配置的自有属性。

如果 target 不可扩展，则返回可枚举对象必须准确地包含自有属性键。

8.getPrototypeOf()

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

const myTarget = {}; 

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

Object.getPrototypeOf(proxy); 
// getPrototypeOf()

返回值
getPrototypeOf()必须返回对象或 null。
拦截的操作
- Object.getPrototypeOf(proxy)
- Reflect.getPrototypeOf(proxy)
- proxy.proto
- Object.prototype.isPrototypeOf(proxy)
- proxy instanceof Object
捕获器处理程序参数
- target：目标对象。
捕获器不变式
如果 target 不可扩展，则 Object.getPrototypeOf(proxy)唯一有效的返回值就是 Object. getPrototypeOf(target)的返回值。

9.setPrototypeOf()

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

返回值
setPrototypeOf()必须返回布尔值，表示原型赋值是否成功。返回非布尔值会被转型为布尔值。
拦截的操作
- Object.setPrototypeOf(proxy)
- Reflect.setPrototypeOf(proxy)
捕获器处理程序参数
- target：目标对象。
- prototype：target 的替代原型，如果是顶级原型则为 null。
捕获器不变式
如果 target 不可扩展，则唯一有效的 prototype 参数就是 Object.getPrototypeOf(target)的返回值。

10.isExtensible()

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

const myTarget = {}; 

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

Object.isExtensible(proxy); 
// isExtensible()

返回值
isExtensible()必须返回布尔值，表示 target 是否可扩展。返回非布尔值会被转型为布尔值。
拦截的操作
- Object.isExtensible(proxy)
- Reflect.isExtensible(proxy)
捕获器处理程序参数
- target：目标对象。
捕获器不变式
如果 target 可扩展，则处理程序必须返回 true。

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

11.preventExtensions()

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

const myTarget = {}; 

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

Object.preventExtensions(proxy); 
// preventExtensions()

返回值
preventExtensions()必须返回布尔值，表示 target 是否已经不可扩展。返回非布尔值会被转型为布尔值。
拦截的操作
- Object.preventExtensions(proxy)
- Reflect.preventExtensions(proxy)
捕获器处理程序参数
- target：目标对象。
捕获器不变式
如果 Object.isExtensible(proxy)是 false，则处理程序必须返回 true。

12.apply()

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

const myTarget = () => {}; 

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

返回值
返回值无限制。
拦截的操作
- proxy(…argumentsList)
- Function.prototype.apply(thisArg, argumentsList)
- Function.prototype.call(thisArg, …argumentsList)
- Reflect.apply(target, thisArgument, argumentsList)
捕获器处理程序参数
- target：目标对象。
- thisArg：调用函数时的 this 参数。
- argumentsList：调用函数时的参数列表
捕获器不变式
target 必须是一个函数对象。

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) 
  } 
}); 

new proxy; 
// construct()

返回值
construct()必须返回一个对象。
拦截的操作
- new proxy(…argumentsList)
- Reflect.construct(target, argumentsList, newTarget)
捕获器处理程序参数
- target：目标构造函数。
- argumentsList：传给目标构造函数的参数列表。
- newTarget：最初被调用的构造函数。
捕获器不变式
target 必须可以用作构造函数。

三、代理模式

使用代理可以在代码中实现一些有用的编程模式。

1.跟踪属性访问

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

const user = { 
 name: 'Jake' 
}; 

const proxy = new Proxy(user, { 
  get(target, property, receiver) { 
  console.log(`Getting ${property}`); 
  return Reflect.get(...arguments); 
  }, 
  set(target, property, value, receiver) { 
  console.log(`Setting ${property}=${value}`); 
  return Reflect.set(...arguments); 
  } 
}); 

proxy.name; // Getting name 
proxy.age = 27; // Setting age=27

2.隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。

const hiddenProperties = ['foo', 'bar']; 
const targetObject = { 
  foo: 1, 
  bar: 2, 
  baz: 3 
}; 
const proxy = new Proxy(targetObject, { 
  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); 
    } 
  } 
}); 

// get() 
console.log(proxy.foo); // undefined 
console.log(proxy.bar); // undefined 
console.log(proxy.baz); // 3 

// has() 
console.log('foo' in proxy); // false 
console.log('bar' in proxy); // false 
console.log('baz' in proxy); // true

3.属性验证

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

const target = { 
  onlyNumbersGoHere: 0 
}; 

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

proxy.onlyNumbersGoHere = 1; 
console.log(proxy.onlyNumbersGoHere); // 1 
proxy.onlyNumbersGoHere = '2'; 
console.log(proxy.onlyNumbersGoHere); // 1

4.函数与构造函数参数验证

跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。比如，可以让函数只接收某种类型的值。

5.数据绑定与可观察对象

通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。

比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中。

总结

代理是 ECMAScript 6 新增的令人兴奋和动态十足的新特性。尽管不支持向后兼容，但它开辟出了一片前所未有的 JavaScript 元编程及抽象的新天地。

从宏观上看，代理是真实 JavaScript 对象的透明抽象层。代理可以定义包含捕获器的处理程序对象，而这些捕获器可以拦截绝大部分 JavaScript 的基本操作和方法。在这个捕获器处理程序中，可以修改任何基本操作的行为，当然前提是遵从捕获器不变式。

与代理如影随形的反射 API，则封装了一整套与捕获器拦截的操作相对应的方法。可以把反射 API 看作一套基本操作，这些操作是绝大部分 JavaScript 对象 API 的基础。

代理的应用场景是不可限量的。开发者使用它可以创建出各种编码模式，比如（但远远不限于）跟踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定，以及可观察对象。

以上就是本篇文章的全部内容了，下一篇文章我们将学习“第 10 章函数”，如果想要第一时间获取相关文章，欢迎关注博主，并订阅专栏。您的支持与鼓励将成为我不断前行地动力！

最后，如果本篇文章对正在阅读的您有所帮助或启发，请不要吝啬您的点赞收藏评论及分享，这样就有可能帮助到更多的人了。同时也欢迎留下您遇到的问题，让我们一起探讨学习，共同进步！

✎printf("YT");

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第 9 章代理与反射

虽然之前在课堂上已经学过 JavaScript 的相关用法了，但是现在要开始找工作的时候才发现好多知识点都忘记了（正所谓基础不牢，地动山摇😂），而且有些知识点学校教材上都没有，便有了要写这个 JavaScript 学习系列文章的想法。由于博主只是做知识点总结与学习笔记分享，导致本系列文章对于 JavaScript 的使用方面介绍较少，还望读者能够自己多勤学苦练。废话不多说，让我们开始第 9 章代理与反射的学习吧。使用代理的主要目的是可以定义捕获器（trap）。
复制链接

扫一扫