【JS】Proxy（代理）与Reflect（反射）

海绵宝宝yu派大星

已于 2022-08-17 15:49:31 修改

阅读量302

点赞数

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

于 2022-07-18 12:20:18 首次发布

本文链接：https://blog.csdn.net/qq_41298192/article/details/125846377

版权

javaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Proxy（代理）

给目标属性赋值会反映在两个对象上
给代理属性赋值会反映在两个对象上
hasOwnProperty()方法只会应用到目标对象
Proxy.prototype 是 undefined
严格相等可以用来区分代理和目标
可以实现多层代理

const target = {
	id: 'target'
};2
const handler = {};3
const proxy = new Proxy(target, handler);
// id 属性会访问同一个值
console.log(target.id);
console.log(proxy.id);

// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
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
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype

// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

定义捕获器（trap)

只有在代理对象上执行这些操作才会触发捕获器
如果想使用原来的效果，可以手写逻辑，但并非所有都像 get()那么简单。因此，通过手动写码如法炮制的想法是不现实的，所以可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。
所有可捕获的方法，Reflect都有相对应的同名方法

const target = {
	foo: 'bar'
};
const handler = {
	get() {
		return Reflect.get(...arguments);
	}
};
//空代理对象可以简化
const handler = {
	get: Reflect.get
};
const proxy = new Proxy(target, handler);

捕获器不变式

防止捕获器定义出现过于反常的行为

比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的
值时，会抛出 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

可撤销代理

使用 new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在
revocable()方法，支持撤销代理对象与目标对象的关联
撤销代理的操作是不可逆的
撤销代理之后再调用代理会抛出 TypeError
撤销函数和代理对象是在实例化时同时生成的（代替new Proxy）

	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

代理的问题与不足

代理中的 this

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);
	}
}
const user = new User(123);
console.log(user.id); // 123
const userInstanceProxy = new Proxy(user, {});
console.log(userInstanceProxy.id); // undefined

undefined 是因为User 实例一开始使用目标对象作为 WeakMap 的键，代理对象想要从从this（指向代理对象，和map里是不同的）取得这个实例，固然取不到。

解决：把代理 User 实例改为代理 User 类

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

代理与内部槽位

代理与内置引用类型（比如 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

Reflect（反射）

Reflect API 并不限于用于捕获器；
避免直接操作 Object，起到代替作用，并修改了返回结果

使用状态替代之前返回结果

Reflect修改了某些 Object 方法的不合理的返回结果
- 让 Object 操作都变成函数行为
- 使用布尔值（状态）来代替 Object 的一些不合理的返回值（比如返回修改后的对象或者抛出错误）
以下反射方法都会返回状态：
- Reflect.defineProperty()
- Reflect.preventExtensions()
- Reflect.setPrototypeOf()
- Reflect.set()
- Reflect.deleteProperty()

// 如果发生问题，会抛出错误
const o = {};
try {
	Object.defineProperty(o, 'foo', 'bar');
	console.log('success');
} catch(e) {
	console.log('failure');
}
//使用Reflect，出错则会返回状态false
const o = {};
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) {
	console.log('success');
} else {
	console.log('failure');
}

替代一元表达式

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

Proxy捕获器与Reflect方法

get(target，property，receiver)

get()捕获器会在获取属性值的操作中被调用。对应的反射 API 方法为 Reflect.get()。
返回值无限制。
拦截的操作：
- proxy.property
- proxy[property]
- Object.create(proxy)[property]
- Reflect.get(proxy, property, receiver)
参数：
- target：目标对象
- property：目标对象上的字符串键属性，也可能是符号（symbol）键
- receiver：代理对象或继承代理对象的对象
捕获器不变式
- 如果 target.property 不可写且不可配置，则处理程序返回的值必须与 target.property 匹配。
- 如果 target.property 不可配置且[[Get]]特性为 undefined，处理程序的返回值也必须是 undefined。

set(target，property，value，receiver)

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：目标对象上的字符串键属性，也可能是符号（symbol）键
- value：要赋给属性的值。
- receiver：代理对象或继承代理对象的对象
捕获器不变式
- 如果 target.property 不可写且不可配置，则不能修改目标属性的值。
- 如果 target.property 不可配置且[[Set]]特性为 undefined，则不能修改目标属性的值。
  在严格模式下，处理程序中返回 false 会抛出 TypeError。

has(target，property)

has()捕获器会在 in 操作符中被调用。对应的反射 API 方法为 Reflect.has()。
has()必须返回布尔值，表示属性是否存在。返回非布尔值会被转型为布尔值。
拦截的操作:
- property in proxy
- property in Object.create(proxy)
- with(proxy) {(property);}
- Reflect.has(proxy, property)
捕获器不变式
- 如果 target.property 存在且不可配置，则处理程序必须返回 true。
- 如果 target.property 存在且目标对象不可扩展，则处理程序必须返回 true。

defineProperty(target，property，descriptor)

defineProperty()捕获器会在 Object.defineProperty()中被调用。对应的反射 API 方法为
Reflect.defineProperty()
defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布尔值会被转型为布尔值。
参数：
- descriptor：描述对象，enumerable、configurable、writable、value、get 和 set
捕获器不变式：
- 如果目标对象不可扩展，则无法定义属性。
- 不能添加同名的属性

getOwnPropertyDescriptor(target，property)

getOwnPropertyDescriptor() 捕获器会在 Object.getOwnPropertyDescriptor() 中被调
用。对应的反射 API 方法为 Reflect.getOwnPropertyDescriptor()。
getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回 undefined。
捕获器不变式
- 如果自有的 target.property 存在且不可配置，则处理程序必须返回一个表示该属性存在的对象。
- 如果自有的 target.property 存在，必须返回表示该属性可配置的对象。
- 如果 target.property 不存在且 target 不可扩展，则处理程序必须返回 undefined 表示该属性不存在。
- 如果 target.property 不存在，则处理程序不能返回表示该属性可配置的对象。

deleteProperty(target，property)

deleteProperty() 捕获器会在 delete 操作符中被调用。对应的反射 API 方法为 Reflect.
deleteProperty()。
deleteProperty()必须返回布尔值，表示删除属性是否成功。返回非布尔值会被转型为布尔值。
拦截的操作
- delete proxy.property
- delete proxy[property]
- Reflect.deleteProperty(proxy, property)
捕获器不变式
+如果自有的 target.property 存在且不可配置，则处理程序不能删除这个属性。

ownKeys(target)

ownKeys()捕获器会在 Object.keys()及类似方法中被调用。对应的反射 API 方法为Reflect.ownKeys()。
ownKeys()必须返回包含字符串或Symbol的可枚举对象。
拦截的操作
- Object.getOwnPropertyNames(proxy)
- Object.getOwnPropertySymbols(proxy)
- Object.keys(proxy)
- Reflect.ownKeys(proxy)
捕获器不变式
- 返回的可枚举对象必须包含 target 的所有不可配置的自有属性。
- 如果 target 不可扩展，则返回可枚举对象必须准确地包含自有属性键。

getPrototypeOf(target)

getPrototypeOf()捕获器会在 Object.getPrototypeOf()中被调用。对应的反射 API 方法为Reflect.getPrototypeOf()。
getPrototypeOf()必须返回对象或 null。
拦截的操作
- Object.getPrototypeOf(proxy)
- Reflect.getPrototypeOf(proxy)
- proxy.proto
- Object.prototype.isPrototypeOf(proxy)
- proxy instanceof Object
捕获器不变式
- 如果 target 不可扩展，则 Object.getPrototypeOf(proxy)唯一有效的返回值就是Object.getPrototypeOf(target)的返回值。

setPrototypeOf(target，prototype)

setPrototypeOf()捕获器会在 Object.setPrototypeOf()中被调用。对应的反射 API 方法为
Reflect.setPrototypeOf()。
setPrototypeOf()必须返回布尔值，表示原型赋值是否成功。返回非布尔值会被转型为布尔值。
拦截的操作
- Object.setPrototypeOf(proxy)
- Reflect.setPrototypeOf(proxy)
捕获器不变式
- 如果 target 不可扩展，则唯一有效的 prototype 参数就是Object.getPrototypeOf(target)的返回值。

isExtensible(target)

isExtensible() 捕获器会在 Object.isExtensible() 中被调用。对应的反射 API 方法为Reflect.isExtensible()。
isExtensible()必须返回布尔值，表示 target 是否可扩展。返回非布尔值会被转型为布尔值。
捕获器不变式
- 如果 target 可扩展，则处理程序必须返回 true。
- 如果 target 不可扩展，则处理程序必须返回 false。

preventExtensions(target)

preventExtensions()捕获器会在 Object.preventExtensions()中被调用。对应的反射 API方法为 Reflect.preventExtensions()。
preventExtensions()必须返回布尔值，表示 target 是否已经不可扩展。返回非布尔值会被转型为布尔值。
捕获器不变式
- 如果 Object.isExtensible(proxy)是 false，则处理程序必须返回 true。

apply(target，thisArg，argumentsList)

apply()捕获器会在调用函数时中被调用。对应的反射 API 方法为 Reflect.apply()。
拦截的操作
- proxy(…argumentsList)
- Function.prototype.apply(thisArg, argumentsList)
- Function.prototype.call(thisArg, …argumentsList)
- Reflect.apply(target, thisArgument, argumentsList)
捕获器不变式
- target 必须是一个函数对象。

construct(target，argumentsList，newTarget)

apply()捕获器会在调用函数时中被调用。对应的反射 API 方法为 Reflect.apply()。
construct()必须返回一个对象。
参数：
- argumentsList：传给目标构造函数的参数列表。
- newTarget：最初被调用的构造函数。
拦截的操作
- new proxy(…argumentsList)
- Reflect.construct(target, argumentsList, newTarget)
捕获器不变式
- target 必须可以用作构造函数。

海绵宝宝yu派大星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS】Proxy（代理）与Reflect（反射）

只有在代理对象上执行这些操作才会触发捕获器如果想使用原来的效果，可以手写逻辑，但并非所有都像 get()那么简单。因此，通过手动写码如法炮制的想法是不现实的，所以可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。所有可捕获的方法，Reflect都有相对应的同名方法get() {} };//空代理对象可以简化 const handler = {...
复制链接

扫一扫