생성자를 통한 상속

class를 사용하지 않고 prototype을 사용해 상속하는 방법을 알아본다.

상속을 위해 call함수를 사용한다.

function Player(username, level) {
    this.username = username;
    this.level = level;
}

Player.prototype.showUserInfo = function() {
    console.log(this.username + "'s level = " + this.level)
}

function PlayerPlus(username, level, pet) {
    Player.call(this, username, level);
    this.pet = pet;
}

PlayerPlus.prototype.showPet = function() {
    console.log(this.pet)
}

var newPlayer = new PlayerPlus('lumine', 57, 'paimon');

이 코드에서 Player.call()은 class에서 super()와 같은 역할을 한다.

 

하지만 지금은 showUserInfo 메소드가 PlayerPlus에 상속되지 않은 상태이다.

현재까지의 상황을 그림으로 표현하면 아래와 같다.

그림

showUserInfo가 상속되려면 위 그림에서 파란 화살표로 표시한 것 처럼

PlayerPlus의 prototype 객체의 __proto__가 Player의 prototype 객체를 가리키게 해야 한다.

 

코드를 수정해보면

function Player(username, level) {
    this.username = username;
    this.level = level;
}

Player.prototype.showUserInfo = function() {
    console.log(this.username + "'s level = " + this.level)
}

function PlayerPlus(username, level, pet) {
    Player.call(this, username, level);
    this.pet = pet;
}

PlayerPlus.prototype = Object.create(Player.prototype);

PlayerPlus.prototype.showPet = function() {
    console.log(this.pet)
}

var newPlayer = new PlayerPlus('lumine', 57, 'paimon');
newPlayer.showUserInfo()
newPlayer.showPet()

Player.prototype을 상속받는 객체를 만들어 PlayerPlus.prototype에 연결시킨다.

 

실행결과

실행이 잘 되는 것을 확인할 수 있다.

 

하지만 이 코드에는 문제가 있다.

Player.prototype을 상속받는 객체를 만들어서 PlayerPlus.prototype에 연결시켰기 때문에

PlayerPlus.prototype의 cosntructor가 Player가 되버리는 것이 문제이다(원래는 PlayerPlus가 constructor).

따라서 아래와 같이 코드를 수정해주어야 한다.

function Player(username, level) {
    this.username = username;
    this.level = level;
}

Player.prototype.showUserInfo = function() {
    console.log(this.username + "'s level = " + this.level)
}

function PlayerPlus(username, level, pet) {
    Player.call(this, username, level);
    this.pet = pet;
}

PlayerPlus.prototype = Object.create(Player.prototype);
PlayerPlus.prototype.constructor = PlayerPlus;

PlayerPlus.prototype.showPet = function() {
    console.log(this.pet)
}

var newPlayer = new PlayerPlus('lumine', 57, 'paimon');
newPlayer.showUserInfo()
newPlayer.showPet()

---

부스트코스 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs124

자바스크립트의 시작