打字稿到javascript回调函数无法访问打字稿全局变量

Question

我无法通过相同打字稿方法传递的回调函数的javascript调用访问打字稿全局变量。

这是stackblitz中的示例代码。

https://stackblitz.com/edit/angular-quhktp

在上述示例中，incr变量在组件文件中声明。当我们直接使用它时，可以通过clickthisfunction方法进行访问。但是，如果将相同的方法传递给javascript进行回调。调用了回调函数，但此方法无法访问this.incr变量。

Answer 1

一个小错误。通过时需要调用它。

这应该可以解决问题：

  clickthisargwithfunction() {
    withargumentcallwithfunctionasargument(this.clickthisfunction());
  }

Answer 2

在javascript函数中，this指的是调用该函数的对象。 因此，如果您调用this.clickthisfunction()，则this.incr可以正常工作，但是如果您将this.clickthisfunction重新分配给其他变量，则该函数中的this不会是您期望的。该MDN page具有有关this的工作方式的更多信息。

要解决此问题，有几个选项：

---

绑定：

您可以通过在函数上调用this来更改函数中.bind的值。 您可以在constructor中添加以下行来完成此操作：

this.clickthisfunction = this.clickthisfunction.bind(this);

您也可以在将其传递给withargumentcallwithfunctionasargument之前将其绑定， 但是绑定不是免费的，因此通常只绑定一次。

---

箭头功能：

Arrow functions处理this的方式不同–他们从外部范围捕获它，而不是使用调用该函数的对象。

通过以此替换函数声明

clickthisfunction = () => {

它将从构造对象时捕获this的值。 （如果您对它如何获得此值感兴趣，请查看转译的代码， 这更有意义）。

---

其中任何一个都应解决this未被定义的问题，而您使用的大部分内容取决于样式。唯一的区别是，第一种方法将在原型上保留功能，而第二种方法仅在实例上保留功能。除非您做一些奇怪的事情，否则那可能不会影响任何事情。