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

22.1. this 키워드

• 객체의 메서드는 자신이 속한 객체와 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 함
  • 자신이 속한 객체를 가리키는 식별자 참조하여 프로퍼티를 참조
• 객체 리터럴 방식으로 생성한 객체
  • 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조함
  • 식별자에 생성된 객체가 할당된 이후에 메서드를 호출되므로 식별자 참조 가능
• 생성자 함수 방식으로 생성한 객체
  • 생성자 함수 정의 후, new 연산자와 함께 생성자 함수를 호출하는 단계가 필요함
  • 정의하는 시점에서는 인스턴스가 가리키는 식별자를 알 수 없음 -> this 제공
• this: 자신이 속한 객체 또는 생성할 인스턴스(프로퍼티 및 메서드)를 가리키는 자기 참조 변수
  • 함수 호출 시 arguments 객체와 this 객체를 암묵적으로 생성하여 내부에 전달
  • 지역 변수처럼 사용 가능
  • 어디서든 참조 가능
  • But, 자바스크립트의 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됨
    • strict mode가 적용된 일반 함수 내부에서는 undefined 바인딩

// this는 어디서든 참조 가능
// 1. 전역 this: 전역 객체 window
console.log(this); // window

function square(number) {
  // 2. 일반 함수 내부 this: 전역 객체 window
  console.log(this); // window
  return number * number;
}
square(2);

const person = {
  name: 'Lee',
  getName() {
    // 3. 메서드 내부 this: 메서드 호출한 객체
    console.log(this); // {name: 'Lee', getName: f}
    return this.name;
  }
}
console.log(person.getName()); // Lee

function Person(name) {
  // 4. 생성자 함수 내부 this: 생성할 인스턴스
  this.name = name;
  console.log(this); // Person {name: 'Lee'} 
}
const me = new Person('Lee');

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

22.2.1. 일반 함수 호출

• 전역 객체 바인딩
• 중첩 함수, 콜백 함수 등 어떠한 함수도 일반 함수로 호출되면 전역 객체가 바인딩됨
  • 간접 호출 및 화살표 함수 등으로 this 바인딩을 일치시킬 수 있음

22.2.2. 메서드 호출

• 메서드 호출할 때 마침표 연산자 앞에 기술한 객체가 바인딩
  • 메서드를 소유한 객체가 아닌 호출한 객체에 바인딩

22.2.3. 생성자 함수 호출

• 생성자 함수가 생성할 인스턴스를 바인딩

22.2.4. Function.prototype.apply / call / bind 메서드 간접 호출

• apply / call
  • this로 사용할 객체와 인수 리스트를 전달하여 함수 호출
• bind
  • 전달한 인수로 this 바인딩을 교체한 함수를 새롭게 생성하여 반환
  • 함수를 호출하지 않으므로 명시적으로 호출해야 함
    
    

[출처] 모던 자바스크립트, Deep Dive