Javascript Proxy對(duì)象 簡(jiǎn)介

本文轉(zhuǎn)載自：眾成翻譯
譯者：eJayYoung
鏈接：http://www.zcfy.cc/article/4755
原文：https://blog.campvanilla.com/advanced-guide-javascript-proxy-objects-introduction-301c0fce9432

Javascript Proxy對(duì)象

改變你操作對(duì)象的方式

Proxies 是Javasript對(duì)象的中間件

…或者說至少是那種很早的版本。

ES6 中引入Proxies，讓你可以自定義Object的基本操作。例如，get就是Object的基礎(chǔ)操作方法。

const obj = {val: 10 }; console.log(obj.val);

這里，console.log()表達(dá)式在對(duì)象obj上執(zhí)行g(shù)et方法來獲取val的值。

另一個(gè)對(duì)象的基本操作方法是 set。

const obj = {val: 10 }; obj.val2 = 20;

這里，set方法用來給對(duì)象obj設(shè)置一個(gè)新的值。

---

如何創(chuàng)建Proxy?

const proxiedObject = new Proxy(initialObj, handler);

調(diào)用Proxy構(gòu)造函數(shù)，new Proxy()將返回一個(gè)對(duì)象，不僅包含了initialObj里的值，而且其基本操作（如get 和 set）現(xiàn)在可以通過handler對(duì)象來指定一些自定義邏輯。

我們寫個(gè)例子來理解這個(gè)概念，

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

現(xiàn)在，如果我們沒有構(gòu)造一個(gè)Proxy對(duì)象，執(zhí)行第14行的console.log(proxiedObj.name)會(huì)在控制臺(tái)輸出 “Foo Bar”。

不過現(xiàn)在我們定義了一個(gè)Proxy，并在第三行g(shù)et方法中定義了一些自定義邏輯。

現(xiàn)在執(zhí)行console.log(proxiedObj.name)會(huì)在控制臺(tái)輸出 “A value has been accessed”。

仔細(xì)看，你會(huì)發(fā)現(xiàn)控制臺(tái)中實(shí)際上有兩條記錄。 “A value has been accessed” 和 undefined。 為什么？��

get運(yùn)算符的默認(rèn)實(shí)現(xiàn)是返回Object中存儲(chǔ)的值。由于我們將它重寫為只記錄一條語句，該值永遠(yuǎn)不會(huì)返回，因此第14行的console.log()輸出undefined。

讓我們來解決這個(gè)問題！

get運(yùn)算符有兩個(gè)參數(shù) - 對(duì)象本身和被訪問的屬性。

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

返回屬性值

返回屬性值 — 控制臺(tái)的輸出

好多了吧! ��

我們?yōu)間et提供的自定義覆蓋被稱為“攔截器”（大概基于操作系統(tǒng)攔截的概念）。 handler對(duì)象基本上是一個(gè)包含一組“攔截”的對(duì)象，每當(dāng)訪問對(duì)象屬性時(shí)都會(huì)被觸發(fā)。

我們給set也添加一個(gè)“攔截器”。 我們將做同樣的事情 - 任何時(shí)候設(shè)置一個(gè)值，我們將記錄被修改的屬性，以及為該鍵設(shè)置的值。

set操作符有三個(gè)參數(shù) - 對(duì)象本身，被訪問的屬性和為該屬性設(shè)置的值。

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

添加set “攔截器”

這里，在第18行進(jìn)行的訪問將觸發(fā)第6行定義的功能，該功能將記錄正在訪問的屬性和正在設(shè)置的值。

Set “攔截器”?—— 控制臺(tái)的輸出

---

一個(gè)真實(shí)的例子

假設(shè)我們有一個(gè)定義叫person的對(duì)象

const person = {id: 1,name: 'Foo Bar' };

如果我們想讓這個(gè)對(duì)象的id屬性是一個(gè)私有屬性呢？ 沒人能夠通過person.id訪問這個(gè)屬性，如果有人這樣做，我們需要拋出一個(gè)錯(cuò)誤。 我們將如何做到這一點(diǎn)？

讓Proxies來拯救吧！����?��

我們所需要做的就是給這個(gè)對(duì)象創(chuàng)建一個(gè)Proxy，并覆蓋get運(yùn)算符來阻止我們?cè)L問id屬性！

const handler = {get: function(obj, prop) {if (prop === 'id') { // Check if the id is being accessedthrow 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創(chuàng)建的“攔截器”，我們檢查被訪問的屬性是否是id屬性，如果是的話，我們會(huì)拋出一個(gè)錯(cuò)誤。 否則，我們照常返回值。

私有屬性?—?控制臺(tái)輸出

---

另一個(gè)極好的用例是校驗(yàn)。 通過設(shè)置set“攔截器”，我們可以在設(shè)置值之前添加自定義驗(yàn)證。 如果該值不符合驗(yàn)證，我們可以拋出一個(gè)錯(cuò)誤！

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 setproxiedObj.age = 24; // This will throw an error.

自定義對(duì)象的屬性校驗(yàn)

自定義校驗(yàn) - 控制臺(tái)輸出

---

在上面的例子中，我們已經(jīng)看到了get和set“陷阱”。 實(shí)際上可以設(shè)置更多的“陷阱”。 你可以在這里找到整個(gè)列表。

Proxy對(duì)象只是在閱讀關(guān)于它們的這篇文章之后才進(jìn)入我的視野，我已經(jīng)可以在我每天寫的代碼中看到它們的用處了！

如果你之前在項(xiàng)目或工作中使用過Proxies，我很樂意聽到！��

～最后～

---

如果您覺得這篇文章對(duì)您有用，請(qǐng)點(diǎn)個(gè)贊��!

在什么地方卡住了，需要更多的幫助，還是只想打個(gè)招呼？ 在Hashnode 給我直接發(fā)問題，或者在Twitter上Call我。 你也可以在Github上找到我。��

總結(jié)

以上是生活随笔為你收集整理的Javascript Proxy对象 简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。