[모던 JS Deep Dive] 22장 - this

22.1 this 키워드

  - 객체

    - 프로퍼티; 객체 고유의 상태 데이터

    - 메서드; 상태 데이터를 참조하고 조작(변경)하는 동작

  - 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면

    먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함

  - this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 self-referencing variable임,

    this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드 참조 가능

  - this는 JS 엔진에 의해 암묵적으로 생성됨, 코드 어디서든 참조 가능 (전역, 함수 내부 모두 참조 가능)

  - 함수 호출 시 arguments 객체와 this가 암묵적으로 함수 내부로 전달됨

  - this 바인딩 (this가 가리키는 객체/값)은 함수 호출 방식에 의해 동적으로 결정됨

    - 객체 리터럴 내부; 메서드 호출한 객체 가리킴

    - 생성자 함수 내부; 생성자 함수가 (미래에) 생성할 인스턴스를 가리킴

    - strict mode 적용된 일반 함수 내부; undefined (일반 함수 내부에서는 this 사용할 필요 없음)

22.2 함수 호출 방식과 this 바인딩

  - this 바인딩은 함수 호출 방식에 따라 동적으로 결정됨

    - 렉시컬 스코프는 함수 정의가 평가되어 객체 생성 시점에 상위 스코프 결정

    - this 바인딩은 함수 호출 시점에 결정됨

  - 일반 함수 호출

    - 전역 객체가 바인딩됨

    - strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩됨

    - var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티임 (const, let은 아님)

    - 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 전역 객체가 바인딩됨

    - 콜백 함수가 일반 함수로 호출되면 콜백 함수 내의 this에도 전역 객체가 바인딩됨

    - 화살표 함수 내부의 this는 상위 스코프의 this를 가리킴

  - 메서드 호출

    - 객체 리터럴 내부의 this는 메서드를 호출한 객체 가리킴 (메서드를 소유한 객체가 아님)

      - 메서드는 프로퍼티에 바인딩된 함수임

      - 메서드는 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체임 (function object)

      - 다른 객체의 프로퍼티에 할당해서 다른 객체의 메서드가 될 수 있고,

        일반 변수에 할당하여 일반 함수로도 호출 가능

    - 메서드 내부의 this는 프로퍼티로 메서드를 가리키고 있는 (소유하는) 객체와는 관계가 없고,

      메서드를 호출한 객체에 바인딩됨

    - 프로토타입 메서드 내부에서 사용된 this도 해당 메서드를 호출한 객체에 바인딩됨

  - 생성자 함수 호출

    - 생성자 함수가 미래에 생성할 인스턴스

    - new 연산자와 함께 호출하면 생성자 함수로 호출됨 (new 연산자 없으면 일반 함수 호출)

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

    - 함수 내부의 this는 인수에 의해 결정됨

    - Function.prototype의 3가지 메서드

      - 모든 함수가 상속받아 사용 가능

      - Function.prototype.apply 메서드

       - 매개변수: this로 사용할 객체, 호출할 함수의 인수를 배열로 묶어서 전달

       - 함수 강제 호출

       - arguments와 같은 유사 배열 객체에 배열 메서드 사용 가능하도록 해줌

      - Function.prototype.call 메서드

       - 매개변수: this로 사용할 객체, 인수를 쉼표로 구분해서 나열해서 전달

       - 함수 강제 호출

       - arguments와 같은 유사 배열 객체에 배열 메서드 사용 가능하도록 해줌

      - Function.prototype.bind 메서드

        - this로 사용할 객체만 전달, 함수는 호출 안함

        - 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this 불일치 문제 해결에 유용

        - bind 메서드로 콜백 함수 내부의 this 바인딩 전달