JS中能否重载对象属性访问与赋值操作？如何实现？

嘿，这个需求完全可以实现！在JavaScript里，咱们有个专门的“对象拦截神器”——Proxy，它就是用来接管对象的各种操作的，包括你要的属性访问、赋值重载，功能比Python的__getitem__/__setitem__还全面呢！

当你访问对象的属性时，Proxy的get“陷阱”（trap）会自动触发，我们可以在这里写自定义逻辑——比如你想要的：访问未设置的属性时抛出自定义错误。

直接上代码示例，一看就懂：

// 咱们的目标对象
const myObj = { username: "john_doe", email: "john@example.com" };

// 定义拦截规则的handler
const accessHandler = {
  get(target, prop) {
    // 先检查属性是不是对象本身就有的（避免匹配原型链上的属性）
    if (Object.prototype.hasOwnProperty.call(target, prop)) {
      return target[prop];
    } else {
      // 抛出自定义错误
      throw new Error(`自定义错误：属性 "${prop}" 不存在，请检查属性名！`);
    }
  }
};

// 创建Proxy实例，把目标对象和拦截器绑在一起
const proxiedObj = new Proxy(myObj, accessHandler);

// 测试：访问存在的属性，正常返回
console.log(proxiedObj.username); // 输出: john_doe

// 测试：访问不存在的属性，触发自定义错误
try {
  console.log(proxiedObj.phone);
} catch (err) {
  console.error(err.message); // 输出: 自定义错误：属性 "phone" 不存在，请检查属性名！
}

要实现赋值重载，用Proxy的set陷阱就可以了。比如我们可以限制只能给已存在的属性赋值，或者赋值时做校验，甚至给不存在的属性赋值时抛错，完全看你的需求。

比如下面这个例子，禁止给不存在的属性赋值：

const myObj = { username: "john_doe", email: "john@example.com" };

const assignmentHandler = {
  set(target, prop, value) {
    // 检查属性是否已存在
    if (Object.prototype.hasOwnProperty.call(target, prop)) {
      // 允许赋值，更新属性值
      target[prop] = value;
      return true; // 必须返回true表示赋值成功，否则会抛出TypeError
    } else {
      // 抛出自定义错误
      throw new Error(`自定义错误：不允许添加新属性 "${prop}"，请先在对象中定义该属性！`);
    }
  }
};

const proxiedObj = new Proxy(myObj, assignmentHandler);

// 测试：给已存在的属性赋值，正常生效
proxiedObj.email = "john_new@example.com";
console.log(proxiedObj.email); // 输出: john_new@example.com

// 测试：给不存在的属性赋值，触发错误
try {
  proxiedObj.phone = "123456789";
} catch (err) {
  console.error(err.message); // 输出: 自定义错误：不允许添加新属性 "phone"，请先在对象中定义该属性！
}

• 如果你想同时实现访问和赋值的拦截，只需要把get和set陷阱都写在同一个handler里就行，不用创建两个Proxy。
• Proxy的功能远不止这两个，它还能拦截delete操作、in运算符、函数调用等十多种对象操作，非常灵活。
• 兼容性方面，Proxy是ES6标准特性，现代浏览器（Chrome、Firefox、Edge等）和Node.js 6.0+都完美支持，不用太担心兼容问题。

内容的提问来源于stack exchange，提问作者WIP