this 관련 몇 가지 예제

자바스크립트의 this는 자바와 다르게 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다. 한 문장으로 정리하면 아래와 같다.

 

생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함)의 this는 전역 객체를 가리킨다.

 

 

위 코드를 보면 생성자 함수(A)와 객체의 메소드(B) 안에서 this가 해당 객체를 가리키는 것을 볼 수 있다. 하지만 콜백함수(C) 안에서는 전역 객체, 즉 Window를 가리킨다[1]. 한편 다음 코드를 보자.

 

 

그런데 콜백 함수 내부에서 this를 잘 사용하고 있다.고 헷갈릴 수 있으나 콜백함수 내부에서 this를 사용한 것이 아닌 this를 콜백함수의 매개변수로 전달해준 것이므로 this는 배열 객체를 가리키고 있다.

 

한편 일반 함수와 다르게 ES6에 도입된 화살표 함수의 경우 함수 호출 시가 아닌 선언 시 this 바인딩 객체가 정적으로 결정된다. 언제나 상위 스코프의 this를 가리키며(화살표 함수는 this가 존재하지 않는다), 이를 Lexical this라고 한다. 다음은 OKKY에 있던 코드를 발췌했다.

 

 

A는 생성자 함수 내부이기에 this는 해당 객체를 가리킨다. 메소드는 화살표 함수로 선언되어 있고, 알파벳순으로 실행된다. B의 경우 상위 스코프는 Window이고, 전역 객체에는 nameA 속성이 존재하지 않으므로 undefined가 찍힌다. C의 경우 그 상위 스코프인 B의 this가 Window이므로 위와 같은 결과가 나오게 된다.

 

 

------

1. 내부함수 안의 this를 호출 객체, 즉 생성자 함수의 인스턴스로 만드는 방법은 아래 세 가지가 있다.

2. 단, 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.