JavaScript高级教程-代理与反射

已于 2022-07-21 16:44:22 修改
阅读量1.2k 收藏 4
点赞数 2
分类专栏： JavaScript 笔记 文章标签： javascript
于 2022-07-04 18:38:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36973122/article/details/125600793
版权

代理与反射

一、代理基础

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 操作符 
// TypeError: Function has non-object prototype 'undefined' in instanceof check
console.log(target instanceof Proxy);
// TypeError: Function has non-object prototype 'undefined' in instanceof check     
console.log(proxy instanceof Proxy);       

// 严格相等可以用来区分代理和目标
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()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

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

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

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 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。

const target = { foo: 'bar' };
const handler = {
     get() { return Reflect.get(...arguments); }  // 更简洁的写法get: >Reflect.get
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo);         // bar
console.log(target.foo);        // bar

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

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

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

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

4. 捕获器不变式

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

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

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

(1)反射 API 与对象 API

在使用反射 API 时，要记住：
(1) 反射 API 并不限于捕获处理程序；
(2) 大多数反射 API 方法在 Object 类型上有对应的方法。
通常， Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。

(2)状态标记

很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。有时候，状态标记比那些返回修改后的对象或者抛出错误（取决于方法）的反射 API 方法更有用。例如，可以使用反射API 对下面的代码进行重构：

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

在定义新属性时如果发生问题， Reflect.defineProperty()会返回 false，而不是抛出错误。因此使用这个反射方法可以这样重构上面的代码：

// 重构后的代码
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()

(3)用一等函数替代操作符

以下反射方法提供只有通过操作符才能完成的操作。
Reflect.get()：可以替代对象属性访问操作符。
Reflect.set()：可以替代=赋值操作符。
Reflect.has()：可以替代 in 操作符或 with()。
Reflect.deleteProperty()：可以替代 delete 操作符。
Reflect.construct()：可以替代 new 操作符。

(4)安全地应用函数

在通过 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. 代理的问题与不足

(1) 代理中的 this

代理潜在的一个问题来源是 this 值。我们知道，方法中的 this 通常指向调用这个方法的对象：

const target = {
     thisValEqualsProxy() {
           return this === proxy;
     }
}
const proxy = new Proxy(target, {});
console.log(target.thisValEqualsProxy());       // false
console.log(proxy.thisValEqualsProxy());        // true

从直觉上讲，上面这样完全没有问题：调用代理上的任何方法，比如proxy.outerMethod()，而这个方法进而又会调用另一个方法，如this.innerMethod()，实际上都会调用 proxy.innerMethod()。多数情况下，这是符合预期的行为。可是，如果目标对象依赖于对象标识，那就可能碰到意料之外的问题。通过 WeakMap 保存私有变量，以下是它的简化版：

const wm = new WeakMap();
class User {
     constructor(userId) {
           wm.set(this, userId);
     }
     set id(userId) {
           wm.set(this, userId);
     }
     get id() {
           return wm.get(this);
     }
}

由于这个实现依赖 User 实例的对象标识，在这个实例被代理的情况下就会出问题：

const user = new User(123);
console.log(user.id);          // 123
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id);         // undefined

这是因为 User 实例一开始使用目标对象作为 WeakMap 的键，代理对象却尝试从自身取得这个实例。要解决这个问题，就需要重新配置代理，把代理 User 实例改为代理 User 类本身。之后再创建代理的实例就会以代理实例作为 WeakMap 的键了：

const UserClassProxy = new Proxy(User, {});
const proxyUser = new UserClassProxy(456);
console.log(proxyUser.id);

(2) 代理与内部槽位

代理与内置引用类型（比如 Array）的实例通常可以很好地协同，但有些ECMAScript 内置类型可能会依赖代理无法控制的机制，结果导致在代理上调用某些方法会出错。
一个典型的例子就是 Date 类型。根据 ECMAScript 规范， Date 类型方法的执行依赖 this 值上的内部槽位[[NumberDate]]。代理对象上不存在这个内部槽位，而且这个内部槽位的值也不能通过普通的 get()和 set()操作访问到，于是代理拦截后本应转发给目标对象的方法会抛出 TypeError：

const target = new Date();
const proxy = new Proxy(target, {});
console.log(proxy instanceof Date);         // true
proxy.getDate();             // TypeError: 'this' is not a Date object

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

代理可以捕获 13 种不同的基本操作。这些操作有各自不同的反射 API 方法、参数、关联 ECMAScript操作和不变式。
正如前面示例所展示的，有几种不同的 JavaScript 操作会调用同一个捕获器处理程序。不过，对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。

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()
  1. 返回值
    返回值无限制。
  2. 拦截的操作
    proxy.property
    proxy[property]
    Object.create(proxy)[property]
    Reflect.get(proxy, property, receiver)
  3. 捕获器处理程序参数
    target：目标对象。
    property：引用的目标对象上的字符串键属性。①
    receiver：代理对象或继承代理对象的对象。
  4. 捕获器不变式
    如果 target.property 不可写且不可配置，则处理程序返回的值必须与 target.property 匹配。
    如果 target.property 不可配置且[[Get]]特性为 undefined，处理程序的返回值也必须是 undefined。

2. set()

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

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
	set(target, property, value, receiver) { 
		console.log('set()'); 
		return Reflect.set(...arguments) 
	} 
}); 
proxy.foo = 'bar'; 
// set()
  1. 返回值
    返回 true 表示成功；返回 false 表示失败，严格模式下会抛出 TypeError。
  2. 拦截的操作
    proxy.property = value
    proxy[property] = value
    Object.create(proxy)[property] = value
    Reflect.set(proxy, property, value, receiver)
  3. 捕获器处理程序参数
    target：目标对象。
    property：引用的目标对象上的字符串键属性。
    value：要赋给属性的值。
    receiver：接收最初赋值的对象。
  4. 捕获器不变式
    如果 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()
  1. 返回值
    has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    property in proxy
    property in Object.create(proxy)
    with(proxy) {(property);}
    Reflect.has(proxy, property)
  3. 捕获器处理程序参数
    target：目标对象。
    property：引用的目标对象上的字符串键属性。
  4. 捕获器不变式
    如果 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()
  1. 返回值
    defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    Object.defineProperty(proxy, property, descriptor)
    Reflect.defineProperty(proxy, property, descriptor)
  3. 捕获器处理程序参数
    target：目标对象。
    property：引用的目标对象上的字符串键属性。
    descriptor：包含可选的 enumerable、configurable、writable、value、get 和 set 定义的对象。
  4. 捕获器不变式
    如果目标对象不可扩展，则无法定义属性。
    如果目标对象有一个可配置的属性，则不能添加同名的不可配置属性。
    如果目标对象有一个不可配置的属性，则不能添加同名的可配置属性。

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

6. deleteProperty()

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

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
	deleteProperty(target, property) { 
		console.log('deleteProperty()'); 
		return Reflect.deleteProperty(...arguments) 
	} 
}); 
delete proxy.foo 
// deleteProperty()
  1. 返回值
    deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    delete proxy.property
    delete proxy[property]
    Reflect.deleteProperty(proxy, property)
  3. 捕获器处理程序参数
    target：目标对象。
    property：引用的目标对象上的字符串键属性。
  4. 捕获器不变式
    如果自有的 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()
  1. 返回值
    ownKeys()必须返回包含字符串或符号的可枚举对象。
  2. 拦截的操作
    Object.getOwnPropertyNames(proxy)
    Object.getOwnPropertySymbols(proxy)
    Object.keys(proxy)
    Reflect.ownKeys(proxy)
  3. 捕获器处理程序参数
    target：目标对象。
  4. 捕获器不变式
    返回的可枚举对象必须包含 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()
  1. 返回值
    getPrototypeOf()必须返回对象或 null。
  2. 拦截的操作
    Object.getPrototypeOf(proxy)
    Reflect.getPrototypeOf(proxy)
    proxy.proto
    Object.prototype.isPrototypeOf(proxy)
    proxy instanceof Object
  3. 捕获器处理程序参数
    target：目标对象。
  4. 捕获器不变式
    如果 target 不可扩展，则 Object.getPrototypeOf(proxy)唯一有效的返回值就是 Object. getPrototypeOf(target)的返回值。

9. setPrototypeOf()

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

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
	setPrototypeOf(target, prototype) { 
		console.log('setPrototypeOf()'); 
		return Reflect.setPrototypeOf(...arguments) 
	} 
}); 
Object.setPrototypeOf(proxy, Object); 
// setPrototypeOf()
  1. 返回值
    setPrototypeOf()必须返回布尔值，表示原型赋值是否成功。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    Object.setPrototypeOf(proxy)
    Reflect.setPrototypeOf(proxy)
  3. 捕获器处理程序参数
    target：目标对象。
    prototype：target 的替代原型，如果是顶级原型则为 null。
  4. 捕获器不变式
    如果 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()
  1. 返回值
    isExtensible()必须返回布尔值，表示 target 是否可扩展。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    Object.isExtensible(proxy)
    Reflect.isExtensible(proxy)
  3. 捕获器处理程序参数
    target：目标对象。
  4. 捕获器不变式
    如果 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()
  1. 返回值
    preventExtensions()必须返回布尔值，表示 target 是否已经不可扩展。返回非布尔值会被转型为布尔值。
  2. 拦截的操作
    Object.preventExtensions(proxy)
    Reflect.preventExtensions(proxy)
  3. 捕获器处理程序参数
    target：目标对象。
  4. 捕获器不变式
    如果 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()
  1. 返回值
    返回值无限制。
  2. 拦截的操作
    proxy(…argumentsList)
    Function.prototype.apply(thisArg, argumentsList)
    Function.prototype.call(thisArg, …argumentsList)
    Reflect.apply(target, thisArgument, argumentsList)
  3. 捕获器处理程序参数
    target：目标对象。
    thisArg：调用函数时的 this 参数。
    argumentsList：调用函数时的参数列表
  4. 捕获器不变式
    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()
  1. 返回值
    construct()必须返回一个对象。
  2. 拦截的操作
    new proxy(…argumentsList)
    Reflect.construct(target, argumentsList, newTarget)
  3. 捕获器处理程序参数
    target：目标构造函数。
    argumentsList：传给目标构造函数的参数列表。
    newTarget：最初被调用的构造函数。
  4. 捕获器不变式
    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. 属性验证

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

function median(...nums) { 
     return nums.sort()[Math.floor(nums.length / 2)]; 
} 
const proxy = new Proxy(median, { 
     apply(target, thisArg, argumentsList) { 
           for (const arg of argumentsList) { 
                 if (typeof arg !== 'number') { 
                       throw 'Non-number argument provided'; 
                 } 
           } 
           return Reflect.apply(...arguments); 
      } 
}); 
console.log(proxy(4, 7, 1));    // 4 
console.log(proxy(4, '7', 1)); 
// Error: Non-number argument provided

类似地，可以要求实例化时必须给构造函数传参：

class User { 
     constructor(id) { 
           this.id_ = id; 
     } 
} 
const proxy = new Proxy(User, { 
     construct(target, argumentsList, newTarget) { 
           if (argumentsList[0] === undefined) { 
                 throw 'User cannot be instantiated without id'; 
           } else { 
                 return Reflect.construct(...arguments); 
           } 
      } 
}); 
new proxy(1); 
new proxy(); 
// Error: User cannot be instantiated without id

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

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

function median(...nums) { 
     return nums.sort()[Math.floor(nums.length / 2)]; 
} 
const proxy = new Proxy(median, { 
     apply(target, thisArg, argumentsList) { 
           for (const arg of argumentsList) { 
                 if (typeof arg !== 'number') { 
                       throw 'Non-number argument provided'; 
                 } 
           } 
           return Reflect.apply(...arguments); 
      } 
}); 
console.log(proxy(4, 7, 1));    // 4 
console.log(proxy(4, '7', 1)); 
// Error: Non-number argument provided

类似地，可以要求实例化时必须给构造函数传参：

class User { 
     constructor(id) { 
           this.id_ = id; 
     } 
} 
const proxy = new Proxy(User, { 
     construct(target, argumentsList, newTarget) { 
           if (argumentsList[0] === undefined) { 
                 throw 'User cannot be instantiated without id'; 
           } else { 
                 return Reflect.construct(...arguments); 
           } 
      } 
}); 
new proxy(1); 
new proxy(); 
// Error: User cannot be instantiated without id

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

通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中：

const userList = []; 
class User { 
     constructor(name) { 
           this.name_ = name; 
     } 
} 
const proxy = new Proxy(User, { 
     construct() { 
           const newUser = Reflect.construct(...arguments); 
           userList.push(newUser); 
           return newUser; 
     } 
}); 
new proxy('John'); 
new proxy('Jacob'); 
new proxy('Jingleheimerschmidt'); 
console.log(userList);       // [User {}, User {}, User{}]

另外，还可以把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息：

const userList = []; 
function emit(newValue) { 
     console.log(newValue); 
} 
const proxy = new Proxy(userList, { 
     set(target, property, value, receiver) { 
           const result = Reflect.set(...arguments); 
           if (result) { 
                 emit(Reflect.get(target, property, receiver)); 
           } 
           return result; 
      } 
}); 
proxy.push('John'); 
// John 
proxy.push('Jacob'); 
// Jacob
小郑爱睡觉
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级教程-引用类型.pptx
07-29
基本类型和引用类型 JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！ 约定：基本数据类型与原始数据类型等意。 基本数据类型的值是按值访问的。
Javascript中的代理和反射
zhoukaibai的博客
05-24 276
JavaScript中的代理和反射是ES6引入的两个新概念，用于操作对象和属性。代理使得我们可以拦截对象的操作并进行自定义处理，而反射则提供了一组操作对象和属性的方法，以便于我们更方便地操作对象。
精读JavaScript中的代理（Proxy）与反射（Reflect）
02-01 1349
JavaScript中的Proxy与Reflect是ES6中引入的新特性，它们可以帮助我们更高效地操作对象。 代理（Proxy）是一种设计模式，它允许我们在访问对象的同时，添加一些额外的操作。代理对象与被代理对象实现相同的接口，代理对象会接受并处理所有对被代理对象的访问请求。 反射（Reflection）是指程序可以在运行时获取、操作、修改它本身的状态或行为。反射是一种动态获取类型信息和操作类型的能力，可以在运行时动态调用类中的方法或属性。
如何判断元素是被proxy代理过的呢？
程序媛的梦工厂
03-14 4186
案例： let arr = []; let proxyer = new Proxy(arr, {}); console.log(proxyer instanceof Proxy); // 报错：Uncaught TypeError: Function has non-object prototype 'undefined' in instanceof check console.log(proxyer instanceof Array); // true console.log(proxyer.__prot
在javascript中，instanceof实现原理
我的博客简介
08-26 516
【代码】instanceof实现原理。
JavaScript 反射机制及 Reflect 详解
油墨香^-^的博客
03-08 863
反射机制是在编译阶段不知道是哪个类被加载，而是在运行的时候才加载、执行。也就是说，反射机制指的是程序在运行时能够获取自身的信息。js 中的 apply 就是反射机制。
藏经阁-现代Javascript高级教程-223.pdf
最新发布
01-09
藏经阁-现代Javascript高级教程-223
JavaScript高级基础-2
12-20
JavaScript高级基础-2 3.BOM操作 4.正则表达式 5.ES6
JavaScript教程--从入门到精通
12-10
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言，正日益受到全球的关注。因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，而因...
javascript高级教程.pdf
05-26
javascript高级教程
JavaScript - 代理与反射（代理基础）
每天进步一点点
01-16 766
使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。注意：捕获器（trap）是从操作系统中借用的概念。在操作系统中，捕获器是程序流中的一个同步中断，可以暂停程序流，转而执行一段子例程，之后再返回原始程序流。
【红宝书笔记精简版】第九章 代理与反射
weixin_41950078的博客
12-06 1090
目录 9.1 代理与反射 9.1.1 创建空代理 9.1.2 定义捕获器 9.1.3 捕获器参数和反射 API 9.1.4 捕获器不变式 9.1.5 可撤销代理 9.1.6 实用反射 API 9.1.7 代理另一个代理 9.1.8 代理的问题与不足 9.2 代理捕获器与反射方法 9.3 代理模式 9.3.1 跟踪属性访问 9.3.2 隐藏属性 9.3.3 属性验证 9.3.4 函数与构造函数参数验证 9.3.5 数据绑定与可观察对象 9.4 小结 9.1 代理与反射
JavaScript 中Proxy（代理）和Reflect（反射）基础知识
zhtbs的博客
03-31 1120
最近在Vue3项目开发中，我们经常使用与Proxy和Reflect相关的函数。这些函数以各种形式出现在Vue3 Reactivity函数、各种库和框架中。然而，对于JavaScript Proxy的概念和使用方法，许多人可能不太熟悉。因此，下面我将通过一个例子来更好地解释Proxy和Reflect的使用方法。Reflect和Proxy是EC6引入的两个新功能，可以帮助开发人员更轻松地操作和控制对象。
JavaScript教程（高级）
m0_56752010的博客
05-28 2191
函数声明方式function关键字（命名函数）；函数表达式（匿名函数）；（此处的Function()是一个构造函数）；var fn= new Function('参数1','参数2',...,'函数体');Function里面参数都必须是字符串格式；第三种方式执行效率低，也不方便书写因此较少使用；所有函数都是Function的实例（对象）；函数也属于对象；< script > // 函数的定义方式 // 1、自定义函数（命名函数）；} // 2、函数表达式（匿名函数）；
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 6万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
详解 JS 中的 Proxy(代理)和 Reflect(反射)
Web_boom的博客
12-12 1429
使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如，get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。};
javascript高级程序阅读收获（9.1.1）——创建空代理
木子 旭的博客
07-28 579
const target = { id: 'target' } const handler ={} const proxy = new Proxy(target, handler); console.log(target.id);//target console.log(proxy.id);//target id属性会访问同一个值 target.id = "foo"; console.log(target.id);//foo console.log(proxy.id);//foo 给目标属性
JavaScript高级教程
weixin_50939386的博客
04-21 1606
JavaScript高级教程 箭头函数 箭头函数是匿名函数，一般做为参数传递 //以前的函数格式 let test = function (a,b){ let sum = a + b return sum } // 简写成以下格式 let test = (参数) => {函数体} 可以简记成把function变成了符号=>,然后位置放在了参数的右边 注意点： 如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return 如
【Java】反射机制和代理机制
kazuhura的博客
03-05 1231
在 Java 动态代理机制中接口和Proxy类是核心Proxy，这个方法主要用来生成一个代理对象loader :类加载器，用于加载代理对象。interfaces : 被代理类实现的一些接口；h : 实现了接口的对象；要实现动态代理的话，还必须需要实现来自定义处理逻辑。当我们的动态代理对象调用一个方法时，这个方法的调用就会被转发到实现接口类的invoke方法来调用/*** 当你使用代理对象调用方法的时候实际会调用到这个方法要实现动态代理的话，还必须需要实现来自定义处理逻辑。
javaScript蓝桥杯----外卖给好评
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值