TIL 100. this 가 동작하는 원리와 용법

다른 객체지향 언어에서의 this는 클래스로 생성한 인스턴스를 말하지만,
자바스크립트에서의 this는 어디에서나 사용될 수 있습니다.

• this는 실행 컨텍스트가 생성될 때 결정됩니다.(this binding) 즉, this는 함수를 호출할 때 결정됩니다.
• 전역 공간에서의 this는 전역 객체(window)를 가리킵니다

  console.log(this);
  console.log(window);
  console.log(this === window); //true

• 함수와 메서드에 따라 this가 가리키는 게 다릅니다.

  var func = function (x) {
    console.log(this, x);
  };
  func(1); // Window { ... } 1 (함수는 독립 실행이 가능하므로 함수 호출의 this는 window)
  var obj = {
    method: func,
  };
  obj.method(2);  // { method: f } 2 
  								// (메서드는 자신을 호출한 대상에 대한 실행을 하므로, 메서드의 this는 메서드를 호출한 대상)

• 메서드의 내부라고 해도 함수로서 호출한다면 this는 전역객체 입니다.

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

• this 바인딩에 관해서는 함수를 실행하는 당시의 주변환경은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건입니다.(점 또는 대괄호가 있다면 그건 메서드)
• 화살표 함수에서는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없으므로 화살표 함수가 정의된 곳의 this를 그대로 사용합니다.