1. 什么是 Proxy 对象
Proxy 是 ES6 中新增的一个内置对象，用来拦截 JavaScript 操作。Proxy 可以拦截目标对象的多种操作，例如访问属性、赋值、函数调用等。通过使用 Proxy 对象，我们可以实现对目标对象的自定义行为，比如：数据验证，数据绑定，数据现场修改等。简单来说，就是可以控制对象的访问与操作行为。
Proxy 对象由两部分组成：Proxy 实例和处理程序对象(Handler)。Proxy 实例是我们要拦截的目标对象，处理程序对象是刷新操作、验证操作等的承载对象。
// 示例代码
let obj = new Proxy(target, handler)
2. Proxy 的基本使用
2.1 拦截对象属性访问
通过使用 get 方法对属性进行拦截，可以获取到目标对象的属性值，同时可以进行其他相关操作，例如数据校验、数据绑定等。
const user = { name: 'Jack', age: 22 }
const proxyUser = new Proxy(user, {
get(target, key, receiver) {
console.log(`getting ${key}!`)
return Reflect.get(target, key, receiver)
}
})
proxyUser.name // getting name!
// "Jack"
上述代码中，我们通过使用 get 对目标对象的属性进行拦截，输出了访问到的属性名。
2.2 拦截对象属性赋值
通过使用 set 方法，我们可以实现对目标对象的属性赋值进行拦截，这样可以同样拦截对象属性的删除行为。同时我们可以进行数据的修改与校验等相关操作。
const user = { name: 'Jack', age: 22 }
const proxyUser = new Proxy(user, {
set(target, key, value, receiver) {
console.log(`setting ${key}!`)
return Reflect.set(target, key, value, receiver)
}
})
proxyUser.name = "Tom" // setting name!
// "Tom"
上述代码中，我们通过使用 set 对目标对象的属性赋值进行拦截，输出了赋值的对应属性名。
3. Proxy 高级使用
3.1 拦截函数调用
通过使用 apply 方法对目标对象的函数进行拦截，我们可以得到函数的调用信息，包括拦截函数的参数、调用环境等，同时也可以对目标函数进行相应的操作，例如修正返回值、函数绑定、异常处理等。
const user = {
name: 'Tom',
sayHello(age) {
return `Hello ${this.name}, your age is ${age}`
}
}
const handler = {
apply(target, thisArg, argumentsList) {
console.log(`calling ${target.name}`)
console.log(argumentsList)
return Reflect.apply(target, thisArg, argumentsList)
}
}
const proxyUser = new Proxy(user.sayHello, handler)
proxyUser.call({ name: 'Jerry' }, 22)
// "calling sayHello"
// [22]
// "Hello Jerry, your age is 22"
上述示例拦截了目标对象的函数调用，其中 apply 拦截函数调用操作，拦截操作中可以对函数进行操作，这里我们通过输出函数调用信息来了解函数调用过程。
3.2 拦截对象接口操作
通过使用 get 方法和使用 Symbol.iterator 接口，我们可以拦截对象的接口操作，进而对操作进行一些定制化处理。
const arr = ['a', 'b', 'c']
const proxyArr = new Proxy(arr, {
get(target, key, receiver) {
if (key == Symbol.iterator) {
return function* () {
yield* target.map(item => `hello ${item}`)
}
}
return Reflect.get(target, key, receiver)
}
})
for (let item of proxyArr) {
console.log(item)
}
// "hello a"
// "hello b"
// "hello c"
上述示例中，我们拦截了数组的迭代器操作，输出了每个元素前缀为 "hello" 的项，得到了一个新数组。
小结
Proxy 对象是 ES6 中新增的一个内置对象，可以用来拦截 JavaScript 中的多种操作，包括访问属性、赋值、函数调用等。通过使用 Proxy 对象可以实现对目标对象的的数据验证、数据绑定、数据现场修改等操作。本文介绍了 Proxy 的基本使用方法和高级应用方法。了解 Proxy 对象的特性有助于我们更好地控制目标对象的访问和操作过程，实现对数据的有效监测和修正，为项目开发提供了新的思路。