什么是 Proxy 对象
在 ES6 中，引入了一种新的机制 Proxy（代理），它允许你创建一个代理对象，用于拦截对目标对象的访问请求。简单的说，就是用一个对象来“代理”其他不同的对象，而对这些对象的访问，都会经过代理对象的处理。
这样做的好处是，我们可以在代理对象中进行一些额外的操作，例如修改对象属性、添加验证、监控对象等等。可以说，使用 Proxy 对象为我们提供了更加灵活和精细的对象操作方式。
如何创建 Proxy 对象
要创建一个 Proxy 对象，我们可以使用 new Proxy(target, handler) 方法，其中 target 表示需要代理的目标对象，handler 表示代理对象上的操作处理函数。
下面是一个创建 Proxy 对象的简单示例：
// javascriptcn.com 代码示例
const targetObj = {
name: 'Tom',
age: 18
};
const handler = {
get(target, prop, receiver) {
console.log(`获取对象属性：${prop}`);
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`设置对象属性：${prop} = ${value}`);
return Reflect.set(target, prop, value, receiver);
}
};
const proxyObj = new Proxy(targetObj, handler);在上面的例子中，我们创建了一个目标对象 targetObj，它有两个属性 name 和 age。然后，我们定义了一个处理器对象 handler，其中包含了两个处理函数 get 和 set。get 函数用于获取对象属性时执行，set 函数用于设置对象属性时执行，并且在这两个函数中都输出了一些信息。最后，我们使用 new Proxy(targetObj, handler) 创建了一个代理对象 proxyObj。
Proxy 对象的一些示例
下面我们来介绍一些常用的 Proxy 对象示例。
1. 属性访问拦截
我们可以使用 Proxy 对象来拦截属性的访问请求，从而实现一些额外的逻辑操作。
// javascriptcn.com 代码示例
const obj = { name: 'Tom', age: 18 };
const handler = {
get(target, prop, receiver) {
console.log(`获取对象属性：${prop}`);
if (prop === 'gender') {
return '男';
}
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`设置对象属性：${prop} = ${value}`);
return Reflect.set(target, prop, value, receiver);
}
};
const proxyObj = new Proxy(obj, handler);
console.log(proxyObj.name); // 输出：Tom
console.log(proxyObj.gender); // 输出：男
proxyObj.gender = '女'; // 输出：设置对象属性：gender = 女
console.log(proxyObj.gender); // 输出：女在上面的示例中，我们定义了 get 函数和 set 函数来拦截属性的读取和修改，如果请求的属性是 gender，那么就返回固定的值 "男"，否则调用 Reflect.get 和 Reflect.set 方法来完成取值和赋值的操作。
2. 数组操作拦截
Proxy 对象还可以拦截数组的 push、pop、shift、unshift、splice 等操作。
// javascriptcn.com 代码示例
const arr = [1, 2, 3];
const handler = {
get(target, prop, receiver) {
console.log(`获取数组元素：${prop}`);
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`修改数组元素：${prop} = ${value}`);
return Reflect.set(target, prop, value, receiver);
},
apply(target, thisArg, args) {
console.log(`调用数组方法：${target.name}(${args})`);
return Reflect.apply(target, thisArg, args);
}
};
const proxyArr = new Proxy(arr, handler);
proxyArr.push(4); // 输出：调用数组方法：push(4)
proxyArr.pop(); // 输出：调用数组方法：pop()
proxyArr.shift(); // 输出：调用数组方法：shift()
proxyArr.unshift(0); // 输出：调用数组方法：unshift(0)
proxyArr.splice(1, 1); // 输出：调用数组方法：splice(1,1)在上面的示例中，我们定义了一个处理器对象 handler，包含了 get、set 和 apply 函数。当调用数组方法时，会触发 apply 函数的执行，从而实现了对数组方法操作的拦截和日志记录。
3. 对象操作拦截
Proxy 对象也可以拦截对象的方法调用，例如下面的例子：
// javascriptcn.com 代码示例
const obj = {
sayHello(name) {
console.log(`Hello, ${name}!`);
}
};
const handler = {
get(target, prop, receiver) {
console.log(`获取对象属性：${prop}`);
return Reflect.get(target, prop, receiver);
},
apply(target, thisArg, args) {
console.log(`调用对象方法：${target.name}(${args})`);
return Reflect.apply(target, thisArg, args);
}
};
const proxyObj = new Proxy(obj, handler);
proxyObj.sayHello('Tom'); // 输出：调用对象方法：sayHello(Tom)在上面的示例中，我们定义了一个对象 obj，它有一个名为 sayHello 的方法，并且创建了一个代理对象 proxyObj。通过拦截 apply 函数，我们可以实现对 sayHello 方法的拦截和日志记录。
总结
在本文中，我们详细介绍了 ES6 中 Proxy 对象的概念和使用方法，并包含了丰富的示例代码。通过学习和实践，我们可以发现 Proxy 对象作为一种新的代理机制，为我们提供了更加灵活和精细的对象操作方式，可以实现拦截、修改、验证、监控等功能，有助于提高我们的开发效率和代码质量。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cba797d4982a6ebe55e96