如何在JavaScript类中重写方括号访问器？

算力阿峰

2026-8-1

在JavaScript类中重写方括号访问器的实现方式

可以实现自定义的方括号属性访问逻辑，但你给出的示例代码语法不正确，不能直接用[prop]()这种写法来定义访问器。要实现这类需求，主要有两种可行方案：

1. 使用Proxy代理全局拦截属性访问

Proxy可以拦截实例上所有的属性访问操作（包括方括号和点语法），适合需要统一处理所有属性访问的场景：

class Foo {
  constructor() {
    this.bar = {};
    // 返回Proxy包装后的实例，拦截get/set操作
    return new Proxy(this, {
      get(target, prop) {
        // 自定义属性读取逻辑
        return target.bar[prop];
      },
      set(target, prop, value) {
        // 自定义属性赋值逻辑
        target.bar[prop] = value;
        return true; // 必须返回true表示赋值成功
      }
    });
  }
}

// 使用示例
const foo = new Foo();
foo['username'] = 'Alice';
console.log(foo['username']); // 输出 'Alice'
console.log(foo.bar.username); // 同步输出 'Alice'

2. 针对特定属性定义getter/setter

如果只需要对特定已知属性自定义访问逻辑，可以在类中直接定义getter和setter，这种方式无法拦截任意未知属性的访问：

class Foo {
  constructor() {
    this.bar = { title: '默认标题' };
  }

  // 针对title属性的getter
  get title() {
    return this.bar.title;
  }

  // 针对title属性的setter
  set title(newTitle) {
    this.bar.title = newTitle;
  }
}

// 使用示例
const foo = new Foo();
console.log(foo['title']); // 输出 '默认标题'
foo['title'] = '新标题';
console.log(foo['title']); // 输出 '新标题'