상속이란 객체지향 프로그래밍의 핵심 개념이며, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말합니다.
자바스크립트는 프로토타입을 기반으로 상속을 구현합니다!
상속을 함으로써 중복을 제거하고 기존의 코드를 재사용할 수 있습니다!
자바스크립트의 상속은 어떤식으로 구현되는지 살펴봅시다!
다음 예시코드를 먼저 살펴볼게요!
예제 코드
// 생성자 함수
function Circle(radius) {
this.radius = radius;
this.getArea = function () {
return Math.PI * this.radius ** 2;
}
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
console.log(circle1.getArea === circle2.getArea); // false
console.log(circle1.getArea()); // 3.14...
console.log(circle2.getArea()); // 12.566....위 예시에서 나오는 생성자 함수는 동일한 프로퍼티(메서드 포함) 구조를 갖는 객체 여러개를 생성할 때 유용합니다. 그러나 위 예제의 생성자 함수는 문제가 있습니다.
무슨 문제가 있지?
Circle 생성자 함수가 생성하는 모든 인스턴스는 radius 프로퍼티와 getArea 메서드를 가지고 있습니다.
radius 프로퍼티 값은 인스턴스마다 다릅니다. (같을 수도 있습니다!)
getArea 메소드는 모든 인스턴스가 동일한 내용의 메서드를 사용하므로 하나만 생성하여 사용하는게 바람직합니다.
위 코드의 문제점은 Circle 생성자함수를 사용하여 만드는 모든 인스턴스가 생성될 때 마다 getArea 메소드를 중복 생성한다는것입니다!
그러면 인스턴스를 생성할 때 마다 동일한 메소드를 계속 중복적으로 생성하게 됩니다.. ☹️
비효율적일 뿐더러 추 후 퍼포먼스에도 악영향을 끼치게 되겠죠..!
이러한 문제는 프로토타입(prototype)을 기반으로 상속을 구현함으로써 해결 할 수 있습니다!
프로토 타입 기반 상속
다음 코드를 봅시다!
// 생성자 함수
function Circle(radius) {
this.radius = radius;
}
Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.14...
console.log(circle2.getArea()); // 12.566....Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받습니다.
getArea 메서드는 단 하나만 생성되어 Circle.prototype의 메서드로 할당되어 있습니다.
따라서 Circle 생성자 함수가 생성하는 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있게되는것이죠!
이렇게하면 더 이상 인스턴스를 생성할때마다 getArea를 다시 생성하지 않고, 동일한 메소드는 상속을 통해 공유받아 사용하게 됩니다!
생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현 없이 상위 객체인 프로토타입의 자산을 공유하여 사용 할 수 있습니다!
참고
모던 자바스크립트 Deep Dive
