ES6 Proxy特性详解
引言
ES6中的Proxy（代理）是一种元编程工具，它允许我们为JavaScript对象创建一个代理层，从而拦截并重新定义对该对象的基本操作。例如，属性访问、赋值以及函数调用等都可以通过代理进行控制。
创建Proxy实例
以下是创建Proxy对象的基本语法：
const proxy = new Proxy(target, handler);
- target: 被代理的目标对象。
- handler: 包含一系列方法的对象，用于定义代理的行为。
Handler中的常见陷阱
Handler对象定义了代理如何响应各种操作。以下是一些常用的陷阱（trap）：
- get(target, prop, receiver): 拦截属性读取。
- set(target, prop, value, receiver): 拦截属性赋值。
- has(target, prop): 拦截使用
in操作符检查属性是否存在。 - deleteProperty(target, prop): 拦截
delete操作符删除属性。 - apply(target, thisArg, args): 拦截函数调用。
- construct(target, args, newTarget): 拦截通过
new关键字创建实例。
代码示例
下面的代码展示了如何使用Proxy拦截属性的读写操作：
const data = { firstName: "Alice", lastName: "Smith" };
const traps = {
get(obj, key) {
console.log(`正在访问属性：${key}`);
return obj[key];
},
set(obj, key, val) {
console.log(`正在设置属性 ${key} 的值为 ${val}`);
obj[key] = val;
}
};
const userProxy = new Proxy(data, traps);
console.log(userProxy.firstName); // 输出: 正在访问属性：firstName
userProxy.lastName = "Johnson"; // 输出: 正在设置属性 lastName 的值为 Johnson
上述代码中，我们为data对象创建了一个代理userProxy。当读取或修改其属性时，相应的陷阱会被触发。
函数调用拦截
apply陷阱用于拦截函数调用。它可以修改函数行为或记录调用信息。以下是一个例子：
function sum(a, b) {
return a + b;
}
const functionTraps = {
apply(fn, context, args) {
console.log(`函数被调用，参数为：${args}`);
const result = fn(...args);
console.log(`函数返回结果为：${result}`);
return result;
}
};
const wrappedSum = new Proxy(sum, functionTraps);
wrappedSum(10, 20);
// 输出:
// 函数被调用，参数为：10,20
// 函数返回结果为：30
在这个例子中，wrappedSum是对sum函数的代理。每当调用wrappedSum时，都会触发apply陷阱，输出调用细节和返回值。
