prototype이 뭘까?

 

 

자바스크립트는 프로토타입 기반 객체 지향 언어라고 부릅니다.

MDN에 있는 메서드 설명에도 prototype이 써있습니다.

🤔 그럼 도대체 prototype이 뭘까라는 의문점이 생겨 공부해보았습니다.

 

---

 

프로토타입은 어디서 나왔을까?

 

자바스크립트에는 명색이 객체 지향 언어인데도 클래스라는 개념이 없습니다.

하지만 그 대신 프로토타입이란 것을 존재하게 만들었습니다.

그래서 프로토타입이 클래스를 대신 하여 상속기능 등 그 역할을 대신하였습니다.

 

BUT 지금 ES6에서 CLASS문법이 추가되었습니다.

하지만 그렇다고해서 CLASS 문법이 추가된 것이지 기반이 된 것은 아닙니다.

 

---

그럼 Prototype은 어떻게 생겨날까?

 

일단 자바스크립트에서 기본적으로 사용하는 객체 만드는 법을 보면

 

const object = { };
const madeObject = new Object();

이 두가지 방법도 prototype에 의해 만들어진 객체입니다.

 

만들어지는 과정을 펼쳐보면

 

 

상속의 관점에서 보면 자바스크립트의 유일한 생성자는 객체뿐입니다.

new를 통해 함수를 객체에 넣은 것입니다.

 

함수를 정의했을 때 프로토타입이 어떻게 나오는지 확인하기 위해 빈 함수를 정의해보겠습니다.

function COLOR(){

}

console.log(COLOR.prototype);

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object이 같이 생성됩니다.

또한 Prototype Object에 constructor와 __proto__라는 속성을 가지고 있는 것을 볼 수 있습니다.

두개에 대해서는 뒤에서 더 자세히 알아보도록 하겠습니다.

---

프로토타입을 왜 사용할까?

 

일단 함수안에 객체를 만드는 두가지방법을 적어두었습니다.

function COLOR() {
    this.blue = 'blue';
    this.red = 'red';
}
const kim = new COLOR();
const park = new COLOR();

console.log(kim.blue);  //blue
console.log(park.blue); //blue

 

---

function COLOR() {
}

COLOR.prototype.blue ='blue';
COLOR.prototype.red = 'red';

const kim = new COLOR;
const park = new COLOR;

console.log(kim.blue);  //blue
console.log(park.blue); //blue

 

두개의 결과값에는 차이가 없습니다.

하지만 첫번째 방법은 여러번 사용한다고 가정했을 때 함수 안에 있는 객체들을 모두 검색하기 때문에 그만큼 메모리에 할당되고 객체가 많아질수록 메모리에 할당되는 값도 많아집니다.

 

 

두번째 방법은 COLOR.prototype이라는 빈 object가 존재하고 자신이 찾을 때만 꺼내서 값을 넣고 사용할 수 있습니다.

 

여기서 Prototype Object는 위에서 constructor와 __proto__라는 속성을 가지고 있다는 것을 확인했었는데

COLOR.prototype.blue 처럼 객체로 함수의 속성을 추가 혹은 삭제를 할 수 있게 되고 (constructor)

kim과 park은 COLOR함수를 참조하였기 때문에 Prototype Object를 참조할 수 있게 된 것입니다. (__proto__)

 

 

★__proto__(Prototype Link)

__proto__속성은 kim과 park이 blue라는 속성이 없지만 참조를 할 수 있게 해준 장본인입니다.

__proto__는 Prototype Object를 상속하는것입니다!!

Prototype Object가 __proto__를 낳고 __proto__에서 속성을 꺼내 kim에게 보내주는 것입니다.

이렇게 프로토타입은 class가 없는 자바스크립트에서 상속과 데이터 효율성을 높여주는 역할을 하게 됩니다.

 

---

 

 

참고 문헌

 

prototype에 대해 이해하고 거의 100% 참고한 블로그입니다. 이해가 안된다면 이 블로그를 한번 정독하시는 것도 좋을 것 같습니다.

medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기