Object Oriented Programming(4)
이번에는 OOP의 가장 큰 특징 중 하나인 상속(Inheritance)에 대해 포스팅 해보겠다.
설명에 앞서, ES6에 도입된 class에 대해 살짝 언급해야겠다.
실제로는 OOP를 구현할때 prototype 대신 class를 많이 사용한다.
그 이유는 당연히 class를 쓰는게 더 편하기 때문이다.
그러면 prototype에 대해 몰라도 될까? 아니다.
자바스크립트에서 class는 prototype을 기반으로 한 syntactic sugar이기 때문에
class 문법만 쓰더라도 prototype으로 OOP를 구현하는 방법에 대해 알고 있어야 한다고 생각한다.
생성자 Book을 상속한 생성자 Magazine을 만들어보겠다.
Magazine은 Book을 상속받고 추가로 month를 갖는다.
---Book
function Book(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
Book.prototype.getSummary = function () {
return `${this.title} was book`;
};
---Magazine
function Magazine(title, author, year, month) {
Book.call(this, title, author, year); // (1)
this.month = month;
}
Magazine.prototype = Object.create(Book.prototype) // (2)
Magazine.prototype.constructor = Magazine; // (3)
const mag1 = new Magazine('my mag', 'lee', 2021, 03)
mag1.getSummary() // "my mag was book" (4)
(1) 생성자 함수 Book을 그대로 호출한다. call을 이용해 this 키워드를 바꿔준다. 추가 property인 month는 따로 추가한다.
(2) Book의 프로토타입을 상속받는다.
(3) 위의 (2)에서 Book의 프로토타입을 상속받으면서 constructor도 Book으로 바뀌었는데, 다시 원래대로 Magazine으로 바꿔준다.
(4) Magazine이 Book의 prototype을 상속받았기 때문에 mag1이 getSummary에 접근할 수 있다.
