JavaScript中的Proxy詳解

1.?什么是Proxy？

Proxy是ES6引入的一個強大特性，它允許你創建一個對象的代理，從而可以攔截和自定義該對象的基本操作。Proxy提供了一種機制，可以在對象的基本操作，如屬性查找、賦值、枚舉、函數調用等之前或之后執行自定義行為。

基本語法如下：

const proxy = new Proxy(target, handler);

target：要代理的目標對象，可以是任何類型的對象，包括數組、函數或另一個代理；

handler：一個對象，其屬性是定義代理行為的函數，稱為"陷阱"或"trap"；

2.?所有的handler方法

2.1. get(target, prop, receiver) - 攔截屬性讀取

const person = {name: "Alice",age: 30,
};const proxy = new Proxy(person, {get(target, prop) {console.log(`Reading property: ${prop}`);return prop in target ? target[prop] : "Default";},
});console.log(proxy.name); // "Reading property: name" → "Alice"
console.log(proxy.gender); // "Reading property: gender" → "Default"

2.2. set(target, prop, value, receiver) - 攔截屬性設置

const validator = {set(target, prop, value) {if (prop === "age") {if (!Number.isInteger(value) || value < 0) {throw new TypeError("Age must be a positive integer");}}console.log(`Setting ${prop} to ${value}`);target[prop] = value;return true; // 表示設置成功},
};const person = new Proxy({}, validator);
person.age = 25; // "Setting age to 25"
person.age = -5; // 拋出錯誤: Age must be a positive integer

2.3.?has(target, prop) - 攔截 in 操作符

const hiddenProps = ["secret", "password"];
const target = {name: "Bob",secret: "123",
};const proxy = new Proxy(target, {has(target, prop) {if (hiddenProps.includes(prop)) {return false; // 隱藏屬性}return prop in target;},
});console.log("name" in proxy); // true
console.log("secret" in proxy); // false

2.4.?deleteProperty(target, prop) - 攔截 delete 操作

const protectedData = {name: "Charlie",id: "12345",
};const proxy = new Proxy(protectedData, {deleteProperty(target, prop) {if (prop === "id") {throw new Error("Cannot delete ID property");}delete target[prop];return true;},
});delete proxy.name; // 成功
delete proxy.id; // 拋出錯誤: Cannot delete ID property

2.5.?apply(target, thisArg, arguments) - 攔截函數調用

function sum(a, b) {return a + b;
}const loggingProxy = new Proxy(sum, {apply(target, thisArg, args) {console.log(`Function called with args: ${args}`);console.log(`thisArg: ${thisArg}`);const result = target.apply(thisArg, args);console.log(`Function returned: ${result}`);return result;},
});loggingProxy(2, 3);
// "Function called with args: 2,3"
// "thisArg: undefined"
// "Function returned: 5"
// → 5

2.6.?construct(target, argumentsList, newTarget) - 攔截 new 操作符

class Person {constructor(name) {this.name = name;}
}const PersonProxy = new Proxy(Person, {construct(target, args, newTarget) {console.log(`Creating instance with args: ${args}`);// 可以修改參數或添加額外邏輯if (args.length === 0) {args = ["Anonymous"];}return new target(...args);},
});const p1 = new PersonProxy("Alice");
// "Creating instance with args: Alice"
const p2 = new PersonProxy();
// "Creating instance with args:" → name: "Anonymous"

2.7.?ownKeys(target) - 攔截 Object.keys() 等操作

const user = {name: "Dave",age: 40,_password: "****",
};const proxy = new Proxy(user, {ownKeys(target) {return Object.keys(target).filter((key) => !key.startsWith("_"));},
});console.log(Object.keys(proxy)); // ["name", "age"]
console.log(Object.getOwnPropertyNames(proxy)); // ["name", "age"]

2.8.?getOwnPropertyDescriptor(target, prop) - 攔截 Object.getOwnPropertyDescriptor()

const target = {name: "Eve",
};const proxy = new Proxy(target, {getOwnPropertyDescriptor(target, prop) {console.log(`Getting descriptor for: ${prop}`);const descriptor = Object.getOwnPropertyDescriptor(target, prop);// 可以修改描述符if (prop === "name") {descriptor.enumerable = false;}return descriptor || undefined;},
});console.log(Object.getOwnPropertyDescriptor(proxy, "name"));
// "Getting descriptor for: name" → {value: "Eve", writable: true, enumerable: false, configurable: true}

2.9.?defineProperty(target, prop, descriptor) - 攔截 Object.defineProperty()

const target = {};const proxy = new Proxy(target, {defineProperty(target, prop, descriptor) {console.log(`Defining property ${prop}`);if (prop.startsWith("_")) {throw new Error(`Cannot define private property: ${prop}`);}return Reflect.defineProperty(target, prop, descriptor);},
});Object.defineProperty(proxy, "name", { value: "Frank" }); // 成功
Object.defineProperty(proxy, "_secret", { value: "123" }); // 拋出錯誤

2.10.?preventExtensions(target) - 攔截 Object.preventExtensions()

const target = { name: "Grace" };
const proxy = new Proxy(target, {preventExtensions(target) {console.log("Attempt to prevent extensions");// 可以決定是否允許阻止擴展return false; // 返回false表示不允許阻止擴展// 或者調用 Reflect.preventExtensions(target)},
});Object.preventExtensions(proxy);
// "Attempt to prevent extensions"
// 拋出 TypeError (因為返回了false)

2.11.?isExtensible(target) - 攔截 Object.isExtensible()

const target = {};const proxy = new Proxy(target, {isExtensible(target) {console.log("Checking extensibility");// 可以返回自定義值return false; // 總是返回不可擴展// 或者調用 Reflect.isExtensible(target)},
});console.log(Object.isExtensible(proxy));
// "Checking extensibility" → false

2.12.?getPrototypeOf(target) - 攔截 Object.getPrototypeOf()

const originalProto = { version: 1 };
const obj = Object.create(originalProto);const proxy = new Proxy(obj, {getPrototypeOf(target) {console.log("Getting prototype");// 可以返回不同的原型return { version: 2 }; // 返回假原型// 或者調用 Reflect.getPrototypeOf(target)},
});console.log(Object.getPrototypeOf(proxy));
// "Getting prototype" → {version: 2}

2.13.?setPrototypeOf(target, prototype) - 攔截 Object.setPrototypeOf()

const target = {};
const proxy = new Proxy(target, {setPrototypeOf(target, proto) {console.log(`Setting prototype to: ${proto}`);// 可以阻止設置原型throw new Error("Prototype modification not allowed");// 或者調用 Reflect.setPrototypeOf(target, proto)},
});Object.setPrototypeOf(proxy, {});
// "Setting prototype to: [object Object]"
// 拋出錯誤: Prototype modification not allowed

2.14.?綜合示例：實現一個全面的數據驗證代理

const createValidatedObject = (schema, initialData = {}) => {return new Proxy(initialData, {set(target, prop, value) {// 檢查屬性是否在schema中定義if (!(prop in schema)) {throw new Error(`Property "${prop}" is not allowed`);}// 獲取驗證函數const validator = schema[prop];// 驗證值if (!validator(value)) {throw new Error(`Invalid value for property "${prop}"`);}// 設置值target[prop] = value;return true;},get(target, prop) {if (prop in target) {return target[prop];}throw new Error(`Property "${prop}" does not exist`);},deleteProperty(target, prop) {if (prop in schema && !schema[prop].configurable) {throw new Error(`Cannot delete property "${prop}"`);}delete target[prop];return true;},});
};// 定義schema
const userSchema = {name: (value) => typeof value === "string" && value.length > 0,age: (value) => Number.isInteger(value) && value >= 0,email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
};// 創建代理對象
const user = createValidatedObject(userSchema);// 使用示例
user.name = "Alice"; // 成功
user.age = 30; // 成功
user.email = "alice@example.com"; // 成功try {user.age = -5; // 拋出錯誤: Invalid value for property "age"
} catch (e) {console.error(e.message);
}try {user.gender = "female"; // 拋出錯誤: Property "gender" is not allowed
} catch (e) {console.error(e.message);
}

這些示例涵蓋了 Proxy 的主要 handler 方法，展示了它們在實際開發中的應用場景。通過這些示例，你可以看到 Proxy 如何為 JavaScript 對象提供強大的攔截和自定義能力。

3.?常用場景

下面是Proxy在實際開發中的10種常見應用場景的完整代碼示例：

3.1. 數據驗證

const createValidator = (rules) => {return new Proxy({},{set(target, prop, value) {if (!rules[prop]) {throw new Error(`Property "${prop}" is not allowed`);}if (!rules[prop](value)) {throw new Error(`Invalid value for "${prop}"`);}target[prop] = value;return true;},});
};// 使用示例
const userValidator = createValidator({name: (val) => typeof val === "string" && val.length >= 2,age: (val) => Number.isInteger(val) && val >= 18,email: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
});userValidator.name = "Alice"; // 成功
userValidator.age = 25; // 成功
// userValidator.age = '25'; // 拋出錯誤
// userValidator.gender = 'female'; // 拋出錯誤

3.2. 觀察者模式（數據變化監聽）

function createObservable(target, callback) {return new Proxy(target, {set(target, prop, value) {const oldValue = target[prop];target[prop] = value;callback(prop, oldValue, value);return true;},});
}// 使用示例
const user = { name: "Bob", age: 30 };
const observableUser = createObservable(user, (prop, oldVal, newVal) => {console.log(`Property ${prop} changed from ${oldVal} to ${newVal}`);
});observableUser.name = "Alice"; // 控制臺輸出: Property name changed from Bob to Alice
observableUser.age = 31; // 控制臺輸出: Property age changed from 30 to 31

3.3. 屬性訪問控制

const createPrivateProps = (obj, privateProps = []) => {return new Proxy(obj, {get(target, prop) {if (privateProps.includes(prop)) {throw new Error(`Property "${prop}" is private`);}return target[prop];},set(target, prop, value) {if (privateProps.includes(prop)) {throw new Error(`Cannot set private property "${prop}"`);}target[prop] = value;return true;},});
};// 使用示例
const account = createPrivateProps({username: "alice123",_password: "secret123",},["_password"]
);console.log(account.username); // 'alice123'
// console.log(account._password); // 拋出錯誤
// account._password = 'newpass'; // 拋出錯誤

3.4.?虛擬屬性（動態計算屬性）

const createVirtualProps = (obj, virtualProps = {}) => {return new Proxy(obj, {get(target, prop) {if (prop in virtualProps) {return virtualProps[prop](target);}return target[prop];},});
};// 使用示例
const person = createVirtualProps({firstName: "John",lastName: "Doe",},{fullName: (target) => `${target.firstName} ${target.lastName}`,initials: (target) => `${target.firstName[0]}${target.lastName[0]}`,}
);console.log(person.fullName); // 'John Doe'
console.log(person.initials); // 'JD'

3.5.?API封裝（簡化復雜API）

const api = {_baseUrl: "https://api.example.com",_endpoints: {users: "/users",posts: "/posts",},_makeRequest(url, options) {console.log(`Making request to ${url}`);// 實際這里會是fetch或axios調用return Promise.resolve({ data: `${url} response` });},
};const apiProxy = new Proxy(api, {get(target, prop) {if (prop in target._endpoints) {return (options = {}) => {const url = `${target._baseUrl}${target._endpoints[prop]}`;return target._makeRequest(url, options);};}return target[prop];},
});// 使用示例
apiProxy.users().then((res) => console.log(res.data));
// "Making request to https://api.example.com/users"
// → "https://api.example.com/users response"apiProxy.posts({ page: 2 }).then((res) => console.log(res.data));
// "Making request to https://api.example.com/posts"
// → "https://api.example.com/posts response"

3.6. 性能優化（延遲加載/緩存）

const createCachedProxy = (fn) => {const cache = new Map();return new Proxy(fn, {apply(target, thisArg, args) {const key = JSON.stringify(args);if (cache.has(key)) {console.log("Returning cached result");return cache.get(key);}console.log("Calculating new result");const result = target.apply(thisArg, args);cache.set(key, result);return result;},});
};// 使用示例
const expensiveCalculation = (a, b) => {console.log("Running expensive calculation...");return a * b;
};const cachedCalc = createCachedProxy(expensiveCalculation);console.log(cachedCalc(2, 3)); // "Running expensive calculation..." → 6
console.log(cachedCalc(2, 3)); // "Returning cached result" → 6
console.log(cachedCalc(4, 5)); // "Running expensive calculation..." → 20

3.7.?負索引數組（類似Python）

const createNegativeIndexArray = (arr) => {return new Proxy(arr, {get(target, prop) {const index = parseInt(prop);if (!isNaN(index)) {// 處理負索引prop = index < 0 ? target.length + index : index;}return Reflect.get(target, prop);},});
};// 使用示例
const array = createNegativeIndexArray(["a", "b", "c", "d"]);console.log(array[0]); // 'a'
console.log(array[-1]); // 'd'
console.log(array[-2]); // 'c'

3.8.?函數調用日志（調試）

const withLogging = (fn) => {return new Proxy(fn, {apply(target, thisArg, args) {console.log(`Calling ${target.name} with args:`, args);const start = performance.now();const result = target.apply(thisArg, args);const end = performance.now();console.log(`Called ${target.name}, took ${(end - start).toFixed(2)}ms`);return result;},});
};// 使用示例
function calculate(a, b, c) {// 模擬耗時操作for (let i = 0; i < 100000000; i++) {}return a + b * c;
}const loggedCalc = withLogging(calculate);
console.log(loggedCalc(2, 3, 4));
// 控制臺輸出:
// Calling calculate with args: [2, 3, 4]
// Called calculate, took 123.45ms
// → 14

3.9. 自動填充默認值

const withDefaults = (obj, defaults) => {return new Proxy(obj, {get(target, prop) {if (prop in target) {return target[prop];}if (prop in defaults) {const defaultValue = defaults[prop];// 如果默認值是函數則調用它return typeof defaultValue === "function"? defaultValue(): defaultValue;}return undefined;},});
};// 使用示例
const config = withDefaults({theme: "dark",},{theme: "light",fontSize: 14,timestamp: () => new Date().toISOString(),}
);console.log(config.theme); // 'dark' (使用已有值)
console.log(config.fontSize); // 14 (使用默認值)
console.log(config.timestamp); // 當前時間ISO字符串 (調用函數默認值)
console.log(config.nonExisting); // undefined

3.10.?數據綁定（雙向綁定）

function createBinding(sourceObj, targetObj, propertyMap) {const handler = {set(target, prop, value) {target[prop] = value;// 更新綁定的屬性if (propertyMap[prop]) {const targetProp = propertyMap[prop];targetObj[targetProp] = value;console.log(`Updated ${targetProp} to ${value}`);}return true;},};return new Proxy(sourceObj, handler);
}// 使用示例
const form = {};
const model = { firstName: "", lastName: "" };const boundForm = createBinding(form, model, {"first-name": "firstName","last-name": "lastName",
});boundForm["first-name"] = "Alice";
// 控制臺輸出: Updated firstName to Alice
boundForm["last-name"] = "Smith";
// 控制臺輸出: Updated lastName to Smithconsole.log(model);
// { firstName: 'Alice', lastName: 'Smith' }

這些示例展示了Proxy在實際開發中的強大能力。每個示例都可以根據具體需求進行擴展和組合使用，Proxy為JavaScript提供了元編程的強大工具，可以優雅地解決許多復雜問題。