ES12 Proxy 是 ECMAScript 2019 中引入的一个新特性，它可以用来拦截对象的操作，包括读取、赋值、函数调用等等。通过 Proxy，我们可以对对象进行更加精细的控制和管理，从而实现更加灵活和高效的编程。
什么是 Proxy
Proxy 是一个用来代理对象的构造函数，它可以对对象的操作进行拦截和处理。Proxy 接受两个参数，第一个参数是要代理的对象，第二个参数是一个处理器对象，用来处理对对象的操作。
const target = {};
const handler = {};
const proxy = new Proxy(target, handler);在上面的代码中，我们创建了一个空对象 target，并将它传入 Proxy 构造函数中作为要代理的对象。然后，我们创建了一个空的处理器对象 handler，并将它传入 Proxy 构造函数中作为处理器。最后，我们创建了一个代理对象 proxy，它会代理 target 对象，并在对 target 对象进行操作时，会调用 handler 中相应的处理函数。
Proxy 的处理器对象
Proxy 的处理器对象是一个包含各种处理函数的对象，用来处理对代理对象的操作。处理器对象可以包含以下几个处理函数：
- get：用来拦截对代理对象的属性读取操作。
- set：用来拦截对代理对象的属性赋值操作。
- apply：用来拦截对代理对象的函数调用操作。
- construct：用来拦截对代理对象的构造函数调用操作。
- has：用来拦截对代理对象的 in 操作符操作。
- deleteProperty：用来拦截对代理对象的 delete 操作符操作。
- defineProperty：用来拦截对代理对象的 Object.defineProperty() 操作。
- getOwnPropertyDescriptor：用来拦截对代理对象的 Object.getOwnPropertyDescriptor() 操作。
- getPrototypeOf：用来拦截对代理对象的 Object.getPrototypeOf() 操作。
- isExtensible：用来拦截对代理对象的 Object.isExtensible() 操作。
- ownKeys：用来拦截对代理对象的 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 操作。
- preventExtensions：用来拦截对代理对象的 Object.preventExtensions() 操作。
- setPrototypeOf：用来拦截对代理对象的 Object.setPrototypeOf() 操作。
Proxy 的示例
下面是一个使用 Proxy 进行对象拦截的示例。在这个示例中，我们创建了一个对象 user，它包含了用户的姓名和年龄属性。然后，我们使用 Proxy 对 user 对象进行了拦截，当对 user 对象进行属性读取或赋值操作时，会自动将属性名转换为大写字母格式。
// www.javascriptcn.com code example
const user = {
name: 'Alice',
age: 18
};
const handler = {
get(target, prop) {
return target[prop.toUpperCase()];
},
set(target, prop, value) {
target[prop.toUpperCase()] = value;
return true;
}
};
const proxy = new Proxy(user, handler);
console.log(proxy.name); // Alice
console.log(proxy.age); // 18
proxy.NAME = 'Bob';
proxy.AGE = 20;
console.log(proxy.name); // Bob
console.log(proxy.age); // 20在上面的代码中，我们创建了一个对象 user，它包含了用户的姓名和年龄属性。然后，我们创建了一个处理器对象 handler，它包含了 get 和 set 两个处理函数。在 get 处理函数中，我们将属性名转换为大写字母格式，并返回对应的属性值。在 set 处理函数中，我们将属性名转换为大写字母格式，并将属性值赋值给对应的属性。最后，我们创建了一个代理对象 proxy，它会代理 user 对象，并在对 user 对象进行属性读取或赋值操作时，会调用 handler 中相应的处理函数。
Proxy 的学习和指导意义
Proxy 是一个非常强大和灵活的特性，它可以用来实现各种各样的功能，例如数据绑定、数据校验、数据过滤、数据缓存等等。通过学习 Proxy，我们可以更加深入地理解 JavaScript 对象和原型链的机制，从而提高我们对 JavaScript 的理解和应用能力。
同时，Proxy 也是一个比较高级和复杂的特性，它需要我们具备一定的 JavaScript 基础和编程能力，才能够熟练地使用和掌握。因此，在学习 Proxy 的过程中，我们需要注重理论和实践相结合，不断地练习和实践，才能够掌握这个强大的特性，并将它应用到实际的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1006ea941bf713422a99b