다음 문서와 상호 보완하여 공부하도록 하자:this

3.0 this의 핵심

• 이전에 봤던 예제의 실행컨텍스트 객체 그림이다(콜스택에 전역 - outer - inner 순서로 각 함수의 실행 컨텍스트 객체가 쌓인 것도 함께 표현이 되어 있다).
• 아무튼 여기 ThisBinding이 있던 것을 기억하는가? 실행 컨텍스트가 활성화될때 ThisBinding이 이루어진다는 것을 기억하는 것이 핵심이라고 한다.
  • 다시, 실행 컨텍스트가 생성되는 순간에 this를 바인딩한다. 그런데 이 실행 컨텍스트는 언제 생성된다 했지? 바로 이 컨텍스트에 해당하는 함수가 호출되는 순간이다. 즉 this도 실행컨텍스트와 마찬가지로 함수가 호출될때 비로소 결정되는 것이다.
  • “즉, this라는 것은 정적으로 코드만 봤을때 얘의 this는 무엇이다~ 라고 바로 예측할 수 있는 것이 아니라, 이 함수를 어떤 식으로 호출했느냐에 따라서 얼마든지 달라질 수 있는 것(동적으로 바인딩 된다)이다” … 라고 한다.
  • this가 함수가 호출될 때 결정된다 ⇒ 즉 this는 함수가 호출되는 방식에 따라 다르다!
    • 그럼 구체적으로 호출하는 방식에 따라 this가 어떻게 달라지는가? 는 다음 다섯가지로 나누어서 구분할 수 있다. 그걸 하나씩 살펴보자.
      1. 전역 공간 호출 (코드 실행 처음에 자동으로 이루어짐)
      2. (일반) 함수로서 호출
      3. 메서드로서 호출
      4. callback으로서 호출
      5. 생성자함수(constructor)로서 호출

3.1 전역 공간에서의 this

• 앞에 이미 설명했듯이, 전역 공간 컨텍스트는 코드가 실행되면 처음에 무조건 자동으로 생성된다. 따라서 이때의 this는 항상 같은 값으로 딱 정해져 있다.

• 전역 공간에서의 this는 전역 객체를 가리킨다. 전역 객체란? 이건 그냥 딱 암기하면 된다.

  • 브라우저에서는 window,

  • node.js에서는 global

    … 이라는 객체가 바로 전역 공간에서의 this가 가리키는 값이다.

• 굳이 원리를 따지자면 전역 객체의 정의가 “전역 컨텍스트를 실행하는 주체” 이기 때문에 그렇게 된다. 즉 브라우저에서는 window, node.js에서는 global이라는 객체가 전역 컨텍스트를 실행하는 주체이기 때문에 전역 객체인 것이다.

  • 실제로 정의한 함수를 window.function1() 와 같이 마치 윈도우 객체의 메소드처럼 호출하는 것이 가능하다. 그리고 console.log(window)를 해보면 내부에 내가 정의한 함수를 가지고 있는 것을 확인할 수 있다.

• 따라서 JS가 실행되는 환경, 즉 런타임에 따라 전역 객체의 정보가 달라진다.

  • 브라우저에서 console.log(this); 하면 window 객체가, node.js에서는 global 객체 내용이 찍힌다.
  • 이 window와 global은 ECMAScript에서 직접 정의한 객체가 아니고, ECMAScript가 ‘전역 객체는 이러이러해야 한다’라고 정의해둔 내용(일종의 가이드 같은 느낌?)을 따라서 런타임에서, 즉 각 호스트 환경(브라우저와 노드)에 따라서 알아서 제공하는 구현체라고 한다. 그래서 전역 객체를 host 객체라고도 하는 것이다.
    • 즉 ECMAScript가 제시한 기본적인 조건들은 만족하겠지만, 전역 객체는 호스트 환경에 따라서 구체적인 내용은 달라질 수 있는 녀석인 것.

3.2 함수 호출시 함수 내부에서의 this

• 반전으로 함수 호출 시에도 this는 전역 객체를 가리킨다고 한다. 즉 window 아니면 global을 가리킨다.

• 왜냐하면 일반 함수 호출의 주체는 사실 전역객체이기 때문이다. 우리가 일반적으로 함수를 호출할때는 사실 앞에 전역객체가 생략되어 있다고 볼 수 있다. 예를들어 함수 a(); 를 이렇게 호출한다고 했을때, 사실은 window.a();를 한 것과 같다. 그리고 실제로 브라우저 콘솔에서 이렇게 입력해도 실행이 된다.

  

  • 근데 a(); 같은 경우는 뭐 가장 바깥쪽에 있으니까 전역 객체가 호출했다고 치자. 그러면 c()의 경우는 어떨까? b() 안에 있으니 호출의 주체가 b인가?
    • 정답은 “그렇지 않다”라고 한다. 즉 c 내부의 this도 c가 b안에서 호출되었더라도 여전히 전역 객체를 가리킨다.

  ⇒ 이러한 JS의 작동 방식을 오류라고 말하는 사람도 있고, JS의 고유 특성이라고 보는 시각도 있다고 한다. 어쨌든 ES5까지는 이렇게 작동하기 때문에, 알아두어야 한다.

  • 즉 ES5까지는 일반적으로 그냥 함수를 호출할때 함수 내부의 this는 전부 무조건 전역 객체를 가리킨다는 사실을 알아두자.

  • 그럼 이런 경우는 어떨까? method 함수인 e 내부에서 호출된 f 는??

    

    • … 놀랍게도 그냥 일반 함수로서 평범하게 f(); 이러케 호출되었기 때문에 묻지도 따지지도 않고 f 내부의 this는 전역 객체를 가리킨다고 한다. (결국 window.f(); 를 한 것과 같다는것)
      • 이 못마땅한 바인딩을 우회(전역 객체를 가리키지 않도록)하는 방법과
      • 메소드 함수인 e내부의 this 바인딩에 대해서는 다음 단원? 에서 알랴줌.

• ES6 - Arrow function

  • ES6에서는 위 내용이 문제라는 의견을 좀더 반영해서 this 바인딩을 하지 않는 arrow function이란게 나왔다고 한다. (arrow function에 이런 중요한 차이가 있었군?)
    • 즉 arrow function은 상위 컨텍스트에 있는 this를 그대로 가져다 쓴다고 한다.

3.3 method로서 호출시 method 함수 내부에서의 this

실제 출력 결과. 자막에도 나와 있듯이, b메소드 내부에서 this를 출력한 결과를 보면 a 객체와 똑같이 생긴 것(b메소드를 가지고 있는 객체의 모습)을 확인할 수 있다.

• 우선 method로서 호출한다는 것이 무엇인지 명확히 짚고 넘어가자 ⇒ 위 예제처럼 b가 객체의 메소드 함수로서 정의되어 있을때, a.b()와 같이 쩜(.) 다음에 호출되는 상황을 method로서 호출되었다고 한다.
• method로서 호출했을 때의 this는 호출한 대상 객체에 바인딩 된다고 한다.
  • 즉 메소드명 앞에있는 ‘쩜’ 앞에 있는 녀석에 바인딩된다. 즉 위 예제에서는 b내부의 this는 a라는 객체를 가리키게 된다.
• 원래 객체지향 언어에서 메소드라는 것은 클래스의 “인스턴스와 관련된 동작”을 의미한다고 한다.
  • 하지만 JS에서는 굳이 클래스의 인스턴스가 아니더라도, 그냥 객체(Object)와 관련되기만 하면 그 동작은 그냥 메소드라고 친다.
  • 즉 JS에서는 기본적으로는 그냥 함수랑 똑같아도, 이게 어떤 ‘객체와 관련된 동작’을 하게 되면, 그때는 메소드라고 불르는 것.