메서드 내부에서의 this
Q. this가 뭔가요?
this는 현재 실행되고있는 실행 컨텍스트 객체를 가리킵니다. 그래서 어디서나 쓸 수 있지만 어디서 사용하느냐에 따라 this가 가리키는 대상이 달라집니다.
Q. 어디서나 사용할 수 있어요?
자바스크립트는 전역 컨텍스트부터 함수가 호출될 때마다 함수의 컨텍스트가 생성되고 실행되기 때문에 어디서든지 현재 실행되고 있는 컨텍스트가 있습니다.
1 var a = 1;
2 var outer = function(){
3 var b = 2;
4 var inner = function(){
5 console.log(b);
6 var a = 3;
7 };
8 inner();
9 console.log(a);
10 };
11 outer();
12 console.log(a)위의 코드에서 1번 줄에서 실행되고 있는 컨텍스트는 전역 컨텍스트, outer함수 선언 및 할당부분을 지나 11번 줄에서 outer함수가 호출됨으로써 outer 컨텍스트가 실행되어 3~9번째 줄에서는 outer가 실행되고 있는 컨텍스트고 8번째 줄에서 inner 함수가 호출되므로써 5~6번째 줄에서는 inner가 실행되고 있는 컨텍스트고 inner함수가 종료되고 8번째 줄로 돌아와서 9번째 줄까지 다시 outer가 실행되고 있는 컨텍스트고 outer함수가 종료되고 11번째 줄로 돌아와서 12번째 줄까지 전역 컨텍스트가 실행되고 있는 컨텍스트 입니다.
Q. 그럼 끝이에요?
개념이 위와 같지만, 사실 위의 코드에서 어디서든지 console.log(this);로 현재 this가 뭔지 확인해보면 다 전역 객체를 출력할 것입니다. 왜냐하면 this는 함수를 호출한 방법에 따라 달라지는데, 위의 경우 함수를 선언하고 선언한 함수를 호출했기 때문입니다.
Q. 그럼 언제 달라져요?
단순히 선언한 함수를 호출할 때가 아니라 객체 안의 함수로써 메소드로써 함수를 호출할 때 this가 가리키는 객체가 달라집니다.
1 var func = function(x){
2 console.log(this,x);
3 };
4 func(1); // 전역객체
5 var obj = {
6 method: func
7 };
8 obj.method(2); // obj 객체 위의 코드에서 4번째 줄은 함수로서 func를 호출했고, 8번째 줄은 객체 안의 메소드로서 메소드에 할당된 func를 호출했습니다.
그랬더니 4번째 줄의 결과로 this는 전역 객체를 가리키고 8번째 줄의 결과로 this는 obj라는 객체를 가리킵니다. 이렇게 참조하는 함수는 1~3번째 줄에서 정의된 익명함수로 동일한데, 변수에 담아 호출한 경우와 obj 객체의 프로퍼티에 할당해서 호출한 경우에 this가 달라지게 됩니다.
Q. 그럼 어떻게 구분해요?
함수 앞에 점이 있는지 여부로 간단하게 구분할 수 있습니다. 위의 예시 코드에서 4번째 줄에서는 함수 앞에 점(.)이 없으므로 함수로 호출되어서 전역객체가 this가 되고, 8번째 줄에서는 함수 앞에 점(.)이 있으므로 객체의 메소드로 호출되어서 this가 그 객체가 됩니다.
Q. 그럼 점이 여러개면 어떻게 구분해요?
마지막 점 앞에 명시된 객체가 곧 this가 됩니다.
1 var obj = {
2 methodA: function(){console.log(this);},
3 inner: {
4 methodB: function(){console.log(this);}
5 }
6 };
7 obj.methodA(); // obj
8 obj.inner.methodB(); // obj.inner위의 코드의 경우 7번째 줄에서 this는 호출된 함수의 점(.) 바로 앞에 있는 obj이고 8번째 줄에서 this는 호출된 함수의 점(.) 바로 앞에 있는 inner가 됩니다.
끝
이상으로 메서드로서 호출할 때 그 메서드 내부에서의 this가 무엇을 가리키는지 알아보았습니다. 긴 글 읽어주셔서 감사합니다.
참고
정재남, ⌜코어 자바스크립트⌟, 위키북스, 2022, 65 - 71쪽
