第 12 卷

第 12 / 19 卷日期：2025-12-31

Code block

1 2// 1. 定义目标对象

3const targetObj = { 4name: "张三",

5age: 20 6};

7 8// 2. 定义拦截器对象

9const handler = { 10// 拦截属性读取

11get(target, prop) {

12	console.log(`读取属性${prop}：`, target[prop]);
13	//若属性不存在，返回默认值，而非undefined
14	return prop in target ? target[prop] : "默认值";
15	},
16	//拦截属性赋值
17	set(target, prop, value) {
18	console.log(`赋值属性${prop}：`, value);
19	//对age属性进行赋值校验
20	if (prop === "age" && (typeof value !== "number" \|\| value < 0)) {
21	throw new Error("年龄必须是大于0的数字");
22	}
23	//将赋值操作传递给目标对象
24	target[prop] = value;
25	return true; //表示赋值成功（必须返回布尔值，否则严格模式报错）
26	},
27	//拦截in运算符
28	has(target, prop) {
29	console.log(`判断${prop}是否存在`);
30	return prop in target;
31	},
32	//拦截delete操作
33	deleteProperty(target, prop) {
34	console.log(`删除属性${prop}`);
35	delete target[prop];
36	return true;
37	}

44console.log(proxyObj.name); // 读取属性name：张三 → 输出张三 45console.log(proxyObj.gender); // 读取属性gender：undefined → 输出默认值

46 47proxyObj.age = 25; // 赋值属性age：25 → targetObj.age=25

48// proxyObj.age = -10; // 报错：年龄必须是大于0的数字 49

50	console.log("name" in proxyObj); //判断name是否存在→输出true
51	delete proxyObj.age; //删除属性age→targetObj.age被删除
52	console.log(proxyObj.age); //读取属性age：undefined→输出默认值

性，适用于表单验证、配置项校验等场景。

取和赋值，感知数据变化，进而触发视图更新。

监控或权限审计。

加载开销。

执行等增强功能。

21. 比较Proxy和Object.defineProperty之间的区别，特别是在用于对象

属性拦截和修改行为时，它们在功能、性能以及适用场景上有何异同？

Proxy（ES6）和 Object.defineProperty（ES5）均能实现对象属性的拦截与修改，但 Proxy 是更全面、更强大的拦截方案，二者的核心差异集中在功能覆盖、拦截粒度、使用便捷性等方

面，具体对比和说明如下：

对比维度	Proxy	Object.defineProperty
拦截范围	全面覆盖对象的所有操作：属	仅能拦截属性的读取
	性读取（get）、赋值	（getter）和赋值

写数组方法），对函数、集合类对象支持有限

属性新增/删除拦截	可通过set（新增属性赋	无法直接拦截属性新增（需配
	值）、deleteProperty	合
	（删除属性）直接拦截	Object.preventExtensi

ons 等方法间接限制），也无法拦截属性删除

复杂

；但在低版本浏览器或频繁操作单个属性的场景，可能略逊

兼容性仅支持ES6及以上环境（IE不支持ES5及以上环境（IE8+支支持，Edge 12+、Chrome 持，兼容性广泛）

49+支持）

二者的核心目的都是拦截对象属性的读写行为，实现数据校验、数据响应式、日志监控等功能，是 JavaScript中实现“数据劫持”的核心技术。

全站分卷索引 · 19 卷