在前端开发中，我们把代码组织成对象来提高代码的可读性和可维护性。但是，对象可能会被非授权者访问和修改。为了保障我们的数据和代码安全，我们需要使用一些手段实现对象的访问控制和保护。在 ES6 中，新增了一个 Proxy 对象，可以帮助我们解决这些问题。
Proxy 对象简介
Proxy 对象是 ES6 中新增的一个特性，它允许我们拦截并重新定义对象的行为。通过 Proxy 对象，我们可以控制对象的读写、属性的访问、方法的调用等。Proxy 对象提供了一个机制，可以在目标对象的基础上添加一层代理层，来捕获并拦截目标对象上的操作。我们可以认为 Proxy 对象是一个中介，它通过代理来管理目标对象的访问。
Proxy 对象的基本用法如下：
const target = {}; // 目标对象
const handler = {}; // 处理器对象
const proxy = new Proxy(target, handlers); // 创建 Proxy 对象在上面的代码中，target 代表目标对象，handler 代表处理器对象，我们将目标对象和处理器对象传给 Proxy 构造函数，从而创建一个 Proxy 对象。
Proxy 对象代理方式
在创建 Proxy 对象时，我们可以通过定义 handlers 对象来指定代理的方式。handlers 对象是一个集合，其属性名对应着被代理对象上的操作名（如 set、get、apply 等），属性值为相应的处理函数。当代理对象上有对应操作被触发时，代理对象就会调用相关的处理函数。
Proxy 对象示例
下面，我们来看一个具体的例子。假设我们有一个名为 user 的对象，它包含了用户的姓名和年龄。为了保护用户的信息，我们要求只有当用户的年龄大于等于 18 岁时，才能访问和修改用户的信息。我们可以通过 Proxy 对象来实现这些功能：
// javascriptcn.com 代码示例
const user = { name: 'Jack', age: 16 };
const handlers = {
get: function(target, property) {
if (property === 'age' && target[property] < 18) {
console.log('You are not allowed to see the age');
return undefined;
}
return target[property];
},
set: function(target, property, value) {
if (property === 'age' && value < 18) {
console.log('You are not allowed to change the age');
return false;
}
target[property] = value;
return true;
}
};
const proxy = new Proxy(user, handlers);
console.log(proxy.name); // Jack
console.log(proxy.age); // undefined
proxy.age = 20;
console.log(proxy.age); // 20
proxy.age = 16;
console.log(proxy.age); // 20在上面的代码中，我们定义了一个名为 handlers 的对象，它包含了两个方法 get 和 set，用于拦截读取和修改操作。在 get 方法中，我们检查了用户的年龄是否大于等于 18 岁，如果不是，则返回 undefined。在 set 方法中，我们检查了要修改的用户年龄是否大于等于 18 岁，如果不是，则返回 false，阻止修改操作。在代理对象上进行读写操作时，代理对象会自动调用对应的处理方法，从而实现了访问控制的功能。
总结
通过 Proxy 对象，我们可以对 JavaScript 对象进行访问控制和保护，从而提高我们的代码安全性。在使用时，我们要通过定义 handlers 对象来指定代理的方式，以达到我们需要的效果。需要注意的是，使用 Proxy 对象并不是完全保证数据的安全，只能提高代码的安全性。同时，使用 Proxy 对象的效率也是要考虑的，如果代理对象操作过于频繁，可能会影响程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654af7777d4982a6eb4eba2a