모던 자바스크립트 Deep Dive 22장 this

this 키워드란?

this 키워드를 알아보기 앞서 객체 리터럴 방식으로 생성한 객체의 경우를 살펴봐야 한다.

const circle = {
  radius: 5,
  getDiameter(){
    return 2 * circle.radius; // (*)
  }
}

(*) 객체 리터럴 방식으로 생성한 객체의 경우, 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 하지만 이런 경우는 바람직하지 않다.

인스턴스를 생성하기 전의 생성자 함수는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 그것이 this라는 특수한 식별자이다.

this 바인딩

this 바인딩은 함수 호출 시점에 따라 결정된다.

1. 일반 함수 호출
일반함수 내부의 this는 전역 객체(window 또는 global)를 가리킨다. strict mode에서는 undefined가 바인딩된다.

2. 메서드 호출
메서드 내부의 this에는 메서드를 호출한 객체(메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체)가 바인딩된다.

3. 생성자 함수 호출
생성자 함수의 내부의 this는 생성자 함수가 생성할 인스턴스(미래의 일)가 바인딩된다.

Function.prototype.apply/call/bind 메서드에 의한 간접 호출

• apply 와 call 메서드는 함수를 호출하고 호출한 함수의 this에 첫번째 인수로 전달한 특정 객체를 바인딩한다.
• bind 메서드는 함수를 호출하지 않고 호출한 함수의 this에 첫번째 인수로 전달한 특정 객체를 바인딩해서 함수를 새롭게 반환한다.