클래스 상속 프로토 타입 vs Class 문법

 

프로토타입 방식

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

// 부모의 프로토타입에 메서드 추가
Parent.prototype.greet = function() {
  console.log(`Hello, ${this.name}!`);
};

// 자식 생성자 함수
function Child(name, toy) {
  // 부모 생성자 호출 및 속성 상속
  Parent.call(this, name); // Parent함수를 this와 함께 호출 name을 매개변수로 넘김
  this.toy = toy;
}

// 프로토타입 체인을 통한 상속 설정
Child.prototype = Object.create(Parent.prototype); //Parent.prototype을 상속받는 새로운 객체를 생성한다.

// 자식의 프로토타입에 메서드 추가 (오버라이딩)
Child.prototype.play = function() {
  console.log(`${this.name} is playing with ${this.toy}.`);
};

// 사용 예시
const myChild = new Child('Johnny', 'blocks');
myChild.greet(); // Hello, Johnny!
myChild.play();  // Johnny is playing with blocks.

 

Class 문법

// 부모 클래스
class Parent {
  constructor(name) { //constructor메서드 정의
    this.name = name;
  }

  greet() { //greet메서드 정의
    console.log(`Hello, ${this.name}!`);
  }
}

// 자식 클래스
class Child extends Parent { //Child클래스가 Parent클래스를 상속
  constructor(name, toy) {
    // 부모 클래스의 생성자 호출 및 속성 상속
    super(name);
    this.toy = toy;
  }

  // 자식 클래스의 메서드 추가
  play() {
    console.log(`${this.name} is playing with ${this.toy}.`);
  }
}

// 사용 예시
const myChild = new Child('Johnny', 'blocks');
myChild.greet(); // Hello, Johnny!
myChild.play();  // Johnny is playing with blocks.

 

부모 클래스와 자식 클래스를 생성하고 부모 클래스의 메서드를 상속받아 사용하는 것을 보여준다.

ES6(ES2015)부터 class 키워드를 통해 클래스를 정의 할 수 있게 되었다.

클래스 문법은 프로토타입 방식을 좀 더 간결하게 사용할 수 있도록 해준다. 클래스 문법은 내부적으로 프로토타입을 사용하며, 생성자 함수, 프로토타입 메서드, 크랠스 상속을 더 직관적으로 정의할 수 있게 해준다.

클래스 문법은 가독성을 향상시키고 더 편리한 문법을 제공한다. 하지만 클래스 문법은 기본적으로는 프로토타입을 기반으로 하기 때문에 클래스 문법을 사용하더라도 내부적으로는 프로토타입이 동작하고 있다.