使用 javascript 代理
我最近一直在研究 Javascript 中的代理。我對它能做什麼感到驚訝。 代理 允許您掛鉤語言結構的基本操作(如對象、數組、函數..)
這是 javascript 代理的簡單用例列表
凍結對象
我們可以通過幾行代碼很容易地防止對象的突變,本質上是凍結對象
const hero = {
name: 'Saitama',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy',
};
const Freeze = obj =>
new Proxy(obj, {
set: function(target, key, value) {
throw Error("You can't change values this object has been frozen");
},
});
const saitama = Freeze(hero);
saitama.name = 'Garuro'; // This will throw error
還可以凍結數組、Map、WeakMap、Set...
跟踪對象的變化
代理可以用來跟踪對象的變化,本質上是維護歷史。
const createHistory = obj => {
let history = [JSON.parse(JSON.stringify(obj))];
const proxiedObject = new Proxy(obj, {
set: function(target, key, value) {
history.push({ ...target, [key]: value });
Reflect.set(target, key, value);
},
});
return [history, proxiedObject];
};
const [history, proxiedObject] = createHistory(hero);
proxiedObject.name = 'Genos';
proxiedObject.class = 'C';
console.log(history);
歷史對象將包含對該對象所做更改的快照
[
{
name: 'Saitama',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy'
},
{
name: 'Genos',
age: 25,
class: 'B',
race: 'Human',
heroName: 'Caped Baldy'
},
{
name: 'Genos',
age: 25,
class: 'C',
race: 'Human',
heroName: 'Caped Baldy'
}
]
同樣,您還可以跟踪使用應用觸發器調用函數的次數。
不區分大小寫的密鑰訪問
const caseInsensitive = obj =>
new Proxy(obj, {
get: function(target, key) {
// I am assuming keys are lowercase by default for simplicity
return Reflect.get(target, key.toLowerCase());
},
});
const proxiedObject = caseInsensitive(hero);
console.log(proxiedObject.name); // saitama
console.log(proxiedObject.NAME); // saitama
處理不存在的屬性
您可以通過以下代碼段輕鬆處理未定義的屬性
const FetchValue = obj =>
new Proxy(obj, {
get: function(target, key) {
if (target.hasOwnProperty(key)) {
return [Reflect.get(target, key), true];
}
return [null, false];
},
});
const proxiedObject = FetchValue(hero);
const [name, nameExist] = proxiedObject.name;
const [city, cityExist] = proxiedObject.city;
if (nameExist) {
console.log(name);
}
if (cityExist) {
console.log(city); // this is not executed since property city does not exist
}
您可以使用代理做的比這裡列出的要多得多。你可以在這裡查看更棒的用法 https://github.com/mikaelbr/awesome-es2015-proxy
上一篇
用背心對抗驗證意大利面。
下一篇
ES6 承諾