this는 호출될 때 결정된다.

const obj = {
    name : 'jiho',
    sayName(){
        console.log(this.name);
        function inner(){
            console.log(this.name);
        }
        inner();
    }
  }
  obj.sayName(); // jiho, ''

 

위의 예제에서 

jiho, ''가 나온 이유는.

먼저 sayName의 앞에 obj부모가 붙어있다. 그러므로 첫번째 출력에서 name이 출력. 다음 inner() 호출 시점에 앞에 객체가 붙은 것도 아니고, new bind apply call등이 붙어있지 않다. 그러므로 전역객체가 this이다.

 

다른 예제 하나를 더 살펴보자.

만약 콜백함수에서 this라면 어떻게 될까

 

const header = document.querySelector('someclass');
header.addEventListener('click', function(){
    console.log(this);
});
// header 태그 출력.

 

다음과 같이 작성한다면, header의 html태그가 그대로 출력이 된다. 

무슨 일일까?

그렇다면 여기서 추론해볼 수 있다.

아마 addEventListener은 다음과 같이 짜여졌을것이다. 예상한다

const obj ={
	addEventListener : function(eventName, callBack){
	callBack.call(obj)
    },
 };

다음과 같이 call함수를 써서 this 지정 자리에 obj를 지정 했을 것이다.

그리고 만약 누군가가 callback함수의 this를 묻는다면 그 호출부가 보이지 않는 이상 "모른다"가 정확한 답변일 것이다.

즉 정리하자면,

 

this는 선언시점이 아닌, 호출 시점에 따라 결정되고, 호출될때 this가 바뀌는 경우는
앞에 객체가 붙어서 호출되는경우
new 가 붙어서 호출되는 경우
bind apply call이 뒤에 붙는 경우
또는 호출되는 함수가 화살표 함수인경우(부모를 this로 상속)

그 외는 this가 바뀌지않는다 보통 전역 객체인 window