父类构造函数如何调用子类依赖字段的方法？ES6构造函数索引构建问题

让我分两部分来解答你的问题：

在JavaScript的类继承机制里，父类构造函数执行时，子类的实例属性还没完成初始化——因为子类必须先调用super()才能访问this，而super()就是执行父类的构造函数。这时候如果父类构造函数直接调用子类重写的方法，方法里依赖的子类字段大概率还没赋值，会导致错误或者不符合预期的结果。

解决这个问题的核心思路是把方法调用的时机交给子类控制，具体有两种常见做法：

做法一：父类提供初始化钩子，子类完成属性赋值后调用 #

父类构造函数里不直接调用子类方法，而是定义一个初始化方法（比如init()），子类在构造函数中先调用super()，再设置自己的字段，最后调用父类的初始化钩子：

class Parent {
  constructor() {
    // 父类构造只做自己的初始化，不调用子类方法
    this.parentProp = 'parent value';
  }

  // 定义初始化钩子，子类调用时再执行子类方法
  init() {
    this.doSomething();
  }

  doSomething() {
    // 父类默认实现（可选）
    console.log('Parent doing something');
  }
}

class Child extends Parent {
  constructor() {
    super(); // 先完成父类初始化
    this.childProp = 'child value'; // 再设置子类字段
    this.init(); // 最后调用钩子，此时子类字段已就绪
  }

  doSomething() {
    // 子类重写方法，此时能正常访问子类字段
    console.log(`Child doing something with ${this.childProp}`);
  }
}

new Child(); // 输出：Child doing something with child value

做法二：子类自行控制方法调用时机 #

如果父类不需要统一的初始化逻辑，子类可以在完成自身属性赋值后，直接调用需要执行的方法（包括父类定义、子类重写的方法）：

class Parent {
  constructor() {
    this.parentProp = 'parent value';
  }

  doSomething() {
    console.log('Parent doing something');
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.childProp = 'child value';
    this.doSomething(); // 子类自己调用，时机可控
  }

  doSomething() {
    console.log(`Child doing something with ${this.childProp}`);
  }
}

你遇到的核心矛盾是：ES6子类构造函数必须先调用super()才能访问this，但buildIndex依赖的this.filter需要在super()之后才能设置，可如果父类构造函数里自动调用了buildIndex，就会导致索引构建时filter还未就绪。

针对这个场景，我推荐两种直接有效的解决方案：

方案一：修改父类，不在构造函数中自动调用buildIndex #

把索引构建的主动权交给子类，让子类在设置好filter后再调用buildIndex：

class BaseIndex {
  constructor(documents) {
    this.documents = documents;
    // 移除构造函数里的this.buildIndex()，由子类决定什么时候调用
  }

  buildIndex() {
    // 确保filter绑定正确的this，避免调用时上下文丢失
    const effectiveFilter = this.filter.bind(this);
    this.index = this.documents.filter(effectiveFilter).reduce((acc, doc) => {
      acc[doc.id] = doc;
      return acc;
    }, {});
  }
}

class DocumentIndex extends BaseIndex {
  constructor(documents, customFilter) {
    super(documents);
    // 先设置filter：可以用传入的自定义过滤函数，或者子类默认的filter方法
    this.filter = customFilter || this.filter;
    // 现在filter已就绪，再构建索引
    this.buildIndex();
  }

  // 子类默认的过滤逻辑
  filter(doc) {
    return doc.type === 'article';
  }
}

// 使用示例
const docs = [{id: 1, type: 'article'}, {id: 2, type: 'note'}];
const index = new DocumentIndex(docs);
console.log(index.index); // 只会包含type为article的文档

方案二：父类构造函数接受filter参数，提前传入过滤逻辑 #

如果不想修改父类的构造逻辑，可以在调用super()时直接把filter传给父类，让父类在构建索引时就能拿到正确的过滤规则：

class BaseIndex {
  constructor(documents, filter) {
    this.documents = documents;
    // 优先使用传入的filter，没有的话用默认的“全保留”逻辑
    this.filter = filter || (() => true);
    this.buildIndex();
  }

  buildIndex() {
    const effectiveFilter = this.filter.bind(this);
    this.index = this.documents.filter(effectiveFilter).reduce((acc, doc) => {
      acc[doc.id] = doc;
      return acc;
    }, {});
  }
}

class DocumentIndex extends BaseIndex {
  constructor(documents, customFilter) {
    // 把子类的默认filter或者传入的自定义filter传给父类
    super(documents, customFilter || this.filter.bind(this));
  }

  filter(doc) {
    return doc.type === 'article';
  }
}

这两种方案都能解决你遇到的顺序问题，其中方案一的耦合度更低，更推荐使用——因为索引的构建时机本来就应该由具体的子类来控制，父类只负责提供基础能力即可。

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