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 functionsuper.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);在上述代码中：
立即学习“Java免费学习笔记（深入）”；
- RosterTableUtil 类中的 updateUI 方法直接定义在类体内部，使其成为原型方法。
- 内部状态 highLightCellIndex 和 highLightRowIndex 使用了 ES2022 引入的私有字段（# 前缀）进行封装。私有字段只能在类的内部访问，提供了更强的封装性，是替代构造函数内部闭包变量的现代方式。
- RosterSchedulerTableUtil 子类中的 updateUI 方法通过 super.updateUI(cellIndex, rowIndex) 成功调用了父类的原型方法。
注意事项与最佳实践
-
原型方法 vs. 实例方法属性：
- 原型方法（推荐）： 定义在类体内部。它们存在于类的原型上，所有实例共享同一个方法引用，节省内存。super 关键字可以正确访问它们。
- 实例方法属性： 定义在构造函数内部，或使用类字段语法直接在类体中作为箭头函数定义。每个实例都有一个独立的方法副本。如果方法需要绑定 this 到实例（例如作为事件处理器），并且不涉及 super 调用，这可能是一个选择，但通常可以通过在构造函数中绑定或在调用时使用箭头函数来避免。
-
封装内部状态：
- 如果需要管理类的内部状态，并且不希望外部直接访问，ES2022 的私有字段 (#fieldName) 是最佳选择。它们提供了真正的私有性。
- 避免在构造函数内部使用闭包来“私有化”变量，因为这可能导致代码结构复杂，并且如本例所示，与继承机制不兼容。
代码可读性与维护性： 将方法定义为原型方法，使类结构更清晰，更符合面向对象编程的习惯。这也有助于优化内存使用，因为所有实例共享相同的方法定义，而不是为每个实例创建单独的函数副本。
总结
在 JavaScript 类继承中，理解 super 关键字查找方法的机制至关重要。当子类通过 super 调用父类方法时，该方法必须是定义在父类原型上的“原型方法”，而不是在构造函数内部作为实例属性创建的函数。通过将方法直接定义在类体内部，并结合使用现代 JavaScript 特性如私有字段来管理内部状态，我们可以构建出更健壮、更易于维护的面向对象代码。
