JavaScript中如何让子类访问父类定义的私有字段？

问题原因 #

JavaScript 中以#开头的私有类字段是语言级别的严格私有，仅允许在定义该字段的类本身的内部代码中访问，子类、外部实例都无法直接访问，这是你触发报错的根本原因。如果需要实现「字段对外私有、但可被子类访问」的需求，不能使用原生私有字段，需要用其他方案实现。

可行解决方案 #

方案1：下划线命名约定实现受保护成员（最常用） #

这是前端开发通用的轻量方案，虽然不是语言强制的私有性，但通过统一命名约定明确告知外部该成员属于内部实现，不应该直接访问，同时子类可以正常访问：

class Heap {
  // 下划线开头约定为仅内部/子类可访问的受保护成员
  _values;
  constructor(array = []) {
    this._values = array;
  }
  insert(item) {
    this._values.push(item);
    this._bubbleUp(this._values.length - 1);
  }
  // 私有方法同理改为下划线开头
  _bubbleUp(index) {
    // 原有逻辑保持不变
  }
}

class PriorityQueue extends Heap {
  constructor(array = []) {
    super(array);
  }
  insert(item, priority) {
    this._values.push({ item, priority }); 
    this._bubbleUp(this._values.length - 1);
  }
}

如果担心外部误改，可以给_values增加只读公共 getter，禁止外部直接赋值，也可以返回数组浅拷贝彻底隔离外部修改：

class Heap {
  _values;
  get values() {
    // 返回浅拷贝：外部修改不会影响内部原数组
    return [...this._values];
  }
  // 剩余逻辑同上
}

方案2：WeakMap 实现强制受保护成员 #

如果需要语言级别的禁止外部访问，可以利用 ES 模块的作用域隔离+WeakMap 实现，只要不导出 WeakMap 实例，外部就完全无法访问对应成员：

// 同模块内定义不导出的WeakMap存储受保护成员
const protectedMembers = new WeakMap();

class Heap {
  constructor(array = []) {
    protectedMembers.set(this, {
      values: array,
      bubbleUp: this.#bubbleUp.bind(this)
    });
  }
  #bubbleUp(index) {
    // 原有逻辑保持不变
  }
  insert(item) {
    const { values } = protectedMembers.get(this);
    values.push(item);
    this.#bubbleUp(values.length - 1);
  }
}

class PriorityQueue extends Heap {
  constructor(array = []) {
    super(array);
  }
  insert(item, priority) {
    const { values, bubbleUp } = protectedMembers.get(this);
    values.push({ item, priority });
    bubbleUp(values.length - 1);
  }
}

该方案的受保护成员对模块外部完全不可访问，仅同模块内的子类可以通过 WeakMap 获取，完全符合你要求的权限控制规则。

方案3：基类暴露受保护操作接口 #

如果你不想修改基类的原生私有字段定义，可以在基类中封装专供子类调用的内部操作方法，通过接口隔离避免子类直接操作内部字段：

class Heap {
  #values;
  constructor(array = []) {
    this.#values = array;
  }
  // 下划线开头标识为仅供子类调用的内部接口
  _pushValue(item) {
    this.#values.push(item);
  }
  _getValuesLength() {
    return this.#values.length;
  }
  _bubbleUp(index) {
    this.#bubbleUp(index);
  }
  #bubbleUp(index) {
    // 原有逻辑保持不变
  }
  insert(item) {
    this._pushValue(item);
    this._bubbleUp(this._getValuesLength() - 1);
  }
}

class PriorityQueue extends Heap {
  constructor(array = []) {
    super(array);
  }
  insert(item, priority) {
    this._pushValue({ item, priority });
    this._bubbleUp(this._getValuesLength() - 1);
  }
}

该方案保留了基类#values的严格私有性，同时通过接口封装满足子类的操作需求。

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