자바스크립트에서는 상속을 prototype으로 구현한다. es2015에서 class문법이 추가되었지만 class 문법은 결국 protorype을 이용한 상속을 다른 문법으로 표현한 것이기 때문에 자바스크립트 개발자라면 prototype을 이용한 상속 방법에 대해 잘 알아야한다.

상속 Inheritance

프로그래밍에서 상속이라고 하면 일반적으로 코드 재사용 문제의 해결책으로 많이 쓰이게 된다.

function Animal(age) {
  this.age = age;
}

Animal.prototype.eat = function() {
  console.log('yummy!');
};.

Animal.prototype.sleep = function() {
  console.log('...zzz');
};

function Person(age, name) {
  this.age = age;
  this.name = name;
}

Person.prototype.eat = function() {
  console.log('yummy!');
};

Person.prototype.sleep = function() {
  console.log('...zzz');
};

Person 생성자 함수에서 달라지는 부분은 name 뿐이고 나머지는 모두 중복되고 있다. 이럴때 공통되는 부분을 상속받아 코드 중복을 피할 수 있다.

상속 구현해보기

function Animal(age) {
  this.age = age;
}

Animal.prototype.eat = function() {
  console.log('yummy!');
};

Animal.prototype.sleep = function() {
  console.log('...zzz');
};

function Person(age, name) {
  Animal.call(this, age);
  this.name = name;
}

Person.prototype = Object.create(Animal.prototype);
Person.prototype.constructor = Person;

const person1 = new Person(10, 'foo');

person1.eat();//yummy!
person1.sleep();//...zzz

어떤 일이 일어난걸까? 하나하나 살펴보도록 하자.

Animal.call(this, age)

call메서드는 함수의 메서드로써 함수의 this값을 바꿀 때 사용되는 메서드이다. 지금 저 코드에서 this는 Person 생성자 함수의 인스턴스가 된다.

그래서 Animal.call(this, age) 함수가 실행되면 Person 생성자 함수의 인스턴스에 Animal 생성자함수의 내용을 주입시키게된다.

Person.prototype = Object.create(Animal.prototype)

먼저 Object.create()가 어떤 메서드인지 알아야한다. Object.create()는 특별한 객체를 만들어주는데 함수의 인자로들어온 객체를 prototype으로 가지는 객체를 만들어준다.

그 다음 Animal.prototype을 prototype으로 가지는 객체를 Person.prototype에 할당 해준다.

Person.prototype.constructor = Person

prototype은 항상 constructor라는 속성을 가지고 있고 constructor는 항상 자기 자신을 가리킨다.

하지만 Animal.prototype을 prototype으로 가지는 객체를 Person.prototype에 할당해주면 constructor가 Animal 생성자 함수가 된다. 그래서 마지막으로 constructor에 자기자신을 재할당 해주면 상속이 끝난다.