자바스크립트 this 바인딩의 4가지 규칙

The 4 Rules of 'this' Binding in JavaScript

• 동작 방식
  • 엄격 모드('use strict')가 아닐 때: this는 전역 객체를 가리킵니다.
    (브라우저에서는 window, Node.js에서는 global)
  • 엄격 모드일 때: this는 undefined가 됩니다.
    전역 객체를 오염시키는 것을 막기 위한 안전장치입니다.

function sayHello() {
  console.log(this);
}
 
sayHello(); // 브라우저 비엄격 모드에서는 window 객체 출력

• 동작 방식
  : 객체.메서드() 형태로 호출하면, this는 바로 그
  호출의 주체인 객체
  를 가리킵니다.

const person = {
  name: '홍길동',
  greet: function() {
    console.log('안녕하세요, 저는 ' + this.name + '입니다.');
  }
};
 
person.greet(); // '안녕하세요, 저는 홍길동입니다.' 출력 (this는 person 객체)

• 동작 방식
  • 함수.call(this로_지정할_객체, 인자1, 인자2...)
  • 함수.apply(this로_지정할_객체, [인자1, 인자2...])
  • 함수.bind(this로_지정할_객체): this가 고정된 새로운 함수를 반환합니다.

function introduce(city) {
  console.log(`저는 ${this.name}이고, ${city}에 삽니다.`);
}
 
const user = { name: '이순신' };
 
// introduce 함수의 this를 user 객체로 강제하고, '서울'을 인자로 전달하여 호출
introduce.call(user, '서울'); // '저는 이순신이고, 서울에 삽니다.' 출력

• 동작 방식
  : new 키워드로 함수를 호출하면, 다음 일들이 순서대로 일어납니다.
  1. 빈 객체가 새로 생성됩니다.
  2. this는 바로 이
     새로 생성된 객체
     를 가리키게 됩니다.
  3. 생성자 함수 내부의 코드가 실행됩니다.
  4. 별도의 return문이 없으면, this가 가리키는 새 객체가 자동으로 반환됩니다.

function Person(name) {
  this.name = name;
  // return this; 가 암묵적으로 존재
}
 
const person1 = new Person('강감찬');
console.log(person1.name); // '강감찬' 출력 (this는 person1 객체)

이미지 제안: 4가지 바인딩 규칙의 우선순위를 보여주는 피라미드. 최상단에 new, 그 아래 bind/call/apply, 암시적, 최하단에 전역(기본)을 배치하여 시각적으로 우선순위를 표현.

바인딩 규칙 우선순위

const user = {
  name: '유관순',
  getFriends: function() {
    const friends = ['김구', '안중근'];
    // 화살표 함수는 바깥 함수인 getFriends의 this(user 객체)를 그대로 사용합니다.
    friends.forEach(friend => {
      console.log(`${this.name}의 친구: ${friend}`);
    });
  }
};
 
user.getFriends(); // '유관순의 친구: 김구', '유관순의 친구: 안중근' 정상 출력

자바스크립트의 this는 기본적으로

함수가 호출되는 방식

에 따라 동적으로 결정됩니다.

단독으로 호출되면 전역 객체나 undefined를, 객체의 메서드로 호출되면 그 객체를, new 키워드로 호출되면 새로 생성된 객체를, 그리고 call이나 apply를 사용하면 명시적으로 지정된 객체를 가리키게 됩니다.

가장 큰 차이는 this를 가지는지 여부입니다.

일반 함수

는 호출 방식에 따라 this가 동적으로 결정되는 자신만의 this를 가집니다.

반면,

화살표 함수

는 자신만의 this를 가지지 않고, 대신 자신을 감싸고 있는

상위 스코프의 this를 그대로 물려받아 사용

합니다.

이러한 렉시컬 this 특성 때문에, 콜백 함수 등에서 this가 달라지는 문제를 쉽게 해결할 수 있습니다.

• this는
  함수가 호출되는 방식
  에 따라 결정됩니다.
• 이 방식에는 **전역, 암시적, 명시적, new**의 4가지 규칙이 있으며, 우선순위가 존재합니다.
• 화살표 함수
  는 이 모든 규칙의 예외로, 자신만의 this 없이 상위 스코프의 this를 사용합니다.

• MDN - this↗
• You Don't Know JS - this & Object Prototypes↗