读书笔记（三十二）：代理与反射

黑莲烈焰使

已于 2024-03-03 13:11:10 修改

阅读量347

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2022-10-17 10:34:50 首次发布

本文链接：https://blog.youkuaiyun.com/FantasyBreaker/article/details/127319700

本文介绍了JavaScript中的代理（Proxy）机制，它允许拦截并修改底层对象的操作。通过示例展示了如何使用Proxy创建代理对象，并覆写默认行为，如在设置属性时进行数值检查。此外，还探讨了可撤销代理（revocable proxy），如何创建以及在撤销后代理对象将无法使用的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代理陷阱
代理（Proxy）是一种可以拦截并改变底层js引擎操作的包装器。这些底层操作被拦截后会触发相应特定操作的陷阱函数。
调用new Proxy（）可创建代替其他目标对象的代理，对象中方法的默认特性与相同的底层操作一致，代理可以覆写这些操作，每个代理陷阱都对应一个命名和参数都相同的Reflect（反射）方法。如：

let target = {}
let proxy = new Proxy(target, {});

proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"

target.name = "target";
console.log(proxy.name); // "target"
console.log(target.name); // "target"

以set方法为例：

let target = {
	name: "target"
};

let proxy = new Proxy(target, {
	set(trapTarget, key, value, receiver) {
		if (!trapTarget.hasOwnProperty(key)) {
			if (isNaN(value)) {
				throw new TypeError("属性必须是数字");
			}
		}
		return Reflect.set(trapTarget, key, value, receiver);
	}
});
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"

// 不存在的属性赋值会抛出错误
proxy.anotherName = "proxy";

2.可撤销代理
使用Proxy.revocable()创建可撤销代理，返回可被撤销代理对象及撤销代理要调用的函数。如：

let target = {
	name: "target"
}
let {proxy, revoke} = Proxy.revocable(target, {});
console.log(proxy.name); // "target"
revoke();
console.log(proxy.name); // 抛出错误