解决JavaScript继承中父类方法无法访问的TypeError

本文旨在帮助开发者解决在JavaScript类继承中遇到的“Uncaught TypeError: (intermediate value).updateUI is not a function”错误。通过分析问题原因和提供解决方案，本文将指导读者正确地在子类中调用和扩展父类方法，避免常见的继承陷阱。

在JavaScript中使用class关键字进行面向对象编程时，继承是一种强大的特性，允许子类继承父类的属性和方法。然而，在实际开发中，有时会遇到子类无法访问或调用父类方法的情况，导致TypeError。本文将深入探讨这种问题的常见原因以及相应的解决方案。

问题分析

在提供的代码示例中，RosterTableUtil是父类，RosterSchedulerTableUtil是子类。父类RosterTableUtil的constructor中定义了一个名为updateUI的函数，并将其赋值给this.updateUI。子类RosterSchedulerTableUtil试图通过super.updateUI(cellIndex, rowIndex)调用父类的updateUI方法，但却出现了“Uncaught TypeError: (intermediate value).updateUI is not a function”错误。

立即学习“Java免费学习笔记（深入）”；

问题根源在于父类updateUI的定义方式。在constructor内部使用this.updateUI = (cellIndex, rowIndex) => { ... } 定义的函数，实际上是在创建实例属性，而不是定义类的方法。 虽然在父类实例中可以访问，但是在子类中通过super调用时，由于作用域和this指向的问题，会导致找不到该方法。

解决方案

为了解决这个问题，应该将updateUI定义为类的实例方法，而不是在构造函数中赋值。以下是修改后的代码示例：

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);
    // do other stuff
  }
}

const util = new RosterSchedulerTableUtil();
util.updateUI(1,2);
util.updateUI(3,4);

代码解释

1. 将updateUI定义为类的方法： 将updateUI函数直接定义在RosterTableUtil类的constructor外部，这样它就成为了类的实例方法。
2. 使用super关键字调用父类方法： 在子类RosterSchedulerTableUtil的updateUI方法中，使用super.updateUI(cellIndex, rowIndex)正确地调用父类的updateUI方法。

注意事项

• this的指向： 在JavaScript中，this的指向取决于函数的调用方式。在类的方法中，this指向类的实例。
• super关键字： super关键字用于调用父类的构造函数或方法。在子类的构造函数中，必须先调用super()才能访问this。
• 私有字段: 代码中使用了 #highLightCellIndex 和 #highLightRowIndex 作为私有字段，这是ES2022引入的特性，可以有效防止外部直接访问和修改类的内部状态。

总结

在JavaScript类继承中，正确地定义和调用父类方法至关重要。通过将方法定义为类的实例方法，并使用super关键字进行调用，可以避免TypeError，并实现代码的复用和扩展。理解this的指向以及super关键字的用法，是掌握JavaScript面向对象编程的关键。

以上就是解决JavaScript继承中父类方法无法访问的TypeError的详细内容，更多请关注php中文网其它相关文章！