Переменная класса не определена внутри функции

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 выводится NaN каждые 1,5 секунды.Зачем????Я бы ожидал 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.

Теперь, в Функции стрелок , вещи особенные / разные.Функции со стрелками всегда лексически связывают контекст (Lexical Scoping означает, что он использует this из кода, содержащего функцию со стрелкой.) И поэтому this будет ссылаться на исходный контекст, то есть на класс.

AБолее простой пример может сделать его более понятным.

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. Функции стрелок
2. это ключевое слово