今天國慶假期第一天，祝大家國慶快樂，今天來看看JavaScript Proxy的使用實體，主要有get()、set()和apply()的攔截操作，用來攔截物件屬性的獲取和賦值，函式的呼叫，
Proxy 使用示例
get() 攔截
當通過proxy去訪問目標物件時，會觸發get()函式，
在上一篇的例子里，列印proxyUser物件的屬性時，會額外列印出一條訊息，
所以我們可以在get()函式中開發自己的自定義邏輯，
例如，使用get()來實作一個計算屬性的功能，這和Vue中的計算屬性類似，
const user = {
firstName: '小帥',
lastName: '編程筆記'
}
const handler = {
get(target, property) {
return property === 'fullName' ?
`${target.firstName} ${target.lastName}` :
target[property];
}
};
const proxyUser = new Proxy(user, handler);
console.log(proxyUser.fullName);
// 輸出：小帥 編程筆記
上面user物件并沒有fullName屬性，我們在get()函式中通過自定義判斷回傳一個firstName屬性和lastName屬性拼好的結果，
set() 攔截
當我們要給proxy物件屬性賦值時會觸發set()函式，
假如我們有一個需求，需要確保age屬性的型別必須為數字，并且要大于等于18歲，那么我們可以用set()函式來自定義邏輯，
const user = {
firstName: '小帥',
lastName: '編程筆記',
age: 20
}
const handler = {
set(target, property, value) {
if (property === 'age') {
if (typeof value !== 'number') {
throw new Error('請輸入正確的年齡');
}
if (value < 18) {
throw new Error('您的年齡必須滿足18周歲')
}
}
target[property] = value;
}
};
const proxyUser = new Proxy(user, handler);
然后，嘗試設定一個錯誤型別的值
proxyUser.age = 'foo';
// 輸出：Uncaught Error: 請輸入正確的年齡
然后嘗試設定小于18的值
proxyUser.age = 16;
// 輸出：Uncaught Error: 您的年齡必須滿足18周歲
最后設定，正確的值
proxyUser.age = 23;
// 輸出：23
console.log(proxyUser);
// 輸出：Proxy {firstName: '小帥', lastName: '編程筆記', age: 23}
console.log(user);
// {firstName: '小帥', lastName: '編程筆記', age: 23}
apply() 攔截
apply()是用來呼叫函式的時候的攔截函式，做一些其他自定義邏輯，
const user = {
firstName: 'hello',
lastName: 'world'
}
const getFullName = function (user) {
return `${user.firstName} ${user.lastName}`;
}
const getFullNameProxy = new Proxy(getFullName, {
apply(target, thisArg, args) {
// target為getFullName目標函式
console.log(target);
// args為實際呼叫函式時傳入的引數user
console.log(args);
return target(...args).toUpperCase();
}
});
console.log(getFullNameProxy(user));
// 輸出：HELLO WORLD
我通過創建了一個函式的代理getFullNameProxy，來在呼叫函式時最后把值轉換為大寫進行回傳，
最后
proxy的可以攔截操作還有很多，上面的三種，get()、set()、apply()是平時比較算常用的，
還有一些其他的，比較冷門，少用的
construct– 攔截new呼叫時getPrototypeOf– 攔截代理[[GetPrototypeOf]]setPrototypeOf– 攔截代理Object.setPrototypeOfisExtensible– 攔截代理Object.isExtensiblepreventExtensions–攔截代理Object.preventExtensionsgetOwnPropertyDescriptor– 攔截代理Object.getOwnPropertyDescriptor
今天到這里，國慶快樂，
歡迎關注我公眾號【小帥的編程筆記】，跟著我每天進步一點點
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305076.html
標籤：其他
下一篇：JavaScript中的函式