typescript - 类变量在函数内部未定义

Question

只是想学习 Angular 2+(特别是 8)，对于我的一生，我无法理解为什么类变量在类函数中是“未定义的”，但如果我用 ES6 风格编写函数则可以访问。

我尝试在构造函数中设置，但这没有意义。

export class GameControlComponent implements OnInit {

    myVar;
    counter = 0; 

    constructor() {}  ngOnInit() {}

    handleClickStart() {

        this.myVar = setInterval(this.myFunc, 1500);
    }

    myFunc() {
        this.counter++;
        console.log(this.counter);  
    }
}

调用“handleClickStart”后，每 1.5 秒输出一次 NaN。为什么？？？？我本来期望 1 2 3....

以这种方式实现 handleClickStart 给了我想要的结果:

handleClickStart() {    
    this.myVar = setInterval(() => {
      console.log(this.counter + 1);
      this.counter++;
    }, 1500);
}

但仍然无法弄清楚为什么第一种方法没有成功。

Answer 1

此行为与作用域、箭头函数、this 以及 Javascript 函数/对象的工作方式有关。

JavaScript 中的函数在特定上下文中运行，使用 this 访问当前上下文。示例代码中的 this.counter 在 setInterval() 函数中不可用/未定义，因此我们得到 undefined。

现在，在箭头函数中，事情很特别/不同。箭头函数总是在词法上绑定(bind)上下文(词法作用域意味着它使用包含箭头函数的代码中的 this。)因此 this 将引用原始上下文，即类。

一个更简单的例子可能会更清楚。

const obj = {
  myVar: 'foo',
  myFunc: function() { 
    console.log('Actual Variable value: ',this.myVar)  

    setTimeout(() => {
      console.log('Set timeout using Arrow function: ',this.myVar)
    }, 1000);
    setTimeout(function () {
      console.log('Set timeout using Normal function: ',this.myVar)
    }, 1000);
  }
}
obj.myFunc();

输出

Actual Variable value: foo
Set timeout using Arrow function:  foo
Set timeout using Normal function:  undefined

阅读更多

1. Arrow functions
2. this keyword