함수와 메소드의 this, 그리고 화살표 함수

자바스크립트에서 this는 자세히 보지 않으면 쉽게 헷갈립니다. this를 명확히 이해하기 위해서는 자바스크립트의 함수와 메소드의 차이를 알아야 하는데요, 다음 소스에서 함수와 메소드의 차이를 보시겠습니다. 

var func = function(x) {
  console.log(this);
  console.log(x);
};
 
func(1);
 
var obj = {
  methA : func,
  inner : {
    methB : func
  }
};
 
obj.methA(2);
obj.inner.methB(3);

전역으로 선언된 func는 함수입니다. func(1)을 실행하면 this로 전역(window)이 찍히는걸 확인할 수 있습니다.

반면 obj 안에 있는 methA와 methB는 메소드입니다. 함수와는 달리 실행할 때 특정 객체가 명시되어있음을 알 수 있습니다.

이때 methA의 this는 obj 객체가 찍히고, methB의 this는 inner 객체가 찍히는 걸 볼 수 있습니다. 메소드의 this는 호출할 때 바로 앞에 있는 객체가 됩니다. 즉 점 표기법으로 볼 때 마지막 점 앞에있는 객체가 this가 되는것이지요. 

정리를 하면, 호출 할 때 객체에서 호출하는것이면 메소드이고, 이 메소드 내부의 this는 호출한 객체를 가르키게 됩니다. 반면 호출할 때 객체에서 호출하지 않으면 이는 함수이고 내부의 this는 전역(window)를 가르키게 됩니다. 

다음 소스를 보시겠습니다. 

var obj1 = {
 
  outer : function() {
    console.log(this);
 
    var innerFunc = function() {
      console.log(this);
    }
 
    innerFunc();
 
    var obj2 = {
      innerMethod: innerFunc
    }
 
    obj2.innerMethod();
  }
 
}
 
obj1.outer();

여기서 21번의 호출은 메소드 호출로 this는 outer가 찍히고, 10번의 호출은 함수 호출로 this는 Window가 찍히게 됩니다. 16번의 호출은 메소드 호출로 this는 obj2 를 가르킵니다.

10번의 함수로써 호출이 조금 헷갈릴 수 있는데, 결국 앞에 호출하는 객체가 없기 때문에 함수로써의 호출이 된 것입니다. 

특정 함수 내부에서 실행하였는데 this가 전역을 바라보는 문제를 보완하고자 ES6에서는 this를 바인딩하지 않는 화살표 함수를 새로 도입하였습니다. 화살표 함수를 사용하면 함수를 호출할 때 객체를 명시하지 않더라도 상위 스코프의 this를 그대로 활용할 수 있습니다. 

var obj1 = {
 
  outer : function() {
    console.log(this);
 
    var innerFunc = () => {
      console.log(this);
    }
 
    innerFunc();
 
    var obj2 = {
      innerMethod: innerFunc
    }
 
    obj2.innerMethod();
  }
  
}

6번 라인을 화살표 함수로 변경했을 때에는 10번의 호출과 16번의 호출의 this가 모두 outer를 가르키는것을 확인할 수 있습니다.

-- 출처 : 코어 자바스크립트(http://www.yes24.com/Product/Goods/78586788), https://velog.io/@jscn/%EC%BD%94%EC%96%B4-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-03.-this