1分鐘學(xué)會如何用 JS 對象代理（proxies）實現(xiàn)對象的私有屬性

大家好，在上一篇文章《1分鐘搞懂什么是 JS 代理對象（proxies）》學(xué)會了什么是 JS 代理，本篇文章我們繼續(xù)加深下對象代理在實際場景中的運用。

今天我們來聊聊私有屬性，在其他的高級語言中很容易能實現(xiàn)私有屬性的功能，那么在 JS 中怎么實現(xiàn)對象的私有屬性呢，首先我們聊聊私有屬性運用的需求場景，比如我們在對象里用 _ 符號開頭的形式定義對象的私有屬性，不希望外部環(huán)境讀取私有屬性，如下段代碼所示

let?bankAccount?=?{
????holderName:?'Joe',
????currency:?'USD',
????_balance:?1000
}

我們希望讀取對象 ?_balance 的私有屬性或刪除對象的 _balance 屬性，會有如下的提示：

//?don't?allow?reading?the?balance
console.log(bankAccount._balance);
//?don't?allow?deleting?the?property
delete?_balance

那我們該如何實現(xiàn)呢？這時候我們可以使用 JS 代理，針對 _符號開頭的私有屬性進行特殊的邏輯處理（你也可以用其他的符號自定義私有屬性），廢話不多說，上代理的實現(xiàn)的代碼邏輯，以下為代理攔截器方法的代碼：

let?proxyHandler?=?{?
????has:?(target,?prop)?=>?{?
????????if(prop.startsWith(prefix)){?
????????????return?false;
????????}?
????????return?prop?in?target?
????},?//?針對?in?方法的重寫
????ownKeys:?target?=>?{?
????????return?Reflect.ownKeys(target).filter(?
????????????prop?=>?!prop.startsWith(prefix)?
????????)?
????},?//針對?keys?方法的重寫
????get:?(target,?prop)?=>?{?
????????if(prop.startsWith(prefix))?{?
????????????return?undefined;?
????????}?
????????return?target[prop];?
????},?
????deleteProperty(target,?prop)?{?
????????if?(prop.startsWith('_'))?{?
????????????return?true;?//私有屬性不刪除
????????}?else?{?
????????????delete?target[prop];?
????????????return?true;?
????????}
????}
}

接下來，我們來驗證下上述代碼是否可行：

const?hidePrivateFields?=?(target,?prefix?=?"_")?=>?{?
????return?new?Proxy(target,?proxyHandler)
};

let?bankAccount?=?hidePrivateFields({
????holderName:?'Joe',
????currency:?'USD',
????_balance:?1000
})

console.log(bankAccount._balance)?//?undefined?
console.log('_balance'?in?bankAccount)?//false
console.log(Object.keys(bankAccount))?//?['holderName',?'currency']?
console.log(delete?bankAccount._balance)?//?returns?true,?but?does?not?delete?the?balance

今天關(guān)于 JS 對象代理在私有屬性方面的應(yīng)用就分享到這里，下一篇文章，我們將繼續(xù)分享代理有趣的應(yīng)用，比如以前JQ 插件庫可以通過鏈式語法很容易的操控樣式，如下所示，如果讓你用 JS 對象代理，你會如何實現(xiàn)呢？

style(".menu").color("#fff").backgroundColor("#000").opacity("1");

文章來源：http://www.js-craft.io/blog/javascript-proxies-restricting-access-to-object-properties-and-some-other-practical-examples/ ??

作者：Daniel