在 JavaScript 中，对象是非常常见的数据类型。我们可以通过对象来组织数据，进行操作和管理。然而，有时候我们需要对对象进行更细粒度的控制，例如限制属性的访问，拦截属性的赋值和删除等等。这时候，ES6 中的 Proxy 就可以派上用场了。
什么是 Proxy
Proxy 是 ES6 中新增的一个特性，它可以用来创建一个代理对象，该对象可以对目标对象的访问进行拦截、过滤和修改。我们可以通过 Proxy 对象来对目标对象进行更细粒度的控制。
Proxy 的用法
Proxy 的用法非常简单，我们可以通过 Proxy 构造函数来创建一个代理对象。Proxy 构造函数接收两个参数，第一个参数是目标对象（即被代理的对象），第二个参数是一个处理程序对象（即拦截器对象），该处理程序对象可以拦截目标对象的各种操作，例如读取属性、写入属性、删除属性等等。
下面是一个使用 Proxy 的示例代码：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18,
};
const handler = {
get(target, prop) {
console.log(`读取属性 ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`写入属性 ${prop}，新值为 ${value}`);
target[prop] = value;
return true;
},
deleteProperty(target, prop) {
console.log(`删除属性 ${prop}`);
delete target[prop];
return true;
},
};
const proxy = new Proxy(target, handler);
proxy.name; // 读取属性 name
proxy.age = 20; // 写入属性 age，新值为 20
delete proxy.name; // 删除属性 name在上面的代码中，我们首先定义了一个目标对象 target，然后定义了一个处理程序对象 handler，该处理程序对象实现了对目标对象的读取属性、写入属性和删除属性的拦截。最后，我们通过 new Proxy(target, handler) 创建了一个代理对象 proxy，该代理对象可以对目标对象的访问进行拦截、过滤和修改。
在代理对象 proxy 中，我们可以通过读取属性、写入属性和删除属性的方式来访问目标对象 target。在这个过程中，代理对象会自动调用处理程序对象 handler 中对应的拦截方法，并输出相应的日志信息。
Proxy 的拦截器方法
在 Proxy 中，处理程序对象 handler 可以实现多种拦截器方法，以对目标对象的不同操作进行拦截。下面是一些常用的拦截器方法：
get(target, prop, receiver)
该方法用于拦截对目标对象的属性读取操作。当我们读取代理对象的某个属性时，该方法会被自动调用，并返回相应的属性值。
该方法接收三个参数：
target：目标对象，即被代理的对象。prop：属性名，即要读取的属性名。receiver：代理对象，即当前的代理对象。
该方法需要返回一个值，即被代理的对象的相应属性值。
下面是一个使用 get 方法的示例代码：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18,
};
const handler = {
get(target, prop) {
console.log(`读取属性 ${prop}`);
return target[prop];
},
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 读取属性 name，输出张三
console.log(proxy.age); // 读取属性 age，输出 18在上面的代码中，我们定义了一个 get 方法来拦截对目标对象的属性读取操作。当我们读取代理对象的某个属性时，该方法会被自动调用，并输出相应的日志信息。
set(target, prop, value, receiver)
该方法用于拦截对目标对象的属性写入操作。当我们向代理对象的某个属性写入值时，该方法会被自动调用，并更新相应的属性值。
该方法接收四个参数：
target：目标对象，即被代理的对象。prop：属性名，即要写入的属性名。value：属性值，即要写入的属性值。receiver：代理对象，即当前的代理对象。
该方法需要返回一个布尔值，表示是否写入成功。
下面是一个使用 set 方法的示例代码：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18,
};
const handler = {
set(target, prop, value) {
console.log(`写入属性 ${prop}，新值为 ${value}`);
target[prop] = value;
return true;
},
};
const proxy = new Proxy(target, handler);
proxy.age = 20; // 写入属性 age，新值为 20在上面的代码中，我们定义了一个 set 方法来拦截对目标对象的属性写入操作。当我们向代理对象的某个属性写入值时，该方法会被自动调用，并输出相应的日志信息。
deleteProperty(target, prop)
该方法用于拦截对目标对象的属性删除操作。当我们删除代理对象的某个属性时，该方法会被自动调用，并删除相应的属性。
该方法接收两个参数：
target：目标对象，即被代理的对象。prop：属性名，即要删除的属性名。
该方法需要返回一个布尔值，表示是否删除成功。
下面是一个使用 deleteProperty 方法的示例代码：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18,
};
const handler = {
deleteProperty(target, prop) {
console.log(`删除属性 ${prop}`);
delete target[prop];
return true;
},
};
const proxy = new Proxy(target, handler);
delete proxy.name; // 删除属性 name在上面的代码中，我们定义了一个 deleteProperty 方法来拦截对目标对象的属性删除操作。当我们删除代理对象的某个属性时，该方法会被自动调用，并输出相应的日志信息。
Proxy 的应用场景
Proxy 可以对对象进行更细粒度的控制，因此它有很多应用场景。下面是一些常见的应用场景：
数据校验
我们可以使用 Proxy 来对数据进行校验。例如，我们可以定义一个校验器对象，该对象可以拦截对目标对象的写入操作，并进行数据校验。如果数据不符合要求，就可以抛出一个异常或者返回一个错误码。
下面是一个使用 Proxy 进行数据校验的示例代码：
// javascriptcn.com 代码示例
const validator = {
set(target, prop, value) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('年龄必须是数字');
}
if (prop === 'name' && typeof value !== 'string') {
throw new TypeError('姓名必须是字符串');
}
target[prop] = value;
return true;
},
};
const person = new Proxy({}, validator);
person.name = '张三'; // 设置姓名为字符串，成功
person.age = '18'; // 设置年龄为字符串，抛出异常在上面的代码中，我们定义了一个校验器对象 validator，该对象可以拦截对目标对象的写入操作，并进行数据校验。如果数据不符合要求，就可以抛出一个异常或者返回一个错误码。
数据劫持
我们可以使用 Proxy 来对数据进行劫持。例如，我们可以定义一个劫持器对象，该对象可以拦截对目标对象的读取和写入操作，并进行数据处理。如果数据发生变化，就可以自动更新相关的数据。
下面是一个使用 Proxy 进行数据劫持的示例代码：
// javascriptcn.com 代码示例
const data = {
name: '张三',
age: 18,
};
const handler = {
get(target, prop) {
console.log(`读取属性 ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`写入属性 ${prop}，新值为 ${value}`);
target[prop] = value;
updateView(); // 更新视图
return true;
},
};
const proxy = new Proxy(data, handler);
function updateView() {
// 更新视图
}
proxy.age = 20; // 写入属性 age，新值为 20，自动更新视图在上面的代码中，我们定义了一个劫持器对象 handler，该对象可以拦截对目标对象的读取和写入操作，并进行数据处理。如果数据发生变化，就可以自动更新相关的数据。
权限控制
我们可以使用 Proxy 来进行权限控制。例如，我们可以定义一个权限管理器对象，该对象可以拦截对目标对象的读取和写入操作，并进行权限验证。如果用户没有权限，就可以拒绝访问。
下面是一个使用 Proxy 进行权限控制的示例代码：
// javascriptcn.com 代码示例
const data = {
name: '张三',
age: 18,
};
const manager = {
get(target, prop) {
if (prop === 'age') {
throw new Error('没有权限访问年龄');
}
return target[prop];
},
set(target, prop, value) {
if (prop === 'age') {
throw new Error('没有权限修改年龄');
}
target[prop] = value;
return true;
},
};
const proxy = new Proxy(data, manager);
console.log(proxy.name); // 读取属性 name，输出张三
console.log(proxy.age); // 拒绝访问属性 age，抛出异常
proxy.age = 20; // 拒绝修改属性 age，抛出异常在上面的代码中，我们定义了一个权限管理器对象 manager，该对象可以拦截对目标对象的读取和写入操作，并进行权限验证。如果用户没有权限，就可以拒绝访问。
总结
Proxy 是 ES6 中新增的一个特性，它可以用来创建一个代理对象，该对象可以对目标对象的访问进行拦截、过滤和修改。我们可以通过 Proxy 对象来对目标对象进行更细粒度的控制，例如限制属性的访问，拦截属性的赋值和删除等等。在实际开发中，Proxy 有很多应用场景，例如数据校验、数据劫持和权限控制等等。通过使用 Proxy，我们可以更好地管理和控制我们的代码，提高代码的可维护性和可复用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65878ca8eb4cecbf2dcc9bf0