자바스크립트 생성자함수의 상속 알아보기

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

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

# 자바스크립트 생성자를 사용하여 상속하기

먼저 간단한 Website라는 생성자 함수를 만들어봅니다. 생성자 함수는 프로토타입으로 여러개의 동일한 인스턴스를 만들 수 있게해줍니다.

이제 생성자 함수 Website를 사용하여 webisfree라는 새로운 인스턴스를 생성해보겠습니다. new 키워드를 사용합니다.

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

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

! 기존 생성자함수에 새로운 메소드나 프로퍼티 추가하기

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

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

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

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

# 다른 생성자(클래스)에서 상속 받기

만약 Website가 아닌 다른 생성자 함수 Favorite()가 있다고합시다. 이 번에는 Favorite 생성자 함수를 기존의 Website로 상속 받도록 해보겠습니다.

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

잘 동작합니다.

! 기존 생성자로 상속하기

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

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


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

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