闽公网安备 35020302035485号
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); // 访问属性: name
3. 安全性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确保产品的数量不能被设置为负值,从而在电商上下文中执行了一个业务规则。