什么是 Proxy
Proxy 是 ES6 中引入的一个新特性，它可以拦截并重定义对象的基本操作，例如读取、写入和删除属性等。在 ES12 中，Proxy 更加强大，它可以拦截更多操作，例如函数调用和构造函数调用等。
Proxy 的应用
1. 数据校验
在前端开发中，数据校验是非常常见的需求。使用 Proxy 可以方便地实现数据校验的功能。例如下面的代码：
// javascriptcn.com 代码示例
const validator = {
set(target, key, value) {
if (key === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
target[key] = value;
return true;
}
};
const person = new Proxy({}, validator);
person.age = 20; // 正常设置
person.age = '20'; // 报错：Age must be a number在上面的代码中，我们定义了一个 validator 对象，它是一个 Proxy 对象。当我们设置 person 对象的 age 属性时，会触发 validator 对象的 set 方法。在 set 方法中，我们判断了如果 key 为 age 且 value 不是一个数字，就会抛出一个类型错误。如果设置正常，我们就将属性值设置到 target 对象中。
2. 对象代理
在前端开发中，我们经常需要将一个对象的属性映射到另一个对象的属性上。使用 Proxy 可以方便地实现对象代理的功能。例如下面的代码：
// javascriptcn.com 代码示例
const obj1 = { name: 'Tom', age: 20 };
const obj2 = new Proxy({}, {
get(target, key) {
return obj1[key];
},
set(target, key, value) {
obj1[key] = value;
return true;
}
});
console.log(obj2.name); // Tom
console.log(obj2.age); // 20
obj2.age = 21;
console.log(obj1.age); // 21在上面的代码中，我们定义了两个对象 obj1 和 obj2。当我们访问 obj2 的属性时，会触发 obj2 对象的 get 方法，该方法会返回 obj1 对象的对应属性的值。当我们设置 obj2 的属性时，会触发 obj2 对象的 set 方法，该方法会将属性值设置到 obj1 对象中。
3. 函数代理
在前端开发中，我们经常需要对函数的返回值进行处理。使用 Proxy 可以方便地实现函数代理的功能。例如下面的代码：
// javascriptcn.com 代码示例
function add(a, b) {
return a + b;
}
const proxyAdd = new Proxy(add, {
apply(target, thisArg, args) {
const result = target.apply(thisArg, args);
return result * 2;
}
});
console.log(proxyAdd(1, 2)); // 6在上面的代码中，我们定义了一个 add 函数和一个 proxyAdd 对象。当我们调用 proxyAdd 函数时，会触发 proxyAdd 对象的 apply 方法，该方法会调用原始的 add 函数，并将返回值乘以 2。
常见错误解决方案
1. TypeError: 'set' on proxy: trap returned falsish for property
当我们在 Proxy 对象的 set 方法中返回 false 或 undefined 时，会触发该错误。该错误通常是由于我们在 set 方法中没有正确地返回 true，导致操作未被成功执行。例如下面的代码：
// javascriptcn.com 代码示例
const obj = new Proxy({}, {
set(target, key, value) {
if (typeof value !== 'number') {
return false; // 错误的返回值
}
target[key] = value;
}
});
obj.age = 20; // 正常设置
obj.age = '20'; // 报错：TypeError: 'set' on proxy: trap returned falsish for property 'age'在上面的代码中，我们在 set 方法中使用了错误的返回值。当我们设置 obj 对象的 age 属性时，如果属性值不是一个数字，就会触发该错误。为了解决该错误，我们需要在 set 方法中正确地返回 true。
2. TypeError: 'apply' on proxy: trap returned falsish for property
当我们在 Proxy 对象的 apply 方法中返回 false 或 undefined 时，会触发该错误。该错误通常是由于我们在 apply 方法中没有正确地返回函数的返回值，导致操作未被成功执行。例如下面的代码：
// javascriptcn.com 代码示例
function add(a, b) {
return a + b;
}
const proxyAdd = new Proxy(add, {
apply(target, thisArg, args) {
if (args.some(arg => typeof arg !== 'number')) {
return false; // 错误的返回值
}
const result = target.apply(thisArg, args);
return result * 2;
}
});
console.log(proxyAdd(1, 2)); // 6
console.log(proxyAdd(1, '2')); // 报错：TypeError: 'apply' on proxy: trap returned falsish for property 'apply'在上面的代码中，我们在 apply 方法中使用了错误的返回值。当我们调用 proxyAdd 函数时，如果函数的参数中有一个不是数字，就会触发该错误。为了解决该错误，我们需要在 apply 方法中正确地返回函数的返回值。
总结
Proxy 是一个非常强大的特性，它可以拦截并重定义对象的基本操作，例如读取、写入和删除属性等。在 ES12 中，Proxy 更加强大，它可以拦截更多操作，例如函数调用和构造函数调用等。在前端开发中，我们可以使用 Proxy 实现数据校验、对象代理和函数代理等功能。在使用 Proxy 时，我们需要注意常见的错误，例如 'set' on proxy: trap returned falsish for property 和 'apply' on proxy: trap returned falsish for property 等，需要及时解决。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656f15ecd2f5e1655d76eb66