在JavaScript的类继承中，当子类尝试调用父类的方法时，有时会遇到 Uncaught TypeError: (intermediate value).updateUI is not a function 错误。这通常意味着子类无法正确访问或调用父类定义的方法。本文将通过一个实际案例，深入分析问题的原因，并提供有效的解决方案，确保子类能够顺利地继承和扩展父类的功能。
问题分析
在提供的代码示例中，RosterTableUtil 类定义了一个 updateUI 方法，该方法在构造函数内部定义为一个闭包。RosterSchedulerTableUtil 类继承自 RosterTableUtil，并尝试覆盖 updateUI 方法，并在覆盖的方法中调用 super.updateUI(cellIndex, rowIndex)。问题在于，父类的 updateUI 方法是在构造函数内部定义的，而不是作为类的原型方法，导致子类无法通过 super 访问。
解决方案
立即学习“Java免费学习笔记（深入）”；
要解决这个问题，最直接的方法是将 updateUI 方法从构造函数内部移到类的主体中，将其定义为实例方法。此外，为了更好地封装数据，可以使用私有字段（private fields）来存储内部状态。
以下是修改后的代码示例：
class RosterTableUtil {
#highLightCellIndex = -1;
#highLightRowIndex = -1;
updateUI(cellIndex, rowIndex) {
this.#highLightCellIndex = cellIndex;
this.#highLightRowIndex = rowIndex;
console.log(`RosterTableUtil row ${this.#highLightRowIndex}, cell ${this.#highLightCellIndex}`);
}
}
class RosterSchedulerTableUtil extends RosterTableUtil {
updateUI(cellIndex, rowIndex) {
super.updateUI(cellIndex, rowIndex);
// 在这里添加子类特定的逻辑
console.log("RosterSchedulerTableUtil updateUI called");
}
}
const util = new RosterSchedulerTableUtil();
util.updateUI(1, 2);
util.updateUI(3, 4);代码解释：
-
RosterTableUtil 类：
- #highLightCellIndex 和 #highLightRowIndex 使用私有字段语法 # 定义，这意味着它们只能在 RosterTableUtil 类内部访问。
- updateUI 方法现在是类的一个实例方法，可以直接通过 this 访问实例的私有字段。
-
RosterSchedulerTableUtil 类：
- 通过 extends RosterTableUtil 继承了父类。
- updateUI 方法覆盖了父类的 updateUI 方法。
- super.updateUI(cellIndex, rowIndex) 调用了父类的 updateUI 方法，确保父类的逻辑得到执行。
-
使用示例：
- 创建 RosterSchedulerTableUtil 的实例。
- 调用 updateUI 方法，可以看到父类和子类的 updateUI 方法都被执行。
注意事项：
- super 的使用： 在子类中覆盖父类方法时，如果需要执行父类的逻辑，必须使用 super.methodName() 来调用父类的方法。
- 私有字段： 使用私有字段可以更好地封装类的内部状态，防止外部直接访问和修改，提高代码的健壮性。
- 构造函数 vs. 实例方法： 避免在构造函数内部定义方法，除非有特殊需求。通常，将方法定义为实例方法是更好的选择，因为它更符合面向对象编程的规范，并且更容易被继承和覆盖。
总结
通过将 updateUI 方法从构造函数内部移到类的主体中，并将其定义为实例方法，我们成功解决了子类无法访问父类方法的错误。同时，使用私有字段可以更好地封装类的内部状态。这个解决方案不仅解决了特定的问题，也提供了一个通用的方法来处理JavaScript类继承中类似的问题。在实际开发中，理解JavaScript类继承的机制，并遵循最佳实践，可以避免许多潜在的错误，提高代码的质量和可维护性。
