[JS] 클래스 상속과 프로토타입 체이닝

자바스크립트에서 클래스 상속과 프로토타입은 밀접하게 연결되어 있는 개념입니다.

자바스크립트는 프로토타입 기반 언어이지만, ES6에서 클래스를 도입하여 더 직관적인 객체지향 프로그래밍 스타일을 제공합니다.

하지만 클래스도 결국 프로토타입 기반 상속을 내부적으로 사용하므로, 클래스를 이해하려면 프로토타입의 개념을 잘 이해하는 것이 중요합니다. 이번 글에서는 자바스크립트의 클래스 상속과 프로토타입의 관계에 대해 알아보고자 합니다.

자바스크립트에서의 상속

자바스크립트는 프로토타입 기반 언어입니다. 즉, 자바스크립트의 객체는 다른 객체를 상속할 수 있는 구조를 가지고 있으며, 이를 통해 메서드나 속성을 공유할 수 있습니다. 자바스크립트의 상속은 클래스 기반 상속과 다르게 프로토타입 기반 상속을 사용합니다.

프로토타입 기반 상속

프로토타입 기반 상속에서 객체는 다른 객체를 부모로 설정하여 그 부모 객체의 속성이나 메서드를 상속받습니다. 모든 자바스크립트 객체는 __proto__라는 숨겨진 속성을 가지고 있는데, 이 속성은 해당 객체의 프로토타입을 가리킵니다.

예시: 프로토타입 상속

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`${this.name} says hello!`);
};

const dog = new Animal('Buddy');
dog.sayHello();  // "Buddy says hello!"

위 코드에서 Animal 함수는 객체 생성자 역할을 하며, Animal.prototype에는 sayHello 메서드가 정의되어 있습니다. dog 객체는 Animal 객체의 인스턴스이므로, Animal.prototype에 정의된 sayHello 메서드를 상속받을 수 있습니다.

ES6 클래스와 프로토타입

ES6에서 도입된 클래스는 자바스크립트의 기존 프로토타입 상속을 더 직관적이고 읽기 쉬운 문법으로 표현한 것입니다. 클래스는 내부적으로 프로토타입 기반 상속을 사용하지만, 문법적으로는 마치 클래스 기반 언어(C++, Java 등)처럼 사용할 수 있습니다.

클래스 상속

자바스크립트 클래스에서 상속을 구현할 때는 extends 키워드를 사용합니다.

클래스 상속도 결국 부모 클래스의 프로토타입을 상속하는 형태로 동작합니다.

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

  sayHello() {
    console.log(`${this.name} says hello!`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);  // 부모 클래스의 생성자 호출
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks!`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayHello();  // "Buddy says hello!" (Animal에서 상속받은 메서드)
myDog.bark();      // "Buddy barks!" (Dog에서 정의된 메서드)

위 코드에서 Dog 클래스는 Animal 클래스를 상속받습니다.

Dog 클래스는 Animal의 생성자와 메서드를 상속하며, super(name)을 사용해 부모 클래스의 생성자를 호출합니다.

클래스 상속의 내부 동작

클래스의 extends는 프로토타입 상속을 기반으로 합니다. Dog 클래스가 Animal 클래스를 상속받을 때, 자바스크립트는 Dog.prototype이 Animal.prototype을 참조하도록 설정합니다. 즉, Dog.prototype이 Animal.prototype의 프로토타입을 상속하게 됩니다.

console.log(Dog.prototype);      // Dog의 프로토타입
console.log(Dog.prototype.__proto__);  // Animal의 프로토타입

위 코드를 실행하면, Dog.prototype이 Animal.prototype을 참조하는 것을 확인할 수 있습니다.

 

이 관계가 바로 프로토타입 상속입니다.

클래스와 프로토타입 상속의 차이점

클래스 상속은 문법적으로는 더 직관적이고 편리하지만, 내부적으로는 여전히 프로토타입 상속을 사용하고 있습니다.

즉, 클래스 상속과 프로토타입 상속은 기능적으로 동일하지만, 클래스 상속이 더 깔끔하고 이해하기 쉬운 문법을 제공하는 것입니다.

역시 문법적 설탕인가?

클래스 상속과 프로토타입 체인

클래스를 상속한 후, 객체에서 속성이나 메서드를 찾을 때 자바스크립트는 프로토타입 체인을 따라갑니다.

즉, 객체에서 메서드를 호출하면, 해당 객체의 프로토타입에 메서드가 없다면 부모 클래스의 프로토타입을, 그다음엔 부모의 부모 클래스의 프로토타입을 차례대로 확인하게 됩니다.

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog.hasOwnProperty('name'));  // true
console.log(myDog.hasOwnProperty('bark'));  // false

위 예시에서 myDog는 name 속성을 직접 가지고 있지만,

bark 메서드는 Dog 클래스의 프로토타입에 정의되어 있기 때문에 hasOwnProperty로 확인하면 false를 반환합니다.

이는 자바스크립트의 프로토타입 체인을 따라가며 Dog.prototype에서 bark 메서드를 찾기 때문입니다.

다만, 상속을 받았기 때문에 bark 메서드에 대해 사용가능하긴 합니다.

 

결론

자바스크립트의 클래스 상속과 프로토타입 상속은 사실상 동일한 상속 메커니즘을 다루고 있습니다. 클래스는 프로토타입 상속을 좀 더 직관적으로 사용할 수 있게 만든 문법적인 장치에 불과합니다. 자바스크립트에서 클래스 상속을 사용할 때, 그 내부에서 프로토타입 체인을 따라가며 속성과 메서드를 상속받는다는 점을 기억해야 합니다.

 

함께 얘기해보고 싶은 부분 
자바스크립트는 프로토타입 기반 언어이다
-> 요즘 프론트엔드 개발자들은 리액트를 주로 사용한다
-> 리액트의 함수형 컴포넌트에서는 프로토타입 개념이 잘 사용되지 않는다?
-> 그렇다면 우리는 왜 프로토타입에 대해 잘 알아야하는가