理解ES6 Proxy：從基礎(chǔ)使用到實(shí)際場景
今天我們來聊聊JavaScript中的Proxy，這個功能很實(shí)用，但很多人對它還不太熟悉。
Proxy是什么？
Proxy是ES6引入的新特性，中文意思是"代理"。它的作用是在一個對象外面包一層，所有對這個對象的操作都要經(jīng)過這層代理。
簡單來說，Proxy就像一個中間人。你想訪問一個對象時，必須先經(jīng)過這個中間人同意。這個中間人可以決定是放行你的操作，還是進(jìn)行一些處理。
與之前的Object.defineProperty相比，Proxy有幾個明顯優(yōu)勢：
- 能攔截的操作更多：可以監(jiān)聽13種不同的對象操作
- 使用更簡單：不需要提前定義要監(jiān)聽的屬性
- 支持的類型更廣：可以代理數(shù)組、函數(shù)等
這就是為什么vue3選擇用Proxy重寫響應(yīng)式系統(tǒng)。
Proxy的基本用法
創(chuàng)建Proxy
const proxy = newProxy(target, handler);這里有兩個重要參數(shù)：
- target：要被代理的目標(biāo)對象
- handler：包含各種攔截方法的對象
常用的攔截方法
- 讀寫屬性攔截（get和set）
const userValidator = {
set(target, prop, value) {
// 驗(yàn)證年齡數(shù)據(jù)
if (prop === 'age') {
if (!Number.isInteger(value) || value < 0 || value > 120) {
thrownew Error(`年齡無效：${value}`);
}
}
// 設(shè)置屬性值
target[prop] = value;
returntrue;
},
get(target, prop) {
// 如果屬性不存在，返回默認(rèn)值
if (!(prop in target)) {
return'未設(shè)置';
}
return target[prop];
}
};
const user = new Proxy({}, userValidator);
user.name = '小明'; // 正常設(shè)置
user.age = 25; // 正常設(shè)置
console.log(user.gender); // 輸出"未設(shè)置"
user.age = 150; // 報錯：年齡無效- 函數(shù)調(diào)用攔截（apply）
const addProxy = newProxy(function(a, b) {
return a + b;
}, {
apply(target, thisArg, args) {
console.log(`計算加法：${args[0]} + ${args[1]}`);
// 檢查參數(shù)是不是數(shù)字
if (!args.every(Number.isFinite)) {
thrownewError('參數(shù)必須是數(shù)字');
}
return target.apply(thisArg, args);
}
});
addProxy(2, 3); // 輸出"計算加法：2+3"，返回5
addProxy(2, '3'); // 報錯- 構(gòu)造函數(shù)攔截（construct）
const UserProxy = newProxy(class{
constructor(name) {
this.name = name;
}
}, {
construct(target, args) {
console.log(`創(chuàng)建用戶：${args[0]}`);
// 創(chuàng)建實(shí)例并添加額外屬性
const instance = new target(...args);
instance.createTime = newDate();
return instance;
}
});
const user = new UserProxy('張三');
// 輸出"創(chuàng)建用戶：張三"
// user對象包含name和createTime屬性Proxy的實(shí)際應(yīng)用場景
數(shù)據(jù)驗(yàn)證
在表單處理或配置項驗(yàn)證時很好用：
const priceHandler = {
set(target, prop, value) {
if (prop.includes('Price') && (typeofvalue !== 'number' || value <= 0)) {
thrownew Error(`價格無效：${value}`);
}
target[prop] = value;
returntrue;
}
};
const product = new Proxy({ name: '手機(jī)' }, priceHandler);
product.salePrice = 2999; // 正常
product.salePrice = -100; // 報錯響應(yīng)式編程
Vue3的響應(yīng)式系統(tǒng)就是基于Proxy：
functionreactive(target) {
returnnewProxy(target, {
get(target, prop) {
console.log(`讀取屬性：${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`設(shè)置屬性：${prop} = ${value}`);
target[prop] = value;
returntrue;
}
});
}
const state = reactive({ count: 0 });
state.count++; // 輸出"讀取屬性：count"和"設(shè)置屬性：count = 1"日志記錄
自動記錄對象操作，方便調(diào)試：
functioncreateLogger(target, name) {
returnnewProxy(target, {
get(target, prop) {
console.log(`[${name}] 讀取屬性 ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`[${name}] 設(shè)置屬性 ${prop} = ${value}`);
target[prop] = value;
returntrue;
}
});
}
const data = createLogger({ name: '李四' }, '用戶數(shù)據(jù)');
data.age = 25; // 輸出"[用戶數(shù)據(jù)] 設(shè)置屬性 age = 25"
console.log(data.name); // 輸出"[用戶數(shù)據(jù)] 讀取屬性 name"權(quán)限控制
保護(hù)敏感數(shù)據(jù)，限制某些操作：
functioncreateSecureObject(data) {
const privateKeys = ['password', 'token'];
returnnewProxy(data, {
get(target, prop) {
if (privateKeys.includes(prop)) {
thrownewError('無權(quán)訪問私有屬性');
}
return target[prop];
},
set(target, prop, value) {
if (privateKeys.includes(prop)) {
thrownewError('無權(quán)修改私有屬性');
}
target[prop] = value;
returntrue;
}
});
}
const user = createSecureObject({
name: '王五',
password: '123456'
});
console.log(user.name); // 正常
console.log(user.password); // 報錯數(shù)組操作攔截
const arrayHandler = {
set(target, prop, value) {
console.log(`數(shù)組操作：設(shè)置 ${prop} 為 ${value}`);
target[prop] = value;
returntrue;
},
get(target, prop) {
if (prop === 'push') {
returnfunction(...args) {
console.log(`向數(shù)組添加元素：${args}`);
returnArray.prototype.push.apply(target, args);
};
}
return target[prop];
}
};
const list = newProxy([], arrayHandler);
list.push('蘋果', '香蕉'); // 輸出"向數(shù)組添加元素：蘋果,香蕉"
list[0] = '橙子'; // 輸出"數(shù)組操作：設(shè)置 0 為 橙子"使用注意事項
瀏覽器兼容性
Proxy在現(xiàn)代瀏覽器中支持很好，但不支持IE。如果需要支持老版本瀏覽器，要有備用方案。
性能考慮
Proxy會帶來一些性能開銷，但在大多數(shù)情況下影響很小。只有在性能要求極高的場景才需要考慮這個問題。
this指向
在Proxy的攔截方法中，this的指向需要注意。通常建議使用Reflect方法來保持正確的上下文。
const handler = {
get(target, prop, receiver) {
// 使用Reflect保持正確的this指向
return Reflect.get(target, prop, receiver);
}
};無法代理的情況
某些內(nèi)置對象（如Date、Map等）的內(nèi)部屬性無法被Proxy攔截，這是JavaScript引擎的限制。
實(shí)用技巧
鏈?zhǔn)讲僮鲾r截
const chainHandler = {
get(target, prop) {
if (prop === 'double') {
return function() {
target.value *= 2;
return proxy; // 返回代理本身，支持鏈?zhǔn)秸{(diào)用
};
}
return target[prop];
}
};
const obj = { value: 5 };
const proxy = new Proxy(obj, chainHandler);
proxy.double().double();
console.log(obj.value); // 輸出20默認(rèn)值處理
const withDefaults = newProxy({}, {
get(target, prop) {
if (prop in target) {
return target[prop];
}
// 為不存在的屬性提供默認(rèn)值
if (prop === 'length') return0;
if (prop === 'timestamp') returnDate.now();
returnundefined;
}
});
console.log(withDefaults.length); // 輸出0
console.log(withDefaults.timestamp); // 輸出當(dāng)前時間戳總結(jié)
Proxy是JavaScript中很強(qiáng)大的功能，它讓我們能夠更靈活地控制對象的行為。無論是數(shù)據(jù)驗(yàn)證、日志記錄，還是實(shí)現(xiàn)響應(yīng)式系統(tǒng)，Proxy都能派上用場。
雖然有一些使用限制，但在現(xiàn)代Web開發(fā)中，Proxy已經(jīng)成為不可或缺的工具。掌握好Proxy，能讓你的代碼更加健壯和靈活。
建議在實(shí)際項目中多嘗試使用Proxy，你會發(fā)現(xiàn)它在很多場景下都能簡化代碼，提高開發(fā)效率。
責(zé)任編輯：龐桂玉
來源：
web前端開發(fā)
