3장 this 정리

정리

다음 규칙은 명시적 this 바인딩이 없는 한 성립

• 전역 공간에서의 this는 전역 객체(브라우저에서는 window, Node.js에서는 global)를 참조합니다.
• 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체를 참조합니다.
• 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조합니다. 메서드의 내부함수에서도 같습니다.

 var obj1 = {
	outer: function(){
		console.log(this)  // (1)
		var innerFunc = function(){
			console.log(this)  // (2) (3)
		}
		innerFunc()

		var obj2 = {
			innerMethod: innerFunc
		}
		obj2.innerMethod()
	}
}
obj1.outer()

(1): obj1, (2): 전역객체(window), (3): obj2가 호출됩니다.

• 생성자 함수에서의 this는 생성될 인스턴스를 참조합니다.

명시적으로 this 바인딩을 한 경우 this를 추측하는 방법

• call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출
• bind메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듬
• 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.

arrow function

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어 상위 스코프의 this를 그대로 활용할 수 있습니다.

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

이렇게 하면 변수를 우회하지 않아도 apply/call/bind를 사용하지 않아도 됩니다.