자바스크립트 This 간단 정리

코어자바스크립트: http://www.yes24.com/Product/Goods/78586788

this란?

• this는 함수를 호출할때 결정된다.
  • 즉, 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.
• 전역공간에서의 this
  • 전역객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역객체이기 때문이다.
    • 브라우저에서는 window고, node에서는 global이다.
• 함수와 매소드에서의 this
  • 함수에서의 this는 전역 컨텍스트를 나타낸다. 이유는 자바스크립트의 모든 요소는 전역컨텍스트의 프로퍼티로 생성이 되기 때문이다.
  • 하지만, 객체안에 담기는 매소드의 경우는 선언한 객체의 프로퍼치를 나타낸다.
• 매소드 내부의 this
  • 어떤 함수를 매소드로 호출하는 주체는 함수명 앞의 객체입니다.
    즉, 마지막의 명시된 객체가 곧 this가 된다.
• arrow function의 this
  • arrow funtion은 this를 가지지 않기 때문에 상위 스코프의 this를 그대로 사용한다.
• callback 함수에서의 this
  • callback 함수에서의 this는 사용법에 따라 달라지기 때문에 명확히 알수가 없다.
  • 만일 객체에서 callback을 사용했다면 위의 매소드의 this와 같이 호출한 주체를 this로 가리킨다.
• 생성자 함수 내부의 this
  • 객체지향에서 생성자를 class, class를 통해 만든 객체를 인스턴스라고 한다.
  • 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀이다.
  • 생성자를 호출하면 prototype 프로퍼티를 참조하는 객체를 만들고, this는 생성자를 통해 만들어진 이러한 인스턴스를 바라본다.

this의 우회방법

var obj = {
  outer : function(){
    console.log(this) // {outer : f}
    var inner1 = function(){
      console.log(this) // window {...}
    }
    inner1();

    var self = this
    var inner2 = function(){
      console.log(self) // {outer : f}
    }
    inner2()
  }
}
obj.outer();

위와 같은 코드로 this를 상위 스코프에서 self라는 변수에 할당한다.
이후, 내부에서 사용하는것 만으로 this 문제를 해결할수있다.

함수와 매서드의 차이

함수는 function혹은 arrow function으로 선언이된것을 함수라고 합니다.
이때 자바스크립트는 변수의 값으로 함수를 사용할수 있습니다.

만일, 어느 객체의 속성값으로 함수를 담아서 사용한다면 이것을 매소드라고 한다.

arrow function과 그냥 function의 차이

arrow function는 스스로의 this와 argument를 가지지 않는다.

즉, 화살표 arrow function 내부의 this는 상위 스코프의 this를 그대로 사용이 가능하다.