JavaScript 提供了許多有趣的功能，其中最強大且不太常見的功能之一是 Proxy 物件。該工具允許您建立一個可以攔截其他對像上的操作的對象，例如存取或修改屬性。在這篇文章中，我們將探討 Proxy 的工作原理、用途，以及它與 getter 和 setter 等其他類似功能的差異。
代理人充當另一個物件（稱為「目標」）的中介。您可以透過「處理程序」定義代理程式對於不同操作的行為方式。這允許您自訂與底層物件互動的方式。
const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);
假設我們有一個代表使用者的對象，並且我們希望在存取其屬性時提供自訂行為：
const user = {
name: 'Gabriel',
age: 30
};
const handler = {
get: function(target, prop) {
if (prop in target) {
return target[prop];
} else {
return 'Property not found';
}
}
};
const userProxy = new Proxy(user, handler);
console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found
您可以考慮使用 getter 來實現類似的行為：
const userWithGetters = {
name: 'Gabriel',
age: 30,
getProperty(prop) {
return this[prop] || 'Property not found';
}
};
console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found
不同的是，使用Proxy，你可以攔截對物件的任何操作，而不僅僅是屬性訪問，這提供了更大的靈活性。
想像一下，我們想要確保在設定使用者的年齡時，只允許使用有效值。這就是 Proxy 的閃光點：
const person = {
name: 'Ana'
};
const handler = {
set: function(target, prop, value) {
if (prop === 'age' && (value < 0 || value > 120)) {
throw new Error('Age must be between 0 and 120');
}
target[prop] = value;
return true;
}
};
const personProxy = new Proxy(person, handler);
personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María
try {
personProxy.age = -5; // Will throw an error
} catch (e) {
console.log(e.message); // Age must be between 0 and 120
}
您可以使用 setter 來驗證值：
const personWithSetters = {
_age: 0,
name: 'Ana',
set age(value) {
if (value < 0 || value > 120) {
throw new Error('Age must be between 0 and 120');
}
this._age = value;
},
get age() {
return this._age;
}
};
try {
personWithSetters.age = -5; // Will throw an error
} catch (e) {
console.log(e.message); // Age must be between 0 and 120
}
與 Proxy 的區別在於，您可以更廣泛地將驗證應用於任何屬性，而無需為每個屬性定義 getter 和 setter。
想像一下您想要追蹤對某個物件所做的更改。使用 Proxy，這很容易完成：
const data = {};
const handler = {
set: function(target, prop, value) {
console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
target[prop] = value;
return true;
}
};
const dataProxy = new Proxy(data, handler);
dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25
在可觀察系統中，您需要定義特定模式來通知變更。使用Proxy，你只需攔截操作：
// Simulating a basic observable
class Observable {
constructor(data) {
this.data = data;
this.listeners = [];
}
addListener(listener) {
this.listeners.push(listener);
}
notify() {
this.listeners.forEach(listener => listener(this.data));
}
}
不同之處在於，使用代理允許採用更直接、更簡潔的方法來攔截和回應變更。使用 observable，您必須手動管理通知。
JavaScript中的Proxy物件是一個極其強大的工具，它允許你攔截和重新定義對物件的操作。與限制性更強且需要更多程式碼的 getter 和 setter 不同，Proxy 提供了靈活性和更清晰的方法來驗證、監視和操作物件。
如果您希望增強在 JavaScript 中使用物件的能力，那麼探索 Proxy 絕對值得！
以上是探索 JavaScript 中的代理：帶有實際範例的高級功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
