자바스크립트 클래스 상속과 프로토타입 상속 비교

09 Sep 2023

javascript

자바스크립트는 객체 기반의 프로그래밍 언어로서, 상속을 통해 코드의 재사용성과 구조화를 도모합니다. 자바스크립트에서 상속을 구현하는 방법에는 클래스 상속과 프로토타입 상속이 있습니다. 이번 포스트에서는 이 두 가지 상속 방법을 비교하고, 각각의 특징과 장단점을 알아보겠습니다.

클래스 상속

ES6부터 자바스크립트에는 클래스가 도입되었습니다. 이전에는 프로토타입 기반의 상속을 사용해야 했지만, 클래스를 사용하면 보다 간편하게 상속을 구현할 수 있습니다. 클래스 상속의 구현 방법은 다음과 같습니다.

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

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayAge() {
    console.log(`I am ${this.age} years old.`);
  }
}

const child = new Child('John', 10);
child.sayHello(); // Hello, John!
child.sayAge(); // I am 10 years old.

위 코드에서 Parent 클래스는 name 속성과 sayHello 메소드를 가지고 있습니다. Child 클래스는 Parent 클래스를 상속받았으며, name 속성과 sayHello 메소드를 사용할 수 있습니다. 또한 Child 클래스는 age 속성과 sayAge 메소드를 추가로 가지고 있습니다.

클래스 상속은 extends 키워드를 사용하여 부모 클래스를 상속받을 수 있습니다. super 키워드는 부모 클래스의 생성자를 호출하는 역할을 합니다. 이를 통해 부모 클래스의 속성과 메소드를 자식 클래스에서 사용할 수 있습니다.

프로토타입 상속

기존에는 자바스크립트에서 클래스를 지원하지 않았을 때, 프로토타입을 이용한 상속을 사용했습니다. 프로토타입 상속은 prototype 객체를 이용하여 객체 간의 상속을 구현하는 방법입니다. 예시 코드를 통해 확인해보겠습니다.

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

Parent.prototype.sayHello = function () {
  console.log(`Hello, ${this.name}!`);
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayAge = function () {
  console.log(`I am ${this.age} years old.`);
}

const child = new Child('John', 10);
child.sayHello(); // Hello, John!
child.sayAge(); // I am 10 years old.

위 코드에서 Parent 함수는 name 속성과 sayHello 메소드를 가지고 있습니다. Child 함수는 Parent 함수를 호출하면서 name 속성을 상속받을 수 있습니다. Child 함수의 프로토타입은 Parent 함수의 프로토타입을 상속받도록 설정되어 있습니다. 그리고 Child 함수에는 age 속성과 sayAge 메소드가 추가로 정의되어 있습니다.

프로토타입 상속은 Object.create()를 사용하여 객체의 프로토타입을 설정할 수 있습니다. 또한 constructor 속성을 별도로 설정해줘야 합니다.

클래스 상속 vs 프로토타입 상속

이제 클래스 상속과 프로토타입 상속의 특징과 차이점을 살펴보겠습니다.

클래스 상속의 특징

extends 키워드와 super 키워드를 사용하여 부모 클래스의 속성과 메소드를 상속받을 수 있습니다.
클래스는 생성자(constructor)를 가지고 있으며, super 키워드를 이용하여 부모 클래스의 생성자를 호출할 수 있습니다.
클래스의 인스턴스는 new 키워드를 통해 생성됩니다.

프로토타입 상속의 특징

prototype 객체를 이용하여 상속을 구현합니다.
Object.create() 메소드를 사용하여 프로토타입을 설정할 수 있습니다.
생성자 함수로부터 객체를 생성하고, 기존의 객체를 상속받습니다.

선택의 기준

어떤 상속 방법을 선택해야 할까요? 일반적으로 ES6 이전의 자바스크립트 환경에서는 프로토타입 상속을 사용했습니다. 하지만 ES6에서 도입된 클래스는 보다 직관적이고 간편한 문법을 제공해줍니다. 따라서 ES6 이상의 버전을 사용할 수 있다면 클래스 상속을 사용하는 것이 좋습니다. 그러나 기존의 코드베이스나 런타임 환경에 따라 프로토타입 상속을 사용해야 할 수도 있습니다.

마무리

자바스크립트를 이용하여 상속을 구현하는 방법은 클래스 상속과 프로토타입 상속 두 가지가 있습니다. 클래스 상속은 ES6에서 도입된 기능으로서 보다 간편하고 직관적인 문법을 제공합니다. 프로토타입 상속은 기존의 자바스크립트에서 많이 사용되었던 방법으로, 객체의 프로토타입을 설정하여 상속을 구현합니다. 어떤 방법을 사용하더라도 목적에 맞게 선택하여 상속을 구현해야 합니다.