◎ 함수 호출 패턴

함수가 객체의 속성이 아닌 경우 메소드가 아닌 함수로서 호출된다.

이 패턴으로 함수를 호출할 때  this는 전역객체 ( 웹브라우저에서는 Window ) 에 바인딩된다.

var Obj = {
    fn : function(){
		console.log(this);
		function insideFn(){
			console.log(this);
		}
		insideFn();
	}
}
Obj.fn()
// {fn: ƒ}      - 객체 Obj
// Window ...   - 전역객체 Window ( insideFn 호출결과 )

객체 Obj 의 메소드 fn 에서 this 는 부모객체 Obj 에 바인딩 되었으므로 

당연히 fn 의 내부함수 insideFn 에서도 this 를 Obj 에 바인딩 할것으로 예상할 수 있다. 

하지만 insideFn 의 this 는 전역객체 Window 로 바인딩되었다.

 

  - 이 특성은 언어 설계단계의 실수라고 볼 수 있다. 

    위 경우에는 insideFn 의 외부함수인 fn 의 this 변수에 바인딩 되었어야 했다고 볼 수 있다.

 

내부함수의 this 는 메소드의 this 와는 다른, 전역객체를 참조하기 때문에 메소드를 적절히 도울 수 없다.

But, 이 문제를 해결하기 위한 쉬운 대안이 있다!

var Obj = {
    fn : function(){
        var that = this;
    	console.log(that);
		function insideFn(){
			console.log(that);
		}
		insideFn();
	}
}
Obj.fn()
// {fn: ƒ}      - 객체 Obj
// {fn: ƒ}      - 객체 Obj

위와 같이 메소드에서 this 를 변수( 관례로 that 사용 )에 담고

내부함수에서는 이 변수를 통해 메소드의 this 에 접근할 수 있도록 하는 것이다.