现代 JavaScript 教程实战：用 Proxy 拦截不存在的属性读取并抛出错误（wrap 函数解析）

本篇文章基于现代 JavaScript 教程（zh.javascript.info）中「读取不存在的属性时出错」这一经典练习，完整讲解如何利用 Proxy 的 get 捕捉器，在程序尝试读取对象不存在的属性时立即抛出 ReferenceError，帮助开发者及早发现拼写错误与逻辑缺陷。读完本文，你将掌握 wrap(target) 函数的完整实现、get 捕捉器的三个参数语义、Reflect.get 的正确转发姿势，以及该方案在实际项目中的适用边界。

任务背景：为什么要在意"读取不存在的属性"

在 JavaScript 中，读取对象不存在的属性不会报错，而是静默返回 undefined：

let user = { name: "John" };

alert(user.age); // undefined

这种"宽容"行为是 JavaScript 的常见陷阱来源：当代码中出现属性名拼写错误（如 user.naem）、或对象结构发生变化导致字段缺失时，程序不会在读取处立刻失败，而是把 undefined 一路传递下去，最终可能在几十行之外的某个运算中爆出难以定位的诡异错误（例如 undefined 参与字符串拼接、算术运算产生 NaN）。

本任务的目标，就是创建一个代理（Proxy），让"读取不存在的属性"这个行为本身变成错误，从而把问题扼杀在发生的那一刻。完整任务说明见仓库中的 任务文件。

任务要求解析：wrap(target) 的预期行为

任务要求编写一个函数 wrap(target)：它接受一个 target 对象，返回一个"添加了此方面功能"的代理。预期行为非常直观：

let user = {
  name: "John"
};

function wrap(target) {
  return new Proxy(target, {
    /* 你的代码 */
  });
}

user = wrap(user);

alert(user.name); // John —— 存在的属性正常读取
alert(user.age);  // ReferenceError: Property doesn't exist: "age"

拆解需求可以得到三个明确的行为约束：

1. 存在的属性照常读取：user.name 仍返回 "John"，代理不能破坏原有对象的正常访问；
2. 不存在的属性抛出错误：user.age 必须抛出一个异常，任务给出的类型是 ReferenceError，并带有包含属性名的错误消息 Property doesn't exist: "age"；
3. 透明替换：user = wrap(user) 意味着代理要"完全替代"目标对象——这也是 Proxy 使用的一条黄金法则，在教程主文章 article.md 中特别强调：代理后应让代理对象替代原对象在所有地方被使用，否则很容易造成混乱。

解决方案：get 捕捉器 + in 检查 + Reflect 转发

仓库中的官方解答见 solution.md，完整实现如下：

let user = {
  name: "John"
};

function wrap(target) {
  return new Proxy(target, {
    get(target, prop, receiver) {
      if (prop in target) {
        return Reflect.get(target, prop, receiver);
      } else {
        throw new ReferenceError(`Property doesn't exist: "${prop}"`)
      }
    }
  });
}

user = wrap(user);

alert(user.name); // John
alert(user.age); // ReferenceError: Property doesn't exist: "age"

这个实现只有三个关键动作，每一处都对应一个必须掌握的 Proxy 知识点：

1. 用 get 捕捉器拦截所有属性读取

get(target, property, receiver) 是读取属性时触发的捕捉器，对应规范中的内部方法 <a href="https://link.gitcode.com/i/cd7b537064a1b8f0f9df34aff0962a4d" target="_blank">[Get]]。它的三个参数语义如下（详见 [article.md 的 get 捕捉器章节）：

参数	含义
target	目标对象，即传给 new Proxy 的第一个参数
property	被读取的属性名（注意：始终是字符串或 Symbol，即使写成 user.age）
receiver	若目标属性是 getter 访问器属性，receiver 就是读取时所在的 this 对象，通常为代理自身

在 wrap 中，get 捕捉器接管了每一次属性读取——这正是"拦截不存在的属性"的技术基础。

2. 用 in 操作符判断属性是否真实存在

if (prop in target) { ... }

in 操作符检查的是属性是否存在于对象（或其原型链）上，它走的是内部方法 [[HasProperty]]（对应 has 捕捉器）。这里必须使用 target 而不是 proxy，并且要检查的是 target 这个原始对象，理由有二：

• 直接对 proxy 使用 prop in proxy 会再次触发代理逻辑（虽然本例的 handler 没有 has 捕捉器，会透明转发，但语义上检查原始对象更清晰、更安全）；
• 只有当属性确实不存在时，才应该抛错；属性存在时则正常返回，从而保证 user.name 这类合法读取不受影响。

3. 用 Reflect.get 正确转发读取操作

return Reflect.get(target, prop, receiver);

Reflect 是内建的、与 Proxy 配套的对象：对于每一个可被 Proxy 捕获的内部方法，Reflect 中都有一个同名、同参数的方法。Reflect.get(target, prop, receiver) 等价于"规范地执行一次属性读取"。

为什么不直接写 return target[prop]？因为 receiver 参数至关重要：如果被读取的属性是一个 getter 访问器属性（例如 get name() { return this._name; }），直接 target[prop] 会以 this = target 调用 getter；而通过 Reflect.get(target, prop, receiver) 会把正确的 receiver（如从代理继承下来的子对象）作为 this 传给 getter。教程主文章的"代理一个 getter"一节详细演示了二者差异：直接返回 target[prop] 会在继承场景下得到错误结果（Guest 而非 Admin）。因此，使用 Reflect.get(...) 是"透明转发 + 不破坏 this 绑定"的最稳妥写法。

4. 抛错的类型与消息格式

throw new ReferenceError(`Property doesn't exist: "${prop}"`)

• 错误类型选择 ReferenceError（引用错误）语义贴切：访问了一个"不存在的引用"；
• 错误消息中用模板字符串把属性名嵌入双引号中，与任务给出的预期输出 ReferenceError: Property doesn't exist: "age" 完全一致，方便在调试中直接看到是哪个属性出了问题。

原理纵深：从内部方法到捕捉器的工作机制

要真正理解 wrap 为什么有效，需要回到 Proxy 的底层机制。根据 article.md 的说明：

• JavaScript 规范为对象的大多数操作定义了"内部方法"（Internal Method），例如 [[Get]]（读取属性）、[[Set]]（写入属性）、[[HasProperty]]（in 操作符）等，它们只存在于规范层面，无法被直接调用；
• Proxy 捕捉器拦截的正是这些内部方法的调用。new Proxy(target, handler) 中，handler 里提供了哪个捕捉器，就拦截对应的操作；未提供的操作则透明转发给 target；
• Proxy 是一种"奇异对象（exotic object）"，它自己没有属性。当 handler 为空时，它就是一个对 target 的透明包装器。

wrap 正是利用了这套机制：它只在 handler 中提供一个 get 捕捉器，因此只有"读取属性"这一种操作被拦截，其他操作（写入、删除、遍历、in 检查等）仍然原样作用于 target，代理不会破坏对象其余的正常行为——这保证了"添加此方面功能"而不引入副作用。

同类实战：仓库中的另外两个 Proxy 练习

「读取不存在属性抛错」属于 Proxy 的 get/set 类拦截的入门应用。仓库同目录下还有两个同级别练习，可以一起对照学习，进一步体会同一套技巧的不同落点：

练习一：负索引数组（02-array-negative）

任务要求实现 array<a href="https://link.gitcode.com/i/541e20adade30375fa2ba0290c1dcbbd" target="_blank">-1] 返回最后一个元素。官方 [解答 同样基于 get 捕捉器，但逻辑是对合法索引做重写而非对缺失属性抛错：

let array = [1, 2, 3];

array = new Proxy(array, {
  get(target, prop, receiver) {
    if (prop < 0) {
      // 注意：prop 是字符串，需先转成数字再参与运算
      prop = +prop + target.length;
    }
    return Reflect.get(target, prop, receiver);
  }
});

alert(array[-1]); // 3

这里有一个重要的细节：get 捕捉器收到的 prop 永远是字符串（如 "-1"），所以必须先执行 +prop 转成数字，再加 target.length 换算成正索引，最后同样用 Reflect.get 转发。可以看到，两个练习共享了"get 捕捉器 + 条件判断 + Reflect 转发"的骨架，区别只在于命中条件与分支行为。

练习二：可观察对象（03-observable）

任务要求实现 makeObservable(target)，让对象在属性被修改时回调注册的 handler；官方 解答 展示了 set 捕捉器的用法：

let handlers = Symbol('handlers');

function makeObservable(target) {
  target[handlers] = [];
  target.observe = function(handler) {
    this[handlers].push(handler);
  };

  return new Proxy(target, {
    set(target, property, value, receiver) {
      let success = Reflect.set(...arguments); // 转发写入
      if (success) {
        target[handlers].forEach(handler => handler(property, value));
      }
      return success;
    }
  });
}

这段代码与 wrap 形成完美互补：

• wrap 用 get 拦截读，在属性缺失时抛错；
• makeObservable 用 set 拦截写，在属性变更时回调；
• 二者都依赖 Reflect 完成"转发 + 返回值语义"：Reflect.set 成功返回 true，失败返回 false——这正是 set 捕捉器必须遵守的不变量（Invariant），教程主文章特别警告：若忘记返回 true 或返回假值，写入会触发 TypeError。

对照这三个练习，可以完整掌握 get/set 两条最常用捕捉器的实战套路。

适用边界与注意事项

在把 wrap 用于生产代码前，有几个边界值得留意（依据来自 article.md 的"Proxy 的局限性"章节）：

1. 只拦截读取，不拦截其他操作：wrap 的 handler 只有 get，因此写入、删除、in 检查、遍历等操作仍走原对象，不会受影响；
2. 代理 !== 原对象：wrap(user) 后得到的代理是一个不同的对象，严格相等比较 proxy === user 为 false，且无法被拦截。如果代码用原对象作为 Map/Set 的键，代理后查找会落空；
3. getter 属性依赖 receiver：若对象含 getter 访问器属性，务必使用 Reflect.get(target, prop, receiver)（而非 target[prop]）转发，否则继承场景下 this 绑定会出错；
4. 内建对象与私有字段无法完全代理：Map、Set、Date 等内建对象依赖内部插槽（internal slot），代理后调用其方法会失败；class 私有字段（#name）同理。这些场景需要"将方法绑定回 target"的变通方案，或干脆避免代理；
5. 性能考量：教程主文章明确指出，代理访问属性通常比原生访问慢数倍（基准因引擎而异），对"瓶颈"对象需谨慎使用。wrap 作为一种调试辅助手段，适合在开发期开启，对性能敏感路径应审慎评估。

总结

本练习展示了一个极其实用的 Proxy 应用模式：用 get 捕捉器接管属性读取，配合 in 检查区分"存在"与"缺失"，用 Reflect.get 保证转发语义正确，对缺失属性抛出带属性名的 ReferenceError。其价值在于把 JavaScript 静默返回 undefined 的宽容行为，改造成能及早暴露编程错误的严格行为。

想进一步验证与扩展，可以：

• 查看本练习的任务原文与官方解答；
• 通读 Proxy 与 Reflect 完整教程，了解全部捕捉器（set、has、deleteProperty、ownKeys、apply、construct 等）、Reflect 对照表、可撤销代理 Proxy.revocable 以及完整的局限性清单；
• 依次完成负索引数组与可观察对象两个进阶练习，形成对 get/set 捕捉器的系统化实战能力。