상속이란?

객체지향 프로그래밍(OOP, Object Oriented Programming)의 한 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있는 것을 말한다.

자바스크립트의 상속

자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

프로토타입이란?

프로토타입은 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 한 객체의 부모 객체 역할을 하는 객체로서 다른 객체에 공유되는 프로퍼티나 메서드를 제공한다.

상속을 사용해야 하는 이유

• 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.
• 자바스크립트의 상속은 코드를 재사용함으로써 중복을 제거한다.
  • 코드를 재사용하면 개발 비용을 줄일 수 있다.
  • 코드를 재사용하면 메모리 낭비를 방지할 수 있다.

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    return Math.PI * this.radius ** 2;
  };
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea);    // false
console.log(circle1.getArea());    // 3.145
console.log(circle2.getArea());    // 12.566

위의 코드를 살펴보면,

• Circle 생성자 함수는 인스턴스를 생성할 때마다 getArea 메서드를 중복 생성
• getArea 메서드가 중복 생성되고 생성된 모든 인스턴스가 getArea 메서드를 중복 소유
  • 내용이 동일한 메서드를 중복 소유하므로 메모리 낭비
  • 인스턴스를 생성할 때마다 메서드를 생성하므로 퍼포먼스에 악영향

// 상속
// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// 프로토타입
Circle.prototype.getArea = function () {
  return Math.PI * this.radius ** 2;
};

const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea === circle2.getArea);    // true
console.log(circle1.getArea());    // 3.145
console.log(circle2.getArea());    // 12.566

• 생성자 함수가 생성한 인스턴스들이 공통적으로 가지는 프로퍼티나 메서드는 따로 상속받아 사용하는 것이 좋다.
  • Circle 생성자 함수는 공통적으로 getArea 메서드를 사용하므로, getArea 메서드를 프로토타입에 추가하여 상속받을 수 있도록 한다.
  • 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
  • 이렇게 해서 Circle 생성자 함수가 생성한 모든 인스턴스는 하나의 getArea 메서드를 공유할 수 있다.

출처 : 모던 자바스크립트 Deep Dive