在前端开发领域，JavaScript 是一种必不可少的语言。ES6 中引进了一种新的类类型 Proxy，Proxy 可以帮助我们更加方便地处理一些对象操作，同时也极大地增强了 JavaScript 语言的能力。本文就来详细介绍 ES6 中 Proxy 类的用法。
什么是 Proxy 类
Proxy 出现在 ES6 中，是一种特殊的对象类型。它能够在对象层面上拦截并改变操作行为，可以实现一些目前无法通过 Object.defineProperty() 实现的功能，比如拦截数组越界访问、拦截对象属性访问等。
创建 Proxy
要使用 Proxy，我们需要新建一个 Proxy 对象，形式如下：
let proxy = new Proxy(target, handler);
其中 target 为需要代理的对象，handler 为一个对象，拦截器。当对 target 进行操作时，可以根据拦截器里面定义的规则进行相应的操作。
拦截器的方法
拦截器（handler）是一个对象，其中可以定义一系列方法。拦截器方法主要有以下几种：
get
get 方法用于拦截属性的读取操作。只要对象属性被读取，就会触发 get 方法。方法形式如下：
const handler = {
get(target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
}
};set
set 方法用于拦截属性的赋值操作。只要对象属性被赋值，就会触发 set 方法。方法形式如下：
const handler = {
set(target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
};apply
apply 方法用于拦截函数的调用操作。只要函数被调用，就会触发 apply 方法。该方法接受三个参数：目标对象 target、目标对象的上下文对象 this 和目标对象的参数数组 argArray。方法形式如下：
const handler = {
apply(target, thisArg, argArray) {
console.log(`Calling ${target.name} with args ${argArray}`);
return Reflect.apply(target, thisArg, argArray);
}
};has
has 方法用于拦截 in 操作符。只要对象属性被 in 运算符检查，就会触发 has 方法。该方法接受两个参数：目标对象 target 和需要检查的属性 key。方法形式如下：
const handler = {
has(target, key) {
console.log(`Checking property ${key} in target object`);
return Reflect.has(target, key);
}
};deleteProperty
deleteProperty 方法用于拦截 delete 操作符。只要对象属性被删除，就会触发 deleteProperty 方法。该方法接受两个参数：目标对象 target 和需要被删除的属性 key。方法形式如下：
const handler = {
deleteProperty(target, key) {
console.log(`Deleting property ${key} from target object`);
return Reflect.deleteProperty(target, key);
}
};其他拦截器方法
除了上述方法之外，还有其他一些拦截器方法，比如 construct()、getOwnPropertyDescriptor()、defineProperty() 等，这里就不一一赘述了。
Proxy 的示例
下面给出一个使用 Proxy 拦截器方法的示例代码：
// javascriptcn.com 代码示例
const target = {};
const handler = {
get(target, key, receiver) {
console.log(`读取属性 ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`设置属性 ${key} 的值为 ${value}`);
return Reflect.set(target, key, value, receiver);
}
};
const proxy = new Proxy(target, handler);
proxy.name = '张三'; // 输出：设置属性 name 的值为 张三
console.log(proxy.name); // 输出：读取属性 name在上面的示例代码中，我们建立了一个 target 对象，然后使用 Proxy 创建了一个对象 proxy。handler 中的 get 和 set 方法会对 target 对象的读取和赋值操作进行拦截，并在控制台输出信息。
总结
通过 Proxy 类，我们可以更加方便地处理对象操作，并且在处理上拥有更强的自由度。但是使用 Proxy 时也需要注意，拦截器的操作不可乱用，避免造成逻辑混乱和表现异常。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653624bb7d4982a6ebe058a0