생성자 함수내에 콜백함수 사용시 this 값은...? ( 화살표함수로 바꾸면?)

알반 함수로 호출.

function Counter() {

    this.count = 0;

    setInterval(function() {

        this.count++;

        console.log(this.count);   ---> 결과가 NaN으로 나옴.

    }, 2000);

}

 

const counter = new Counter();

 

이 코드를 화살표 함수로 바꾸면 값이 제대로 나옴.

 

function Counter() {

    this.count = 0;

    setInterval( () =>  {

        this.count++;

        console.log(this.count);   ---> 결과가 1씩 증가하며 제대로 나옴.

    }, 2000);

}

 

 

this는 함수가 호출된 방법에 따라 값이 달라짐.

그러나 화살표함수에서는 함수가 정의된 시점에서 상위 스코프의 this 를 참조한다.

 

렉시컬 스코프는 함수의 호출방법이 아니라, 함수가 선언된 위치에 따라 스코프가 결정되는 방식.