ES6 中引入了 Proxy 对象，它允许你拦截并定义对象的基本行为，使得我们能够在对象上进行拦截和处理。在 ES7 中， Proxy 进一步得到增强，提供了更多的拦截和处理方法。本文将详细介绍如何使用 ES7 中的 Proxy 进行拦截和处理，帮助您更好地理解 Proxy 对象的使用。
直观了解 Proxy 对象的概念
在深入了解 ES7 中的 Proxy 对象之前，让我们先来了解一下 Proxy 对象的概念。
Proxy 可以理解为一个代理对象，我们通过使用代理对象来代替原对象进行操作。当然，代理对象不仅仅是一个代替原对象的对象，它还可以拦截和定义对象的基本行为。
ES7 中 Proxy 的基本用法
ES7 中，Proxy 对象的基本用法和 ES6 中基本一致，我们需要先实例化一个 Proxy 对象，然后重写它的行为方法。具体来说，我们可以使用 Proxy 构造函数，创建一个 Proxy 对象。
const target = {};
const handler = {};
const proxy = new Proxy(target, handler);上面的代码中，我们通过 new Proxy() 创建了一个代理对象，代理对象 proxy 代替了原对象 target 的操作。
Proxy 的拦截和处理方法
在 ES7 中，Proxy 对象提供了更多的拦截和处理方法，包括：
1. get
拦截对象属性的读取操作，当我们读取一个对象的属性时，可以通过实现 get() 方法对读取进行拦截和处理。
例如，下面的代码中，我们在读取对象属性时，通过 get() 方法对读取操作进行了拦截和修改。
const proxy = new Proxy({}, {
get: function(target, key, receiver) {
console.log(`读取 ${key} 属性`);
return Reflect.get(target, key, receiver);
}
});
proxy.name = 'Mark';
console.log(proxy.name);上述代码中，当我们访问 proxy 对象的 name 属性时，会自动调用 get() 方法进行拦截，输出 “读取 name 属性” 后，返回 proxy 对象的 name 属性值。
2. set
拦截对象属性的赋值操作，当我们对对象属性进行赋值时，可以通过实现 set() 方法对赋值操作进行拦截和处理。
例如，下面的代码中，我们在对对象属性进行赋值时，通过 set() 方法对赋值操作进行了拦截和修改。
const proxy = new Proxy({}, {
set: function(target, key, value, receiver) {
console.log(`设置 ${key} 属性为 ${value}`);
return Reflect.set(target, key, value, receiver);
}
});
proxy.name = 'Mark';
console.log(proxy.name);上述代码中，当我们给 proxy 对象的 name 属性赋值时，会自动调用 set() 方法进行拦截，输出 “设置 name 属性为 Mark” ，并给 name 属性赋值，最后输出 “Mark”。
3. apply
拦截函数的调用操作，并且可以修改函数的参数和返回值。当我们调用一个函数时，可以通过实现 apply() 方法对函数调用进行拦截和处理。
例如，下面的代码中，我们在调用 sum 函数时，通过 apply() 方法对调用操作进行了拦截和修改。
const sum = (...args) => args.reduce((prev, current) => prev + current);
const proxy = new Proxy(sum, {
apply: function(target, thisArg, argArray) {
console.log(`调用了函数 sum，参数为：${argArray.join(',')}`);
return Reflect.apply(target, thisArg, argArray);
}
});
proxy(1, 2, 3, 4);上述代码中，当我们调用 proxy(1, 2, 3, 4) 时，会自动调用 apply() 方法进行拦截，输出 “调用了函数 sum，参数为：1,2,3,4” ，并执行 sum 函数。
4. has
拦截 in 操作符的操作，当我们使用 in 操作符检查一个对象中是否具有某个属性时，可以通过实现 has() 方法对该操作进行拦截和处理。
例如，下面的代码中，我们在检查 proxy 对象中是否具有 name 属性时，通过 has() 方法对 in 操作进行了拦截和修改。
const proxy = new Proxy({}, {
has: function(target, key) {
console.log(`是否存在属性 ${key}`);
return Reflect.has(target, key);
}
});
proxy.name = 'Mark';
console.log('name' in proxy);上述代码中，当我们使用 in 操作符检查 proxy 对象中是否具有 name 属性时，会自动调用 has() 方法进行拦截，输出 “是否存在属性 name” ，并返回 true。
5. deleteProperty
拦截对象属性的删除操作，当我们删除一个对象属性时，可以通过实现 deleteProperty() 方法对该操作进行拦截和处理。
例如，下面的代码中，我们在删除 proxy 对象的 name 属性时，通过 deleteProperty() 方法对删除操作进行了拦截和修改。
const proxy = new Proxy({}, {
deleteProperty: function(target, key) {
console.log(`删除属性 ${key}`);
return Reflect.deleteProperty(target, key);
}
});
proxy.name = 'Mark';
delete proxy.name;上述代码中，当我们删除 proxy 对象的 name 属性时，会自动调用 deleteProperty() 方法进行拦截，输出 “删除属性 name”。
Proxy 的链式调用
以上我们已经了解了 Proxy 对象的基本用法和拦截和处理方法。有趣的是，Proxy 可以进行链式调用，通过实现多个拦截和处理方法对对象的行为进行细分和操作。
例如，下面的代码中，我们通过实现 get() 和 set() 方法来对对象的行为进行拦截和处理。
// javascriptcn.com 代码示例
const proxy = new Proxy({}, {
get: function(target, key, receiver) {
console.log(`读取 ${key} 属性`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log(`设置 ${key} 属性为 ${value}`);
return Reflect.set(target, key, value, receiver);
}
});
proxy.name = 'Mark';
console.log(proxy.name);输出结果会依次为：
设置 name 属性为 Mark 读取 name 属性 Mark
上述代码中，我们通过实现 get() 和 set() 方法来对对象的行为进行拦截和处理。可以看到，在对象读取和设置属性时，我们都执行了拦截和修改操作。
总结
本文详细介绍了如何使用 ES7 中的 Proxy 进行拦截和处理。通过该文章，我们了解了 Proxy 的基本概念、使用方法和拦截和处理方法，帮助我们更好地理解 Proxy 对象的使用。如果你想进一步了解 Proxy 对象的更多用法和应用场景，可以参考相关资料进行深入研究，相信能够帮助你更好地掌握前端技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540cb877d4982a6eba5b6f6