1. 프로토타입이란?
프로토타입은 제품, 서비스의 초기버전 또는 시제품을 말한다. 프로토타입은 여러 형태와 수준을 가질 수 있는데, 간단한 종이모형부터 소프트웨어 시뮬레이션, 인터랙티브 웹 프로토타입까지 다양한 형태로 개발될 수 있다. 단순한 생각에서 아이디어를 시각화하여 컨셉을 구체화하고, 생각만으로는 미처 발견하지 못했던 문제점을 발견하고 수정하는 과정을 거쳐 제품, 서비스의 최종 디자인과 특성을 결정하는데 도움을 준다.
2. 자바스크립트는 상속을 어떻게 구현할까?
자바스크립트는 프로토타입을 기반으로 상속을 구현한다. 나는 자바스크립트에 클래스가 도입된 ES2015 이후 자바스크립트를 처음 접했고 클래스를 사용해서 코드를 작성했기 때문에 프로토타입을 직접 사용해 본 적이 없어서 이 부분에 대해서는 이해가 부족했었다. 그런데 자바스크립트의 클래스는 그저 문법적인 개념일 뿐이고 자바스크립트는 여전히 프로토타입 기반의 언어였다.
3. 상속과 프로토타입
상속: 객체지향 프로그래밍의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 중복을 제거하는 방법은 기존의 코드를 적극적으로 재사용하는 것이다.
- 생성자 함수 사용하기
function Circle(radius) {
this.radius = radius;
this.getArea = function () {
return Math.PI * this.radisus ** 2;
};
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
console.log(circle1.getArea === circle2.getArea); //false
function CircleByPrototype(radius) {
this.radius = radius;
}Circle 생성자 함수가 생성하는 모든 객체는 radius 프로퍼티와 getArea 메서드를 가진다.
인스턴스를 생성할 때마다 getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
→ 메모리를 불필요하게 낭비하고 퍼포먼스에도 악영향을 끼친다!
- 프로토타입 사용하기
function CircleByPrototype(radius) {
this.radius = radius;
}
CircleByPrototype.prototype.getArea = function () {
return Math.PI * this.radisus ** 2;
};
// 반지름이 1인 인스턴스 생성
const CircleByPrototype1 = new CircleByPrototype(1);
// 반지름이 2인 인스턴스 생성
const CircleByPrototype2 = new CircleByPrototype(2);
console.log(CircleByPrototype1.getArea === CircleByPrototype2.getArea); //trueCircleByPrototype 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입 즉 상위 객체의 프로토타입의 모든 프로퍼티와 메서드를 상속받는다.
즉 동일한 내용의 메서드를 중복 생성하지 않고 모든 인스턴스가 getArea 메서드를 상속받아 사용할 수 있다.
4. 프로토타입 객체
프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공한다. 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
모든 객체는[[Prototype]]이라는 내부 슬롯을 가지며 이 내부 슬롯의 값은 프로토타입의 참조다.
모든 프로토타입은 생성자 함수와 연결되어 있다.
[[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만 proto 접근자 프로퍼티를 통해 자신의 프로토타입 에 간접적으로 접근할 수 있다.
그리고 프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근할 수 있고 생성자 함수는 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있다.
💡 프로토타입 깨알 요약
자바스크립트는 객체지향 프로그래밍 언어이지만 객체지항 프로그래밍 에서 사용하는 클래스가 없다. 클래스는 상속을 위해 사용하는데, 자바스크립트는 클래스 대신 프로토타입을 사용한다. 자바스크립트의 객체는 [[Prototype]]이라는 숨김 프로퍼티를 갖는다. 이 숨김 프로퍼티는 null값이거나 다른 객체에 대한 참조가 된다. 다른 객체를 참조하는 경우 참조하는 대상을 프로토타입이라고 부른다. 객체에서 특정 속성을 호출하면 프로퍼티에서 찾는데, 만약에 없다면 프로토타입에서 프로퍼티를 찾는 특징이 있다. 이것을 프로토타입 상속이라고 하며, [[Prototype]] 프로퍼티를 통해 상위 프로토타입과 연결되어있는 형태는 프로토타입 체인이라고 부른다.
참고
