JS 클래스 상속 시 'this' 오류 해결! super()와 바인딩 문제 집중 분석

친절하고 쉽게 이해하실 수 있도록, Classes 사용 시 자주 발생하는 문제와 대체 방법(ES5 문법 등)을 한국어로 설명해 드릴게요.

class 문법은 사실 자바스크립트의 프로토타입(Prototype) 기반 상속을 조금 더 익숙한 객체 지향 문법처럼 보이도록 하는 "문법적 설탕(Syntactic Sugar)"입니다. 그래서 이 특징 때문에 종종 헷갈리는 문제가 발생합니다.

클래스 상속 시, 자식 클래스(extends로 상속받은 클래스)의 constructor에서는 반드시 부모 클래스의 constructor를 호출하는 super()를 가장 먼저 호출해야 합니다.

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    //  오류 발생 지점: super()를 호출하기 전에 this를 사용하려고 했어요.
    // console.log(this.name); 
    
    super(name); //  해결책: 부모 클래스 생성자 호출은 항상 가장 먼저!
    this.age = age; 
  }
}

// const kid = new Child('철수', 10); // 주석을 풀면 오류가 발생할 수 있습니다.

클래스의 메서드(method)를 추출하여 별도의 변수에 저장하거나, 다른 곳(예 이벤트 리스너)에 콜백 함수로 전달할 때, this의 값이 원래 의도와 다르게 바인딩되어 undefined가 될 수 있습니다. 이는 클래스 메서드가 일반 함수처럼 동작하기 때문입니다.

class Counter {
  constructor() {
    this.count = 0;
    //  해결책 1: bind 사용
    // this.increment = this.increment.bind(this);
  }

  //  해결책 2: 화살표 함수로 속성을 정의 (가장 권장)
  // 화살표 함수는 선언될 때 this를 상속받기 때문에 바인딩 문제가 없어요.
  increment = () => { 
    this.count++;
    console.log(this.count);
  }
  
  // 일반 메서드
  /*
  increment() {
    this.count++;
    console.log(this.count);
  }
  */
}

const counter = new Counter();
// 버튼 클릭을 흉내 내기 위해 메서드를 따로 변수에 저장합니다.
const func = counter.increment; 

// func() 호출 시, 일반 함수처럼 호출되지만, 
// 화살표 함수로 정의했기 때문에 this가 'counter' 인스턴스를 유지합니다.
func(); // 1
func(); // 2

class 문법을 사용하지 않고, 기존의 ES5 프로토타입 기반 상속 문법으로 동일한 기능을 구현할 수 있습니다. 이 방법을 알면 자바스크립트의 원리를 더 깊이 이해하는 데 도움이 됩니다.

class의 constructor는 생성자 함수로, class 내의 메서드는 프로토타입으로 대체됩니다.

// 클래스(Class) 대체: 생성자 함수 (Constructor Function)
function Person(name, age) {
  // constructor 내부의 속성 정의와 동일
  this.name = name;
  this.age = age;
}

// 클래스 내부의 메서드 대체: prototype에 추가
Person.prototype.greet = function() {
  console.log(`안녕하세요, ${this.name}입니다.`);
};

const person1 = new Person('민수', 25);
person1.greet(); // 안녕하세요, 민수입니다.

extends 키워드 없이 Object.create()와 생성자 함수 호출을 이용해 상속을 구현합니다.

// 부모 생성자 함수 (Parent)
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name}가 소리를 내요.`);
};

// 자식 생성자 함수 (Child)
function Dog(name, breed) {
  //  super() 대체: 부모 생성자 함수 호출
  Animal.call(this, name); 
  this.breed = breed;
}

//  extends 대체: 프로토타입 상속
// Animal의 프로토타입을 상속받은 새 객체를 Dog의 프로토타입으로 설정
Dog.prototype = Object.create(Animal.prototype); 
// Dog.prototype.constructor를 Dog로 재설정 (필수)
Dog.prototype.constructor = Dog; 

// 자식 클래스만의 메서드 추가
Dog.prototype.bark = function() {
  console.log('멍! 멍!');
};

const myDog = new Dog('바둑이', '진돗개');
myDog.speak(); // 바둑이가 소리를 내요. (부모 메서드)
myDog.bark();  // 멍! 멍! (자식 메서드)