수정 예정

결론

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.

설명

각 위치별 this가 가리키는 값

• 전역 : 전역 객체 window
• 일반 함수 내부 : 전역 객체 window (strict mode에서는 undefined)
• 메서드 내부 : 메서드를 호출한 객체
• 생성자 함수 내부 : 생성자 함수가 생성할 인스턴스

this 바인딩

바인딩 : 식별자와 값을 연결하는 과정

this 바인딩(this에 바인딩될 값)은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정됩니다.
함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하는 방식인 렉시컬 스코프와 달리 this 바인딩은 함수 호출 시점에 결정됩니다.

함수 호출 방식에 따른 this 바인딩

1. 일반 함수 호출 : 전역 객체 (strict mode에서는 undefined)
2. 메서드 호출 : 메서드를 호출한 객체
3. 생성자 함수 호출 : 생성자 함수가 (미래에) 생성할 인스턴스

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 : 첫 번째 인수로 전달한 객체

   1. apply 메서드 this로 사용할 객체와 인수 리스트(배열로 묶어 전달)를 인수로 전달받아 함수를 호출합니다.
      Function.prototype.apply(thisArg[, argsArray])
   2. call 메서드 this로 사용할 객체와 인수 리스트(쉼표로 구분한 리스트 형식)를 인수로 전달받아 함수를 호출합니다.
      Function.prototype.call(thisArg[, arg1[, arg2[, …]]])
   3. bind 메서드 this로 사용할 객체만 전달받고 함수는 호출하지 않습니다.

우선순위는 다음과 같습니다.
3(new 바인딩) > 4(명시적 바인딩) > 2(암시적 바인딩) > 1(기본 바인딩)

명시적 바인딩과 암시적 바인딩

• 명시적 바인딩 : apply, call, bind 메서드를 통해 this를 바인딩하는 것을 의미합니다.
• 암시적 바인딩 : 어떤 객체를 통해 함수가 호출될 때 그 객체를 this에 바인딩하는 것을 의미합니다.

정적 바인딩과 동적 바인딩

위에서 설명한 바인딩들은 모두 동적 바인딩에 해당합니다. 함수가 호출되는 상황마다 달라지기 때문입니다. 그러나 정적 바인딩이라는 말을 쓰는 때도 있습니다. 이는 바로 arrow function을 쓰는 경우에 해당합니다.

화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조하는데 이것을 lexical this라고 합니다. 마치 렉시컬 스코프처럼 함수가 정의된 위치에 결정된다고 해서 정적 바인딩이라고도 합니다.

참고

• [책] 모던 자바스크립트 Deep Dive (22_ this & 26_ ES6 함수의 추가 기능)
• javascript this의 4가지 동작 방식
• [JS] this 바인딩 관련 포스팅