Question

我试图覆盖JavaScript（ES5）基于函数的类中定义的对象方法：

var JSClass = function() {
  this.start = function() {
    console.log('JSClass.start()');
  }
}

然后按预期调用start()方法打印：

let o1 = new JSClass();
o1.start();
// prints: JSClass.start()

但是，如果我尝试使用TypeScript类扩展此对象，例如：

class TSClass extends JSClass {
  start() {
    super.start();
    console.log('TSClass.start()');
  }

  otherStart() {
    this.start();
    console.log('TSClass.otherStart()');
  }
}

...然后永远不会调用TSClass::start()。只有start()中定义的JSClass。

let o2 = new TSClass();
o2.start();
o2.otherStart();

只打印：

JSClass.start()
JSClass.start()
TSClass.otherStart()

我打算打印：

// by calling: o2.start();
JSClass.start()
TSClass.start()
// by calling: o2.otherStart();
JSClass.start()
TSClass.start()
TSClass.otherStart()

这是设计的吗？那么如何使用TypeScript扩展ES5对象方法？

查看现场演示：https://jsfiddle.net/martinsikora/2sunkmq7/

编辑：我最终使用了这个。

class TSClass extends JSClass {

  constructor() {
    var oldStart = this.start;
    this.start = () => {
      oldStart.call(this);
      console.log('TSClass.start()');
    }
  }
  // ...
}

现在它按预期工作。

Answer 1

您的问题是，您将start方法作为类成员而不是类方法添加到JSClass。
为了使它成为一种方法，您需要将其添加到原型中：

var JSClass = function () {}

JSClass.prototype.start = function () {
    console.log('JSClass.start()');
}

然后这个：

let o2 = new TSClass();
o2.start();
o2.otherStart();

结果：

JSClass.start()
TSClass.start()
JSClass.start()
TSClass.start()
TSClass.otherStart()

从TypeScript中基于JavaScript函数的类重写方法

1 个答案: