자바스크립트 역시 객체지향언어로 객체와 클래스라는 개념이 존재하고 이를 사용할 수 있습니다. 이때 기존 클래스, 객체가 가지는 프로퍼티와 메소드를 상속 받을 수 있죠.

상속에 대한 이해는 매우 중요합니다. 상속은 간단하게 부모가 가진 유전적인 형질을 자손이 이어 받아 사용할 수 있다라고 얘기할 수 있습니다. 그럼 아래는 자바스크립트에서 생성자함수를 사용한 상속 방법에 대하여 알아봅니다.



# 자바스크립트 생성자를 사용하여 상속하기
먼저 간단한 Website라는 생성자 함수를 만들어봅니다. 생성자 함수는 프로토타입으로 여러개의 동일한 인스턴스를 만들 수 있게해줍니다.
Website = function(name) {
  this.name = name;
};

이제 생성자 함수 Website를 사용하여 webisfree라는 새로운 인스턴스를 생성해보겠습니다. new 키워드를 사용합니다.
webisfree = new Website('웹이즈프리');

실행하면 새로운 webisfree라는 인스턴스가 생겨났습니다. 확인해볼께요.
webisfree.name;

// '웹이즈프리' 출력함

생성자함수가 가진 name을 새로운 인스턴스 webisfree가 상속받아 계속 사용할 수 있게되었습니다.


! 기존 생성자함수에 새로운 메소드나 프로퍼티 추가하기
현재는 name이라는 프로퍼티만 존재합니다. 만약 Website 생성자에 새로운 메소드를 추가하고 싶다면? prototype으로 새로운 메소드를 추가할 수 있으며 인스턴스 역시 동일한 메소드를 사용할 수 있게됩니다. 아래는 name 프로퍼티를 반환하는 메소드 getName()을 만들어봅니다.
Website.prototype.getName = function() {
  return this.name;
};

Website에 새로운 메소드를 추가하면 이미 만든 webisfree 역시 이미 상속되어 getName()을 사용할 수 있습니다. 그럼 상속 받았는지 확인하기 위해서 getName() 메소드를 동작해봅니다.
webisfree.getName();

'웹이즈프리' // 출력함

역시 잘 동작하죠? 이처럼 간단하게 상속을 구현할 수 있습니다.

참고로 ES 6 부터는 class라는 키워드를 통해 클래스를 만들고 좀 더 쉽게 객체지향과 상속을 구현할 수 있으니 알아두세요.



# 다른 생성자(클래스)에서 상속 받기
만약 Website가 아닌 다른 생성자 함수 Favorite()가 있다고합시다. 이 번에는 Favorite 생성자 함수를 기존의 Website로 상속 받도록 해보겠습니다.
Favorite = function(favoriteSite) {
  this.favoriteSite = favoriteSite;
  this.getFavorite = function() {
    return this.favoriteSite;
  };
};

이제 Favorite은 favoriteSite 프로퍼티와 getFavorite() 메소드를 가지게 되었습니다. myFavoriteSite 이름의 인스턴스를 만들고 이를 확인해보겠습니다.
myFavoriteSite = new Favorite('FoodSite');
myFavoriteSite.getFavorite();

// "FoodSite" 반환함

잘 동작합니다.



! 기존 생성자로 상속하기
이제 새로운 생성자 Favorite()을 기존의 Webisfree를 상속해보려 합니다. 어떻게할까요? 이 경우 아래의 방법처럼 prototype을 사용하여 생상자를 확장합니다.
Favorite.prototype = new Website();

이제 새로운 인스턴스를 만들고 Website가 가지고 있던 getName()이 존재하는지 알아봅니다.
yourFavorite = new Favorite('GameSite');
yourFavorite.getName;


// 함수가 반환됨


보시는 것처럼 prototype으로 확장되어 yourFavorite에도 getName()이라는 메소드가 존재합니다. 다만 name이라는 프로퍼티 값이 없기 때문에 getName()을 사용해도 값을 출력되지 않을 것 입니다. 여기까지 상속에 대하여 몇 가지 알아보았습니다.

이처럼 간단하게 상속이 가능합니다. 다음번에는 ES 6의 상속 방법을 알아보겠습니다.