iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

JavaScript 忍者的修練--從下忍進階到中忍系列 第 20

Day 20: proxy

proxy也是 ES6 新加入的標準,中文直譯「代理」。前面我們用到gettersetter,但它們只能控制單一屬性,而 proxy比起它們更加強大,能全面的控制與目標物件的互動,甚至是呼叫物件方法。

const target = {
	a: 1,
	b: 2,
	c: 3
};

const proxy = new Proxy(target, {
	get: (target, name) => {
		return name in target ? target[name] : 42;
	}
});

console.log(proxy.a); // 1
console.log(proxy.b); // 2
console.log(proxy.c); // 3
console.log(proxy.something); // 42

呼叫 proxy 要使用new Proxy製作出新的 proxy 物件,第一個參數是它要代理的對象,第二個參數是一個物件,裡面可以設定各種 proxy 的監聽器,並設定在發生時所要執行的方法。

在這裡我們有個基本物件target,為它設了一個 proxy,它監聽的是取值的get行為,當透過 proxy 取值時,proxy 會在 target 裡尋找 key 值名稱,如果有找到就回傳它的值,如果沒有找到,就回傳 42。


上一篇
Day 19: getter & setter
下一篇
Day 21: 陣列
系列文
JavaScript 忍者的修練--從下忍進階到中忍30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言