Javascript Proxy對象 簡介
Javascript Proxy對象
改變你操作對象的方式
Proxies 是Javasript對象的中間件
...或者說至少是那種很早的版本。
ES6 中引入Proxies，讓你可以自定義Object的基本操作。例如，get就是Object的基礎操作方法。
const obj = {
val: 10
};
console.log(obj.val);
這里，console.log()表達式在對象obj上執行get方法來獲取val的值。
另一個對象的基本操作方法是 set。
const obj = {
val: 10
};
obj.val2 = 20;
這里，set方法用來給對象obj設置一個新的值。
如何創建Proxy?
const proxiedObject = new Proxy(initialObj, handler);
調用Proxy構造函數，new Proxy()將返回一個對象，不僅包含了initialObj里的值，而且其基本操作（如get 和 set）現在可以通過handler對象來指定一些自定義邏輯。
我們寫個例子來理解這個概念，
const handler = {
get: function() {
console.log('A value has been accessed');
}
}
const initialObj = {
id: 1,
name: 'Foo Bar'
}
const proxiedObj = new Proxy(initialObj, handler);
console.log(proxiedObj.name);
現在，如果我們沒有構造一個Proxy對象，執行第14行的console.log(proxiedObj.name)會在控制台輸出 “Foo Bar”。
不過現在我們定義了一個Proxy，並在第三行get方法中定義了一些自定義邏輯。
現在執行console.log(proxiedObj.name)會在控制台輸出 “A value has been accessed”。
仔細看，你會發現控制台中實際上有兩條記錄。 “A value has been accessed” 和 undefined。 為什么？🤔
get運算符的默認實現是返回Object中存儲的值。由於我們將它重寫為只記錄一條語句，該值永遠不會返回，因此第14行的console.log()輸出undefined。
讓我們來解決這個問題！
get運算符有兩個參數 - 對象本身和被訪問的屬性。
const handler = {
get: function(obj, prop) {
console.log('A value has been accessed');
return obj[prop]; // 返回訪問的key在obj的值
}
}
const initialObj = {
id: 1,
name: 'Foo Bar'
}
const proxiedObj = new Proxy(initialObj, handler);
console.log(proxiedObj.name);
好多了吧! 😄
我們為get提供的自定義覆蓋被稱為“攔截器”（大概基於操作系統攔截的概念）。 handler對象基本上是一個包含一組“攔截”的對象，每當訪問對象屬性時都會被觸發。
我們給set也添加一個“攔截器”。 我們將做同樣的事情 - 任何時候設置一個值，我們將記錄被修改的屬性，以及為該鍵設置的值。
set操作符有三個參數 - 對象本身，被訪問的屬性和為該屬性設置的值。
const handler = {
get: function(obj, prop) {
console.log('A value has been accessed');
return obj[prop];
},
set: function(obj, prop, value) {
console.log(`${prop} is being set to ${value}`);
}
}
const initialObj = {
id: 1,
name: 'Foo Bar'
}
const proxiedObj = new Proxy(initialObj, handler);
proxiedObj.age = 24
這里，在第18行進行的訪問將觸發第6行定義的功能，該功能將記錄正在訪問的屬性和正在設置的值。
一個真實的例子
假設我們有一個定義叫person的對象
const person = {
id: 1,
name: 'Foo Bar'
};
如果我們想讓這個對象的id屬性是一個私有屬性呢？ 沒人能夠通過person.id訪問這個屬性，如果有人這樣做，我們需要拋出一個錯誤。 我們將如何做到這一點？
讓Proxies來拯救吧！🎉👩🚒
我們所需要做的就是給這個對象創建一個Proxy，並覆蓋get運算符來阻止我們訪問id屬性！
const handler = {
get: function(obj, prop) {
if (prop === 'id') { // Check if the id is being accessed
throw new Error('Cannot access private properties!'); // Throw an error
} else {
return obj[prop]; // If it's not the id property, return it as usual
}
}
}
const person = {
id: 1,
name: 'Foo Bar'
}
const proxiedPerson = new Proxy(person, handler);
console.log(proxiedPerson.id);
這里，在我們給get創建的“攔截器”，我們檢查被訪問的屬性是否是id屬性，如果是的話，我們會拋出一個錯誤。 否則，我們照常返回值。
另一個極好的用例是校驗。 通過設置set“攔截器”，我們可以在設置值之前添加自定義驗證。 如果該值不符合驗證，我們可以拋出一個錯誤！
const handler = {
set: function(obj, prop, value) {
if (typeof value !== 'string') {
throw new Error('Only string values can be stored in this object!');
} else {
obj[prop] = value;
}
}
}
const obj = {};
const proxiedObj = new Proxy(obj, handler);
console.log(proxiedObj); // This will log an empty object
proxiedObj.name = 'Foo Bar'; // This should be allowed
console.log(proxiedObj); // This will log an object with the name property set
proxiedObj.age = 24; // This will throw an error.
在上面的例子中，我們已經看到了get和set“陷阱”。 實際上可以設置更多的“陷阱”。 你可以在這里找到整個列表。
Proxy對象只是在閱讀關於它們的這篇文章之后才進入我的視野，我已經可以在我每天寫的代碼中看到它們的用處了！
如果你之前在項目或工作中使用過Proxies，我很樂意聽到！😄
～最后～
如果您覺得這篇文章對您有用，請點個贊👏!
在什么地方卡住了，需要更多的幫助，還是只想打個招呼？ 在Hashnode 給我直接發問題，或者在Twitter上Call我。 你也可以在Github上找到我。🙃
本文轉載自：眾成翻譯
譯者：eJayYoung
鏈接：http://www.zcfy.cc/article/4755
原文：https://blog.campvanilla.com/advanced-guide-javascript-proxy-objects-introduction-301c0fce9432