Javascript的Proxy

發表於 2020-02-25 更新於 2024-04-15 分類於 javascript 閱讀次數： Disqus：

一般來說，程序猿、攻城獅在說的 Proxy 其實就是設計模式中的代理模式，說的文言一點就是指一個類別可以作為其它東西的介面；白話一點就是一個傳聲筒。

intro

好像是大話設計這本書吧，提到這個模式用的例子就是某 A 要追求某 B，但他又不好意思跟人家直接講，所以透過一個中間人 C，讓他幫自己去跟心儀的對象說話
姑且不論這個例子能否真的追求成功，這個比喻還是蠻形象的。

大概就是A --> C --> B這樣的概念

最基本的就是當 C 接收到了 A 的請求，他要可以轉達給 B；至於傳達的內容…當然就是由 C 來決定了，這只是一個概念，實際上這個例子有幾個重點

原本 A 可以直接與 B 溝通，但我們不想讓 B 知道，所以用 C 來代替
所以 B 不知道是誰跟他說的，只知道 C
B 所知道的資訊都是由 C 來的

突然又想到很像是武俠小說裏面的飛劍傳書，然後傳書的內容又偷偷被其他人改掉了這樣的狗血劇情….

proxy pattern UML

Sample

function Monster() {
	this.eyeCount = 4;
}

const handler1 = {
	set(obj, prop, value) {
		if (prop === "eyeCount" && value % 2 !== 0) {
			console.log("Monsters must have an even number of eyes");
		} else {
			return Reflect.set(...arguments);
		}
	},
};

const monster1 = new Monster();
const proxy1 = new Proxy(monster1, handler1);
proxy1.eyeCount = 1;
// expected output: "Monsters must have an even number of eyes"

console.log(proxy1.eyeCount);
// expected output: 4

參考資料

0%