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。

现在，在箭头功能中，事情是特殊的/不同的。箭头函数始终按词法绑定上下文（词法作用域意味着它使用包含箭头函数的代码中的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 个答案: