理解ES6 Proxy：从基础使用到实际场景
今天我们来聊聊JavaScript中的Proxy，这个功能很实用，但很多人对它还不太熟悉。
Proxy是什么？
Proxy是ES6引入的新特性，中文意思是"代理"。它的作用是在一个对象外面包一层，所有对这个对象的操作都要经过这层代理。
简单来说，Proxy就像一个中间人。你想访问一个对象时，必须先经过这个中间人同意。这个中间人可以决定是放行你的操作，还是进行一些处理。
与之前的Object.defineProperty相比，Proxy有几个明显优势：
能拦截的操作更多：可以监听13种不同的对象操作
使用更简单：不需要提前定义要监听的属性
支持的类型更广：可以代理数组、函数等
这就是为什么vue3选择用Proxy重写响应式系统。
Proxy的基本用法
创建Proxy
const proxy = new Proxy(target, handler);这里有两个重要参数：
target：要被代理的目标对象
handler：包含各种拦截方法的对象
常用的拦截方法
读写属性拦截（get和set）
const userValidator = {
set(target, prop, value) {
// 验证年龄数据
if (prop === 'age') {
if (!Number.isInteger(value) || value < 0 || value > 120) {
throw new Error(`年龄无效：${value}`);
}
}
// 设置属性值
target[prop] = value;
return true;
},
get(target, prop) {
// 如果属性不存在，返回默认值
if (!(prop in target)) {
return '未设置';
}
return target[prop];
}
};
const user = new Proxy({}, userValidator);
user.name = '小明'; // 正常设置
user.age = 25; // 正常设置
console.log(user.gender); // 输出"未设置"
user.age = 150; // 报错：年龄无效函数调用拦截（apply）
const addProxy = new Proxy(function(a, b) {
return a + b;
}, {
apply(target, thisArg, args) {
console.log(`计算加法：${args[0]} + ${args[1]}`);
// 检查参数是不是数字
if (!args.every(Number.isFinite)) {
throw new Error('参数必须是数字');
}
return target.apply(thisArg, args);
}
});
addProxy(2, 3); // 输出"计算加法：2+3"，返回5
addProxy(2, '3'); // 报错构造函数拦截（construct）
const UserProxy = new Proxy(class {
constructor(name) {
this.name = name;
}
}, {
construct(target, args) {
console.log(`创建用户：${args[0]}`);
// 创建实例并添加额外属性
const instance = new target(...args);
instance.createTime = new Date();
return instance;
}
});
const user = new UserProxy('张三');
// 输出"创建用户：张三"
// user对象包含name和createTime属性Proxy的实际应用场景
数据验证
在表单处理或配置项验证时很好用：
const priceHandler = {
set(target, prop, value) {
if (prop.includes('Price') && (typeof value !== 'number' || value <= 0)) {
throw new Error(`价格无效：${value}`);
}
target[prop] = value;
return true;
}
};
const product = new Proxy({ name: '手机' }, priceHandler);
product.salePrice = 2999; // 正常
product.salePrice = -100; // 报错响应式编程
Vue3的响应式系统就是基于Proxy：
function reactive(target) {
return new Proxy(target, {
get(target, prop) {
console.log(`读取属性：${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`设置属性：${prop} = ${value}`);
target[prop] = value;
return true;
}
});
}
const state = reactive({ count: 0 });
state.count++; // 输出"读取属性：count"和"设置属性：count = 1"日志记录
自动记录对象操作，方便调试：
function createLogger(target, name) {
return new Proxy(target, {
get(target, prop) {
console.log(`[${name}] 读取属性 ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`[${name}] 设置属性 ${prop} = ${value}`);
target[prop] = value;
return true;
}
});
}
const data = createLogger({ name: '李四' }, '用户数据');
data.age = 25; // 输出"[用户数据] 设置属性 age = 25"
console.log(data.name); // 输出"[用户数据] 读取属性 name"权限控制
保护敏感数据，限制某些操作：
function createSecureObject(data) {
const privateKeys = ['password', 'token'];
return new Proxy(data, {
get(target, prop) {
if (privateKeys.includes(prop)) {
throw new Error('无权访问私有属性');
}
return target[prop];
},
set(target, prop, value) {
if (privateKeys.includes(prop)) {
throw new Error('无权修改私有属性');
}
target[prop] = value;
return true;
}
});
}
const user = createSecureObject({
name: '王五',
password: '123456'
});
console.log(user.name); // 正常
console.log(user.password); // 报错数组操作拦截
const arrayHandler = {
set(target, prop, value) {
console.log(`数组操作：设置 ${prop} 为 ${value}`);
target[prop] = value;
return true;
},
get(target, prop) {
if (prop === 'push') {
return function(...args) {
console.log(`向数组添加元素：${args}`);
return Array.prototype.push.apply(target, args);
};
}
return target[prop];
}
};
const list = new Proxy([], arrayHandler);
list.push('苹果', '香蕉'); // 输出"向数组添加元素：苹果,香蕉"
list[0] = '橙子'; // 输出"数组操作：设置 0 为 橙子"使用注意事项
浏览器兼容性
Proxy在现代浏览器中支持很好，但不支持IE。如果需要支持老版本浏览器，要有备用方案。
性能考虑
Proxy会带来一些性能开销，但在大多数情况下影响很小。只有在性能要求极高的场景才需要考虑这个问题。
this指向
在Proxy的拦截方法中，this的指向需要注意。通常建议使用Reflect方法来保持正确的上下文。
const handler = {
get(target, prop, receiver) {
// 使用Reflect保持正确的this指向
return Reflect.get(target, prop, receiver);
}
};无法代理的情况
某些内置对象（如Date、Map等）的内部属性无法被Proxy拦截，这是JavaScript引擎的限制。
实用技巧
链式操作拦截
const chainHandler = {
get(target, prop) {
if (prop === 'double') {
return function() {
target.value *= 2;
return proxy; // 返回代理本身，支持链式调用
};
}
return target[prop];
}
};
const obj = { value: 5 };
const proxy = new Proxy(obj, chainHandler);
proxy.double().double();
console.log(obj.value); // 输出20默认值处理
const withDefaults = new Proxy({}, {
get(target, prop) {
if (prop in target) {
return target[prop];
}
// 为不存在的属性提供默认值
if (prop === 'length') return 0;
if (prop === 'timestamp') return Date.now();
return undefined;
}
});
console.log(withDefaults.length); // 输出0
console.log(withDefaults.timestamp); // 输出当前时间戳总结
Proxy是JavaScript中很强大的功能，它让我们能够更灵活地控制对象的行为。无论是数据验证、日志记录，还是实现响应式系统，Proxy都能派上用场。
虽然有一些使用限制，但在现代Web开发中，Proxy已经成为不可或缺的工具。掌握好Proxy，能让你的代码更加健壮和灵活。
建议在实际项目中多尝试使用Proxy，你会发现它在很多场景下都能简化代码，提高开发效率。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
