super调用失败？JS继承问题排查指南

还在为 JavaScript 继承中 `super` 调用失败而苦恼？本文为你提供一份详尽的排查指南，助你摆脱 `TypeError` 的困扰。深入剖析了 JavaScript 类继承中 `super` 关键字的工作机制，着重强调了父类方法定义方式的重要性。当父类方法被错误地定义为构造函数内部的实例属性时，`super` 机制将无法正确查找，导致调用失败。文章详细阐述了原型方法与实例属性的区别，并推荐使用 ES2022 私有字段来管理内部状态，确保继承链中方法调用的顺畅与代码的健壮性。掌握这些技巧，让你的 JavaScript 继承更加得心应手！

JavaScript 类继承与 super 关键字

在 JavaScript 中，类继承允许我们构建基于现有类的子类，从而实现代码复用和层次结构。super 关键字在子类中扮演着核心角色，它允许我们调用父类的构造函数（super()）或访问父类的方法和属性（super.method()）。然而，在使用 super 调用父类方法时，一个常见的陷阱可能导致 TypeError，即父类方法未被正确识别。

问题根源：构造函数内部定义的方法与原型方法

当我们在父类构造函数内部使用 this.methodName = () => {} 的形式定义方法时，实际上是为每个实例创建了一个独立的 methodName 属性，这个属性的值是一个函数。这种方法被称为“实例方法属性”或“绑定方法”，因为它直接绑定到实例上。

class Parent {
  constructor() {
    // 实例方法属性：每个实例都有自己的 updateUI 函数
    this.updateUI = (arg1, arg2) => {
      console.log('Parent updateUI called');
    };
  }
}

class Child extends Parent {
  constructor() {
    super();
  }

  doSomething() {
    // 尝试调用 super.updateUI()
    // 问题在于 super 查找的是原型链上的方法，而不是实例属性
    super.updateUI(); // 会抛出 TypeError
  }
}

const childInstance = new Child();
childInstance.doSomething(); // Uncaught TypeError: (intermediate value).updateUI is not a function

super.method() 的机制是，它会在当前实例的原型链上查找 method。如果 method 是在类体内部直接定义的方法（即原型方法），它就会被正确找到。但如果 method 是在构造函数内部作为实例属性定义的，那么它就不在原型链上，super 自然无法找到，从而导致 TypeError。

解决方案：将方法定义为原型方法

解决此问题的最直接和推荐的方法是将方法定义在类体内部，而不是构造函数内部。这样定义的方法会自动添加到类的原型上，成为原型方法，所有实例共享同一个方法定义，并且 super 机制可以正确地在原型链上找到它们。

// 父类：RosterTableUtil
class RosterTableUtil {
  // 定义内部状态，可以使用私有字段（ES2022）增强封装性
  #highLightCellIndex = -1;
  #highLightRowIndex = -1;

  // 将 updateUI 定义为原型方法
  updateUI(cellIndex, rowIndex) {
    this.#highLightCellIndex = cellIndex;
    this.#highLightRowIndex = rowIndex;
    console.log(`RosterTableUtil: Highlighting row ${this.#highLightRowIndex}, cell ${this.#highLightCellIndex}`);
  }
}

// 子类：RosterSchedulerTableUtil
class RosterSchedulerTableUtil extends RosterTableUtil {
  constructor() {
    super(); // 调用父类构造函数
    // 其他初始化逻辑...
  }

  // 重写 updateUI 方法
  updateUI(cellIndex, rowIndex) {
    // 正确调用父类的 updateUI 方法
    super.updateUI(cellIndex, rowIndex);

    // 子类特有的逻辑
    this.#updateSelectRegion(cellIndex, rowIndex); // 假设有私有辅助方法
    console.log(`RosterSchedulerTableUtil: Also updating select region.`);
  }

  // 子类内部辅助方法（示例）
  #updateSelectRegion(cellIndex, rowIndex) {
    // 实现选择区域更新逻辑
  }
}

// 示例使用
const schedulerUtil = new RosterSchedulerTableUtil();
schedulerUtil.updateUI(1, 2); // 正常调用，不再报错
schedulerUtil.updateUI(3, 4);

在上述代码中：

1. RosterTableUtil 类中的 updateUI 方法直接定义在类体内部，使其成为原型方法。
2. 内部状态 highLightCellIndex 和 highLightRowIndex 使用了 ES2022 引入的私有字段（# 前缀）进行封装。私有字段只能在类的内部访问，提供了更强的封装性，是替代构造函数内部闭包变量的现代方式。
3. RosterSchedulerTableUtil 子类中的 updateUI 方法通过 super.updateUI(cellIndex, rowIndex) 成功调用了父类的原型方法。

注意事项与最佳实践

• 原型方法 vs. 实例方法属性：

  • 原型方法（推荐）： 定义在类体内部。它们存在于类的原型上，所有实例共享同一个方法引用，节省内存。super 关键字可以正确访问它们。
  • 实例方法属性： 定义在构造函数内部，或使用类字段语法直接在类体中作为箭头函数定义。每个实例都有一个独立的方法副本。如果方法需要绑定 this 到实例（例如作为事件处理器），并且不涉及 super 调用，这可能是一个选择，但通常可以通过在构造函数中绑定或在调用时使用箭头函数来避免。

• 封装内部状态：

  • 如果需要管理类的内部状态，并且不希望外部直接访问，ES2022 的私有字段 (#fieldName) 是最佳选择。它们提供了真正的私有性。
  • 避免在构造函数内部使用闭包来“私有化”变量，因为这可能导致代码结构复杂，并且如本例所示，与继承机制不兼容。

• 代码可读性与维护性： 将方法定义为原型方法，使类结构更清晰，更符合面向对象编程的习惯。这也有助于优化内存使用，因为所有实例共享相同的方法定义，而不是为每个实例创建单独的函数副本。

总结

在 JavaScript 类继承中，理解 super 关键字查找方法的机制至关重要。当子类通过 super 调用父类方法时，该方法必须是定义在父类原型上的“原型方法”，而不是在构造函数内部作为实例属性创建的函数。通过将方法直接定义在类体内部，并结合使用现代 JavaScript 特性如私有字段来管理内部状态，我们可以构建出更健壮、更易于维护的面向对象代码。

理论要掌握，实操不能落！以上关于《super调用失败？JS继承问题排查指南》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！