this를 알아봅시다.
그거 아니고, 저거도 아니고, 이거!
this 키워드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있는 키워드입니다. 직관적으로 잘 지은 것 같아요. 객체 리터럴 방식으로 생성한 객체는 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있습니다.
1// 객체 내부에서 2const june = { 3 name: "hyeonsu", 4 5 getName() { 6 return june.name; // 자신이 속한 객체인 june을 재귀적으로 참조 가능합니다. 7 // 하지만 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않으며 바람직하지 않다고 합니다. 8 }, 9};
1function Circle(radius) { 2 // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없습니다. 3 Circle.radius = radius; // 이런식으로는 불가능 합니다. 4} 5 6Circle.prototype.getDiameter = function () { 7 // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없습니다. 8 return Circle.radius * 2; // 이런식으로는 불가능 합니다. 9}; 10 11// 생성자 함수로 인트턴스를 생성하려면 먼저 생성자 함수를 정의해야 합니다. 12const circle = new Circle(5);
생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 전이기 때문에 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없습니다.
그래서 자바스크립트에서는 this 키워드를 통해서 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 만들었습니다.
this는 호출 때 결정된다.
자바스크립트의 this는 함수가 호출되는 방식에 따라 this가 달라집니다. 그러니까 동적으로 결정됩니다.
- 일반 함수 호출
- 메서드 호출
- 생성자 함수 호출
- Function.prototype.apply/call/bind 메서드에 의한 간접 호출
- 화살표 함수 (ES6)
일반 함수 호출
일반 함수안에서 this는 기본적으로 전역 객체가 바인딩됩니다.
1function foo() { 2 console.log(this); // window 3 4 function bar() { 5 console.log(this); // window 6 } 7 8 bar(); 9} 10 11foo();
일반적으로 this는 자기 참조 변수로, 자기 자신을 참조하기 위한 변수인데 인스턴스를 생성하지 않는 일반 함수에서는 this는 의미가 없죠. 그래서 전역 객체를 가리킵니다.
1(function () { 2 "use strict"; 3 4 console.log(this); // undefined 5 6 function foo() { 7 console.log(this); // undefined 8 } 9 10 foo(); 11})();
그리고 위와 같이 strict mode가 적용된다면 일반 함수 내부의 this는 undefined가 바인딩됩니다.
어떤 함수라도 일반 함수로 호출되면 this는 전역 객체입니다.
1var value = 1; 2 3const obj = { 4 value: 100, 5 foo() { 6 console.log(this); // { value: 100, foo: f } 7 8 setTimeout(function () { 9 console.log(this); // window 10 console.log(this.value); // 1 11 }, 100); 12 }, 13};
위의 예시에서 setTimeout의 콜백함수로 일반 함수를 넘겼기 때문에, 일반 함수안에서의 this는 무조건 전역 객체를 가리키는 것을 볼 수 있습니다.
메서드 호출
메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩됩니다. 주의할 것은 메서드 내부의 this는 메서드를 소유한 객체가 아니라 메서드를 호출한 객체에 바인딩됩니다.
1const anotherStudy = { 2 name: "TypeScript OOP", 3 getName() { 4 return this.name; 5 }, 6}; 7 8const currentStudy = { 9 name: "Modern deep dive JavaScript", 10}; 11 12currentStudy.getName = anotherStudy.getName; 13 14// 메서드를 호출한 객체를 참조합니다. 15// (.) 앞에 있는 객체에 집중하세요! 16console.log(currentStudy.getName()); // Modern deep dive JavaScript 17 18const getName = anotherStudy.getName; 19 20// getName 함수를 메서드로 호출한 것이 아니라, 일반 함수로 호출 21console.log(getName()); // '' 22// 일반 함수는 무조건 전역 객체를 바인딩하니까, window.name을 출력하지만 없으니 빈칸 출력
생성자 함수 호출
생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩됩니다.
1function Study(name) { 2 // 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스를 가리킵니다. 3 this.name = name; 4 this.getName = function () { 5 return this.name; 6 }; 7} 8 9const TypeScriptOOPStudy = new Study("TypeScript OOP"); 10 11const ModernDeepDiveJavaScriptStudy = new Study("Modern deep dive JavaScript"); 12 13console.log(TypeScriptOOPStudy.getName()); // TypeScript OOP; 14console.log(ModernDeepDiveJavaScriptStudy.getName()); // Modern deep dive JavaScript;
apply, call, bind 메서드
세 가지 메서드는 위의 세 가지 방법과는 달리 강제적으로 this를 바꿉니다.
apply, call은 함수를 호출한다.
apply와 call은 호출할 함수에 인수를 전달하는 방식만 다를 뿐 동일하게 동작합니다.
1function getThisBinding() { 2 console.log(arguments); 3 return this; 4} 5 6const thisArg = { a: 1 }; 7 8// apply의 기본 동작은 함수 호출입니다. 9// getThisBinding을 호출하면서 this를 넘겨줍니다. 10console.log(getThisBinding.apply(thisArg, [1, 2, 3])); 11// Arguments(3) [1, 2, 3, callee: f, Symbol(Symbol.iterator): f] 12// {a : 1} 13 14// call의 기본 동작은 함수 호출입니다 15// getThisBinding을 호출하면서 this를 넘겨줍니다. 16console.log(getThisBinding.call(thisArg, 1, 2, 3)); 17// Arguments(3) [1, 2, 3, callee: f, Symbol(Symbol.iterator): f] 18// {a : 1}
apply와 call 메서드는 보통 arguments와 같은 유사 배열 객체에 배열 메서드를 사용하고 싶을 때 사용할 수 있습니다. arguments는 유사 배열 객체로, 원래는 배열 메서드를 적용할 수 없습니다. 하지만 call과 apply와 함께라면 가능하죠
1function convertArgumentsToArray() { 2 console.log(arguments); 3 4 const arr = Array.prototype.slice.call(arguments); 5 // const arr = Array.prototype.slice.apply(arguments); 6 console.log(arr); 7 8 return arr; 9} 10 11convertArgumentsToArray(1, 2, 3); // [1, 2, 3]
bind는 this로 사용할 객체만 전달한다.
apply, call과 다르게 bind는 함수를 실행시키지 않고, this 객체만 전달합니다.
1function getThisBinding() { 2 return this; 3} 4 5const thisArg = { a: 1 }; 6 7// bind는 함수를 호출하지 않는다. 8console.log(getThisBinding.bind(thisArg)); // getThisBinding 9 10// bind는 함수를 호출해야 적용된 것을 볼 수 있다. 11console.log(getThisBinding.bind(thisArg)()); // { a: 1 }
화살표 함수 (ES6)
화살표 함수에서는 부모의 this를 따라갑니다.
1const obj = { 2 name: "hyeonsu", 3 getName() { 4 console.log(this.name); // hyeonsu 5 const inner = () => { 6 console.log(this.name); // hyeonsu 7 }; 8 9 // this는 호출할 때 봐야합니다. 10 // 화살표함수는 부모의 this를 따라갑니다 11 // inner의 부모는 getName 12 // getName의 this는 obj객체 13 // 그러므로 inner의 this는 obj객체 14 inner(); 15 }, 16}; 17 18// getName을 부른 객체는 obj이므로 19// getName의 this는 obj입니다. 20obj.getName();
화살표 함수는 부모의 this를 따라가는데, 그럼 부모가 어떻게 호출되었는지 확인을 해야 최종적으로 화살표 함수의 this를 알 수 있습니다.
this를 예측할 수 없는 경우
외치고 들어갑시다.
this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다. this는 함수가 호출될 때 결정된다...
1const header = document.querySelector("header"); 2 3header.addEventListener("click", function () { 4 console.log(this); // 뭐가 될 것 같나요? 5});
위의 예제에서 this가 뭐가 나올 것 같나요?
저는 위에서 공부한대로라면 window가 나올줄 알았습니다. 왜냐하면 일반 함수안의 this니까요.
1const header = document.querySelector("header"); 2 3// 자세히 살펴보세요. 콜백함수는 "호출"되지 않았어요. 4// 호출된 것은 "addEventListener" 함수입니다. 5header.addEventListener("click", function () { 6 console.log(this); // <header></header> 7});
위의 코드는 addEventListener 내부적으로 동작하는 방식에 의해서 addEventListener를 호출한 객체가 할당이 됩니다. 하지만 이것은 addEventListener가 이렇게 동작한다고 명시되어있는 문서에서 보아서 알 수 있는거지 우리가 분석할 수 있는 것은 아닙니다.
실제로 addEventListner는 c++로 구현되었다고 합니다. 만약 자바스크립트로 구현한다면 어떤 식으로 구현되어 있을까요?
1// X 2const header = { 3 addEventListener: function (eventName, callback) { 4 callback(); // 이 방식은 아닐겁니다. 이 경우에 this는 window니까요. 5 }, 6}; 7 8// O 9// 이 경우는 단순히 추측을 해본 겁니다. 실제로 이런식으로 동작하지 않습니다. 10const header = { 11 addEventListener: function (eventName, callback) { 12 callback().call(this); // 이 경우에는 header를 잘 가리킵니다. 13 callback().call(header); // 이 경우에는 header를 잘 가리킵니다. 14 }, 15};
예측 가능하게 하려면 화살표 함수로 콜백함수를 넘기면 됩니다.
1header.addEventListener("click", () => { 2 console.log(this); // window 3});
위의 경우에는 화살표 함수의 "부모" 스코프가 this가 됩니다. 부모 스코프를 결정할 땐 "호출"이 아닌 "선언" 할 때 입니다. 스코프가 결정나는 것은 "호출"이 아니라 "선언"이니까요
화살표 함수를 "선언" 할 때의 부모는 anonymous입니다. 그렇기 때문에 anonymous의 this는 window가 되는 것이죠.
오늘의 결론
- this는 함수 또는 메서드 또는 생성자가 호출될 때 동적으로 결정된다.
- 동적으로 결정되는 것이기 때문에 예측하지 못하는 경우도 있다.
