什么是Proxy
JavaScript 中的 Proxy 是 ES6 中新增的对象,
Proxy
是JavaScript中的内置对象,它提供了一种机制,可以拦截并自定义各种操作,如属性访问、函数调用、构造函数调用等。Proxy
的构造函数接受两个参数:目标对象(被代理的对象)和一个处理器对象(用于定义拦截器)。// 写法:target是目标对象,handler是处理器对象 const proxy = new Proxy(target, handler);
Proxy的拦截器【处理器对象】(handler)
拦截器是一个包含各种拦截方法的对象,用于定义在代理对象上执行的操作。
常用的拦截方法包括:get
、set
、apply
、construct、deleteProperty
、has
、getOwnPropertyDescriptor
等。【这些拦截方法会在代理对象进行对应操作时自动触发】
- get(target, property, receiver):拦截对目标对象属性的读取操作
- set(target, property, value, receiver):拦截对目标对象属性的赋值操作。
- apply(target, thisArg, argumentsList):拦截对目标对象的函数调用。
- construct(target, argumentsList, newTarget):拦截对目标对象的构造函数调用。
Proxy的应用场景
数据校验和保护
在属性访问和赋值操作中校验数据的合法性。
// 定义待验证的对象
const user = {
name: '',
age: 0
};
// 创建代理对象
const userProxy = new Proxy(user, {
set(target, property, value) {
// 进行数据合法性验证
if (property === 'name') {
if (typeof value !== 'string' || value === '') {
throw new Error('姓名必须是非空字符串');
}
} else if (property === 'age') {
if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) {
throw new Error('年龄必须是非负整数');
}
}
// 合法性验证通过,设置属性值
target[property] = value;
return true;
}
});
// 使用代理对象进行属性访问和赋值
userProxy.name = 'John';
console.log(userProxy.name); // 输出: "John"
userProxy.age = 25;
console.log(userProxy.age); // 输出: 25
// 非法赋值会触发异常
try {
userProxy.name = '';
} catch (error) {
console.log(error.message); // 输出: "姓名必须是非空字符串"
}
try {
userProxy.age = '30';
} catch (error) {
console.log(error.message); // 输出: "年龄必须是非负整数"
}
日志记录
拦截对对象的操作以记录日志。
// 定义待记录日志的对象
const person = {
name: 'John',
age: 30
};
// 创建代理对象
const personProxy = new Proxy(person, {
get(target, property) {
// 记录属性访问日志
console.log(`访问属性: ${property}`);
// 返回属性值
return target[property];
},
set(target, property, value) {
// 记录属性赋值日志
console.log(`设置属性: ${property},值: ${value}`);
// 设置属性值
target[property] = value;
return true;
},
deleteProperty(target, property) {
// 记录属性删除日志
console.log(`删除属性: ${property}`);
// 删除属性
delete target[property];
return true;
}
});
// 使用代理对象进行属性访问、赋值和删除
console.log(personProxy.name); // 输出:访问属性: name -> "John"
personProxy.age = 35; // 输出:设置属性: age,值: 35
console.log(personProxy.age); // 输出:访问属性: age -> 35
delete personProxy.age; // 输出:删除属性: age
console.log(personProxy.age); // 输出:访问属性: age -> undefined
数据绑定和观察
通过拦截器实现数据绑定和观察模式。
// 创建数据对象
const data = {
name: 'John',
age: 30
};
// 创建观察者对象,用于监听数据变化
const observer = {
notify(target, property) {
console.log(`属性 ${property} 发生变化,新值为: ${target[property]}`);
}
};
// 创建代理对象
const dataProxy = new Proxy(data, {
set(target, property, value) {
// 设置属性值
target[property] = value;
// 通知观察者属性变化
observer.notify(target, property);
return true;
}
});
// 修改代理对象的属性值
dataProxy.name = 'Alice'; // 输出:属性 name 发生变化,新值为: Alice
dataProxy.age = 35; // 输出:属性 age 发生变化,新值为: 35
通过使用Proxy
对象,我们可以轻松地通过拦截器实现数据绑定和观察模式。在修改数据时,我们可以自动通知观察者,并做出相应的响应。这样可以实现数据与界面的自动同步、实时更新等功能。
此文章借鉴了一下博主的优秀文章
原文链接:https://blog.csdn.net/m0_49768044/article/details/131923030