[Javascript] 화살표함수(arrow function)의 this

ES6에 도입된 화살표함수(arrow function)는 실행 컨텍스트를 생성할때 this바인딩 과정 자체가 빠지게된다고 한다. 따라서 상위 스코프의 this를 그대로 활용할수있다.

var obj = {
	outer: function(){
    	console.log(this);
        var innerFunc = () =>{
          console.log(this);
        }
        innerFunc();
     }
};
obj.outer();

결과

{outer: ƒ}
{outer: ƒ}

이렇게 InnerFunc()를 함수로서 호출하였을때도 화살표함수로 innerFunc가 실행컨텍스트가 실행되므로 this바인딩 과정이 없다.

따라서 상위 스코프 this인 outer를 활용하는 것이다.

 

한가지 따로 테스트 한건 만약 outer프로퍼티도 화살표함수로 바꾸면 어떻게 될까 궁금했다.

var obj = {
	outer: ()=>{  // outer프로퍼티에 화살표함수로 바꿔서 사용
    	console.log(this);
        var innerFunc = () =>{
          console.log(this);
        }
        innerFunc();
     }
};
obj.outer();

결과

Window{...}
Window{...}

이렇게 outer프로퍼티에 화살표함수를 할당해주면 this바인딩 과정이 없기때문에 obj.outer()를 실행 컨텍스트를 생성시에 상위 스코프 this인 전역객체 window 가 참조되는 것이다. 이렇게 되면 innerFunc가 실행될때도 상위스코프의 this를 참조하기 때문에 window객체를 갖게 되는 것이다.