什么是 Proxy 代理？
Proxy 是 ES6 中新增的一个操作对象的 API，它允许你创建一个代理对象，用于控制对另一个对象的访问。Proxy 对象可以拦截并重定义 JavaScript 的一些底层操作，比如属性访问、赋值、函数调用等等。
如何使用 Proxy 代理？
首先，我们需要创建一个 Proxy 对象，Proxy 构造函数接受两个参数：
- 被代理的对象（target）
- 一个处理程序对象（handler）
const target = {};
const handler = {};
const proxy = new Proxy(target, handler);当我们对代理对象进行操作时，处理程序对象中对应的方法会被调用，从而实现对原对象的拦截和重定义。
Proxy 的处理程序对象
处理程序对象是 Proxy 的核心，它定义了拦截器函数，用于拦截对代理对象的各种操作。处理程序对象可以定义以下拦截器函数：
get(target, property, receiver)：拦截对目标对象属性的读取操作。set(target, property, value, receiver)：拦截对目标对象属性的赋值操作。has(target, property)：拦截in操作符。apply(target, thisArg, argumentsList)：拦截函数的调用操作。construct(target, argumentsList, newTarget)：拦截new操作符。
以下是一个简单的示例：
// javascriptcn.com 代码示例
const target = {
name: 'Tom',
age: 18
};
const handler = {
get(target, property, receiver) {
console.log(`Getting ${property}`);
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {
console.log(`Setting ${property} to ${value}`);
return Reflect.set(target, property, value, receiver);
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Getting name Tom
proxy.age = 20; // Setting age to 20在上面的示例中，我们定义了一个处理程序对象，其中 get 和 set 方法分别用于拦截对目标对象属性的读取和赋值操作。当我们读取代理对象的属性时，get 方法会被调用，并输出相应的日志信息。同样地，当我们对代理对象进行赋值操作时，set 方法会被调用，并输出相应的日志信息。
Proxy 的应用场景
1. 数据验证
Proxy 可以用于数据验证，我们可以在 set 方法中编写一些验证逻辑，从而确保数据的正确性。
// javascriptcn.com 代码示例
const person = {
name: '',
age: 0
};
const handler = {
set(target, property, value, receiver) {
if (property === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
if (property === 'name' && typeof value !== 'string') {
throw new TypeError('Name must be a string');
}
return Reflect.set(target, property, value, receiver);
}
};
const proxy = new Proxy(person, handler);
proxy.name = 'Tom';
proxy.age = 18;
console.log(proxy); // { name: 'Tom', age: 18 }
proxy.name = 123; // TypeError: Name must be a string
proxy.age = '18'; // TypeError: Age must be a number在上面的示例中，我们定义了一个 person 对象，其中包含了 name 和 age 两个属性。然后我们创建了一个代理对象 proxy，并在 set 方法中编写了一些验证逻辑。当我们对代理对象进行赋值操作时，验证逻辑会被触发，并抛出相应的错误信息。
2. 数据劫持
Proxy 可以用于数据劫持，我们可以在 get 和 set 方法中对数据进行操作，从而实现数据的双向绑定。
// javascriptcn.com 代码示例
const person = {
name: '',
age: 0
};
const inputName = document.getElementById('input-name');
const inputAge = document.getElementById('input-age');
const spanName = document.getElementById('span-name');
const spanAge = document.getElementById('span-age');
const handler = {
set(target, property, value, receiver) {
Reflect.set(target, property, value, receiver);
render();
return true;
}
};
const proxy = new Proxy(person, handler);
inputName.addEventListener('input', e => {
proxy.name = e.target.value;
});
inputAge.addEventListener('input', e => {
proxy.age = e.target.value;
});
function render() {
spanName.innerText = proxy.name;
spanAge.innerText = proxy.age;
}在上面的示例中，我们定义了一个 person 对象，其中包含了 name 和 age 两个属性。然后我们创建了一个代理对象 proxy，并在 set 方法中对数据进行了操作。当我们在输入框中输入数据时，代理对象的属性会被更新，并触发 set 方法中的渲染函数 render，从而实现了数据的双向绑定。
总结
Proxy 是 ES6 中新增的一个操作对象的 API，它允许你创建一个代理对象，用于控制对另一个对象的访问。Proxy 对象可以拦截并重定义 JavaScript 的一些底层操作，比如属性访问、赋值、函数调用等等。在实际开发中，Proxy 可以用于数据验证、数据劫持等场景，从而提高代码的可维护性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650dcf6a95b1f8cacd74f770