在 ES10 中，Proxy 对象是一个新的内置对象，它可以用于拦截并自定义 JavaScript 中的一些底层操作，例如：属性查找、赋值、函数调用等等。Proxy 对象的出现使得我们可以更加灵活地控制对象的行为，从而实现更加复杂的逻辑。
Proxy 对象的基本用法
在 ES10 中，我们可以使用 Proxy 构造函数来创建一个 Proxy 对象。Proxy 的基本语法如下：
const proxy = new Proxy(target, handler);
其中，target 是要拦截的对象，handler 是一个对象，它定义了一些拦截器函数，用于拦截一些底层操作。例如，我们可以使用 get 拦截器函数来拦截属性的读取操作：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18
};
const handler = {
get(target, key) {
console.log(`正在获取属性 ${key}`);
return target[key];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 正在获取属性 name，张三
console.log(proxy.age); // 正在获取属性 age，18在上面的代码中，我们使用 get 拦截器函数来拦截了 proxy 对象的属性读取操作。当我们读取 proxy 对象的属性时，get 拦截器函数会被调用，并输出一些调试信息。
Proxy 对象的高级用法
除了基本的拦截操作之外，Proxy 对象还支持一些高级的用法，例如：拦截函数调用、拦截属性赋值、拦截属性删除等等。下面是一些示例代码：
拦截函数调用
我们可以使用 apply 拦截器函数来拦截函数的调用操作。例如，我们可以使用 apply 拦截器函数来实现一个简单的函数计时器：
// javascriptcn.com 代码示例
function createTimer(fn) {
const handler = {
apply(target, thisArg, args) {
const start = Date.now();
const result = Reflect.apply(target, thisArg, args);
const end = Date.now();
console.log(`函数 ${target.name} 耗时 ${end - start} 毫秒`);
return result;
}
};
return new Proxy(fn, handler);
}
function add(a, b) {
return a + b;
}
const addWithTimer = createTimer(add);
console.log(addWithTimer(1, 2)); // 函数 add 耗时 0 毫秒，3在上面的代码中，我们使用 apply 拦截器函数来拦截了 addWithTimer 函数的调用操作。当我们调用 addWithTimer 函数时，apply 拦截器函数会被调用，并输出函数的执行时间。
拦截属性赋值
我们可以使用 set 拦截器函数来拦截属性的赋值操作。例如，我们可以使用 set 拦截器函数来实现一个简单的属性验证器：
// javascriptcn.com 代码示例
const target = {};
const handler = {
set(target, key, value) {
if (typeof value !== 'number') {
throw new TypeError('属性必须为数字');
}
target[key] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
proxy.age = 18; // 正常赋值
proxy.age = '18'; // 抛出 TypeError: 属性必须为数字在上面的代码中，我们使用 set 拦截器函数来拦截了 proxy 对象的属性赋值操作。当我们给 proxy 对象的属性赋值时，set 拦截器函数会被调用，并进行属性验证。
拦截属性删除
我们可以使用 deleteProperty 拦截器函数来拦截属性的删除操作。例如，我们可以使用 deleteProperty 拦截器函数来实现一个简单的防止误删除的对象：
// javascriptcn.com 代码示例
const target = {
name: '张三',
age: 18
};
const handler = {
deleteProperty(target, key) {
if (key === 'name') {
throw new Error('不能删除 name 属性');
}
delete target[key];
return true;
}
};
const proxy = new Proxy(target, handler);
delete proxy.age; // 正常删除
delete proxy.name; // 抛出 Error: 不能删除 name 属性在上面的代码中，我们使用 deleteProperty 拦截器函数来拦截了 proxy 对象的属性删除操作。当我们删除 proxy 对象的属性时，deleteProperty 拦截器函数会被调用，并进行属性验证。
总结
通过本文的介绍，我们了解了 ES10 中 Proxy 对象的基本用法和一些高级用法。使用 Proxy 对象可以使我们更加灵活地控制对象的行为，从而实现更加复杂的逻辑。在实际开发中，我们可以根据自己的需求来选择使用合适的拦截器函数，从而实现自己想要的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ecfa2d2f5e1655d716cf0