如何在TypeScript中实现模板方法模式？子类重写方法未生效问题

嘿，这个问题其实挺典型的，我一眼就揪出问题所在啦！

你的代码里，父类Parent的doSomething方法中调用doSomethingElse()时没加this关键字——这就导致JavaScript/TypeScript把它当成了全局作用域下的函数来调用，根本没去调用当前实例的方法，自然就触发不了子类重写后的版本了。

修正后的代码 #

class Parent { 
  doSomething(){ 
    this.doSomethingElse(); // 必须加上this，指向当前实例
  } 
  protected doSomethingElse(){ 
    console.log("父类的doSomethingElse");
  } 
} 

class Child extends Parent{ 
  protected doSomethingElse(){ 
    console.log("子类的doSomethingElse");
  } 
} 

// 测试验证
const childInstance = new Child();
childInstance.doSomething(); // 现在会输出"子类的doSomethingElse"

关键原理说明 #

模板方法模式的核心就是父类定义整体流程框架（比如doSomething），子类重写流程里的特定步骤（比如doSomethingElse）。要实现这种多态效果，必须通过this调用实例方法：

• 当你写this.doSomethingElse()时，JavaScript会在运行时根据当前实例的实际类型（这里是Child）去匹配对应的方法，从而执行子类重写后的逻辑。
• 要是省略this，代码会去全局作用域找这个函数，找不到会直接报错，找到也绝对不是你期望的子类方法。

现在再运行代码，就能得到你想要的结果啦！

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