javascript - 将 "this"存储在 TypeScript 类中(或以其他方式维护)

Question

有没有办法在 TypeScript 类中存储“this”的值。

类似这样的东西(我以前用过的)

Car = function() {
    var _car = this;
    this.speed = 0;
    setInterval(function() {
        _car.speed +2;
    }, 32);
}

//我想在 typescript 中做同样的事情......最好使用 var( not () => {} ) 这可能吗？

Answer 1

是的，可以使用 var 赋值在 TypeScript 中实现“this”的词法捕获，但我不推荐这样做。当您了解 JavaScript“this”机制的实际工作原理时，完全没有必要对“this”进行词法捕获。

TypeScript 中“this”的词法捕获通常是通过箭头函数来实现的，但话虽这么说，这里有一个示例 TypeScript 类，它说明了实现您想要的结果的所有三种不同方法:

class Car {
  speed: number

  constructor() {
    this.speed = 0
  }

  // lexical capture of 'this' with var 
  increaseSpeed1() {
    var _car = this
    setInterval(function() {
      _car.speed += 2
    }, 32)
  }

  // lexical capture of 'this' with arrow function
  // (a pretty way of doing the same as above)
  increaseSpeed2() {
    setInterval(() => {
      this.speed += 2
    }, 32)
  }

  // binding to 'this'
  // (I consider this the proper way, when you really understand how 'this' works)  
  increaseSpeed3() {
    setInterval(function() {
      this.speed += 2
    }.bind(this), 32)
  }  
}

在 increaseSpeed1 中，_car 对象无法在 setInterval 的回调中解析(即使回调确实有自己的“this”值)，因此引擎会在下一个可用范围中查找并找到increaseSpeed1 函数范围内 _car 所需的声明和值。这里，_car 从词法上捕获了 Car 类的“this”值。

在使用箭头函数的 increaseSpeed2 中，setInterval 回调的“this”值本质上被抛出，而来自increaseSpeed2函数作用域的“this”值(即与 Car 类的“this”值相同)在词法上被 setInterval 回调采用。

在 increaseSpeed3 中，我们绑定(bind)到 Car 类的“this”值。绑定(bind)到 car 类的“this”值会从 setInterval 回调创建一个新函数，该函数将在 Car 类的“this”上下文中执行。就像我在代码示例中所说的那样，这是实现您想要的目标的最正确方法，同时尊重 JavaScript“this”机制的工作方式。

另请注意，如果您决定使用箭头函数，则可以通过删除回调函数体周围的大括号来使 increaseSpeed2 函数更加紧凑(因为只有一行代码):

increaseSpeed2() {
  setInterval(() => this.speed += 2, 32)
}

祝你编码愉快。希望这有帮助!