This 바인딩

실행 컨텍스트 함수가 실행이 될때 this는 함께 결정이 된다.
함수가 호출 될때, this는 결정이 된다.

함수를 어떻게 호출 하느냐에 따라 this의 상황이 달라진다.

• 전역공간에서의 this는 전역객체를 가리킨다. (window 객체)

함수를 호출하는 방법

1) 우리가 잘 알고 있는 함수 호출
2) 메서드를 이용한 함수 호출

총 2가지 방법이 있습니다.
이 둘의 구분하는 차이는 독립성 에 있습니다.

함수는 그 자체로 독립적인 기능을 수행하는 반면,
메서드는 자신을 호출하는 대상 객체에 관한 동작을 수행한다.

var func = function (x){
 console.log(this, x)
}

func(1)	// window, 1

var obj = {
 method : func
}

obj.method(2)	//  { method: f }  - > obj를 참조

함수로서 호출과 메서드로서 호출을 알수 있는 방법은 앞에 . 이 있는지만 확인 하면 됩니다.
. 을 붙여 호출 할 경우에는 메서드 호출법이고, 그 외에는 함수 호출법입니다.

메서드 내부에서 this

this에는 호출한 주체에 대한 정보를 담습니다. 어떤 함수든 메서드로 호출 할 경우 . 앞에는 객체가 항상 있습니다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this 입니다.

함수 내부에서의 this

아까 말했듯이 this는 함수가 실행되는 상황에서의 객체를 저장합니다.
하지만 어떤 함수를 함수로써 호출할 경우에는 this가 지정되지 않습니다. 그래서 맨 처음 실행컨텍스트를 실행했을 때의 전역객체를 가르키게 됩니다.

var obj1 ={
	outer : function () {
    	console.log( this ) 		// {outer : f}
        var innerFun = function () {
        	console.log(this);
        }
        innerFun ();				// window 												//{innerMethod : f}      
        var obj2 = {
        	innerMethod : innerFun
        };
        obj2.innerMethod();
    }
}
obj1.outer();

. 이 있고 없고의 this의 값이 바뀝니다.
this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지ㅡ 함수 내부인지 등)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건입니다.

위의 경우에서 innerFun() 함수에서 전역객체를 바라보지 않고 그 전 단계의 객체를 가지고 싶을 경우에는 변수에다가 this를 담아서 사용합니다.

var obj1 ={
	outer : function () {
    	console.log( this ) 			// {outer : f}
        var innerFun = function () {
        	console.log(this);
        }
        innerFun ();	 				// window
        
        var self = this;
        var obj2 = {
        	innerMethod : innerFun
        };
        obj2.innerMethod(self);			//{outer : f}
   //outer라는 함수 내에 변수를 만들어서 this를 담았기 때문에 outer라는 객체를 가르킨다.
        
    }
}
obj1.outer();

이런 방법은 ES6가 나오기 전까지 사용되었던 방법이다.
하지만 이런 번거로움을 덜고자 ES6에서 화살표 함수가 나오게 되었다.

함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자 this를 바인딩 하지 않는 화살표 함수를 새로 도입했다고 합니다.

실행컨텍스트가 실행 되면 저절로 this가 바인딩 되는데 이 부분을 실행하지 않게 되어, 상위 스코프의 this를 그대로 활용할 수 있게 되었습니다.

var obj1 ={
	outer : function () {
    	console.log( this ) 		// {outer : f}
        var innerFun = ()=> {
        	console.log(this);
        }
        innerFun ();				 // {outer : f}
	}        
}
obj1.outer();