const targetObject = { name: 'John', age: 25, }; const handler = { get(target, prop) { console.log(`获取属性 ${prop}`); return target[prop]; }, }; const proxy = new Proxy(targetObject, handler); console.log(proxy.name); // 输出: 获取属性 name, John在这个例子中,get陷阱拦截属性访问并在返回实际属性值之前记录一条消息。
apply(target, thisArg, argumentsList):apply陷阱在Proxy作为函数调用时被触发。
const loggedObject = new Proxy({}, { get(target, prop) { console.log(`访问属性: ${prop}`); return target[prop]; }, }); loggedObject.name = 'Alice'; // 访问属性: name console.log(loggedObject.name); // 访问属性: name3. 安全性
const securedObject = new Proxy({ secret: 'classified' }, { get(target, prop) { if (prop === 'secret') { throw new Error('未授权的访问'); } return target[prop]; }, }); console.log(securedObject.publicInfo); // 访问允许 console.log(securedObject.secret); // 抛出错误: 未授权的访问4. 记忆化
function fibonacci(n) { if (n <= 1) { return n; } return fibonacci(n - 1) + fibonacci(n - 2); } const memoizedFibonacci = new Proxy({}, { get(target, prop) { if (!(prop in target)) { target[prop] = fibonacci(Number(prop)); } return target[prop]; }, }); console.log(memoizedFibonacci[10]); // 计算并缓存 console.log(memoizedFibonacci[5]); // 从缓存中获取实战示例:电商场景
// 堆代码 duidaima.com const product = { name: 'Smartphone', price: 500, quantity: 10, }; const securedProduct = new Proxy(product, { set(target, prop, value) { if (prop === 'quantity' && value < 0) { throw new Error('无效的数量'); } target[prop] = value; return true; }, }); securedProduct.quantity = 15; // 有效赋值 securedProduct.quantity = -5; // 抛出错误: 无效的数量在这个例子中,Proxy确保产品的数量不能被设置为负值,从而在电商上下文中执行了一个业务规则。