[TIL] JavaScript Prototype

Java와 같은 클래스 기반 객체지향 프로그래밍 언어와 JavaScript는 Prototype 기반 객체지향 프로그래밍 언어이다. 따라서 JavaScript의 동작 원리를 이해하기 위해서는 Prototype의 개념을 잘 이해하고 있어야 한다.

클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체를 생성한다. 하지만 Prototype기반 객체지향 프로그래밍 언어는 클래스 없이도 (ECMAScript 6에서 클래스가 추가되었다) 객체를 생성할 수 있다.

기본적으로 클래스가 존재하지 않기때문에, 상속기능도 존재하지 않습니다. 그래서 Prototype을 기반으로 상속을 흉내내도록 구현하여 사용합니다.

Prototype의 사용법

funtion Cat() {
  this.eyes = 2;
  this.tail = 1;
}

let lucky = new Cat();
let latte = new Cat();

console.log(lucky.eyes) // 	2가 출력됩니다.
console.log(lucky.tail) // 	1이 출력됩니다.
console.log(latte.eyes) // 	2가 출력됩니다.
console.log(latte.tail) // 	1이 출력됩니다.

lucky와 latte는 모두 동일하게 2개의 눈과 1개의 꼬리를 가지고 있습니다. 그러나, 메모리에는 공통적으로 가지고 있음에도 불구하고, 4개의 변수가 할당됩니다. 이러한 문제를 Prototype를 사용하여 해결할 수 있습니다.

function Cat() {}

Cat.prototype.eyes = 2;
Cat.prototype.tail = 1;

let lucky = new Cat();
let latte = new Cat();

console.log(lucky.eyes) // 	2가 출력됩니다.
console.log(lucky.tail) // 	1이 출력됩니다.
console.log(latte.eyes) // 	2가 출력됩니다.
console.log(latte.tail) // 	1이 출력됩니다.

아래 Prototype의 예제를 간단하게 설명해드리자면, Cat.prototype라는 빈 객체가 존재하고, Cat이라는 함수에서 생성된 객체들은 Cat.prototype라는 객체내에 있는 eyse,tail이라는 값을 사용할 수 있습니다.