Chapter 4 - Item 37. this의 암묵적 바인딩을 이해하라

자바스크립트에서 this는 함수가 어떻게 호출되었는지에 따라 값이 결정된다.
특히 메서드 호출과 일반 함수 호출에서 동작이 다르다.

const obj = {
  name: "Alice",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

obj.greet(); // Hello, Alice  (this → obj)

점(.)을 통해 호출되면, 점 앞의 객체가 this가 된다.

 

 

메서드를 변수에 담거나 콜백으로 넘기면, 원래 객체와의 연결(바인딩)이 사라진다.

const greetFn = obj.greet;
greetFn(); // Hello, undefined  (this → 전역 객체 or undefined)

이 경우 호출 방식이 일반 함수 호출로 바뀌어 this가 전역 또는 undefined가 된다(엄격 모드일 경우).

 

책(ES5 기준)에서는 this를 잃지 않기 위해 다음 방법을 사용하라고 했다.

 

1. bind로 고정

const boundGreet = obj.greet.bind(obj);
boundGreet(); // Hello, Alice

 

 

2. self = this 패턴

const obj2 = {
  name: "Bob",
  greet() {
    const self = this;
    setTimeout(function () {
      console.log(`Hello, ${self.name}`);
    }, 1000);
  }
};
obj2.greet(); // Hello, Bob

 

 

 

---

 

 

 

ES6 이후에는 화살표 함수가 this를 정의 시점의 값으로 고정하므로 더 간단해졌다.

const obj3 = {
  name: "Carol",
  greet() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};
obj3.greet(); // Hello, Carol

 

화살표 함수는 자신만의 this를 가지지 않고, 바깥 스코프의 this를 그대로 사용한다.

따라서 콜백 안에서 this를 잃는 문제를 깔끔하게 해결 가능하다.

 

 

 

 

 

• 문제: 메서드를 다른 변수나 콜백으로 넘기면 this가 바뀌어 의도한 객체를 참조하지 못한다.
• ES5 해결책: bind 또는 self = this 패턴.
• ES6 이후: 화살표 함수 사용으로 this 유지가 간결해짐.
• 실무에서는 클래스 필드 + 화살표 함수를 조합하면 인스턴스 상태와 this 바인딩을 동시에 안전하게 보장할 수 있다.