프로토타입이란 무엇인가

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

자바는 클래스 기반 언어이지만 자바스크립트는 프로토타입 기반의 언어라는 것을 들어보신적 있을 것입니다.

그만큼 자바스크립트에 있어서 중요하다고 해도 과언이 아니지만, 프로토타입의 개념을 정확히 이해하는 것은 쉽지 않기 때문에 한 번 정리해 보도록 하겠습니다.

 

자바스크립트에는 클래스라는 개념이 없습니다. 프로토타입을 이용하여 상속 기능을 구현합니다. ES6에서 class 문법이 추가되긴 하였지만 자바스크립트가 프로토타입 기반에서 클래스 기반으로 바뀐 것은 아닌 것으로 알고 있습니다.(class 키워드로 인해 구체적으로 자바스크립트 내부적으로 어떤 동작이 이루어지는지도 추후에 공부해 봐야겠군요)

 

function Car() {
	this.wheel = 4;
    this.handle = 1;
}

var kia = new Car();
var tesla = new Car();

console.log(kia.wheel);  // => 4
console.log(kia.handle);  // => 1
console.log(tesla.wheel); // => 4
console.log(tesla.handle); // => 1

kia와 tesla는 wheel 과 handle 을 공통적으로 가지고 있는데, 메모리에는 wheels와 handle이 두 개씩 총 네 개가 할당이 됩니다. 이런식으로 메모리를 사용하면 객체가 많아질 경우 굉장히 비효율적으로 되겠지요?

이런 경우 프로토타입을 이용하면 해결할 수 있습니다.

function Car() {}

Car.prototype.wheel = 4;
Car.prototype.handle = 1;

var bmw = new Car();
var tesla = new Car();
console.log(bmw.wheel); // => 4

Car.prototype이라는 빈 Object가 어딘가에 존재하고, Car 함수로부터 생성된 객체 bmw, tesla 는 어딘가에 존재하는 Object에 들어 있는 값을 모두 갖다 쓸 수 있습니다.

왜 이런식으로 만들었을까요?

 

Prototype Link와 Prototype Object

자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재합니다. 그리고 이 둘을 통틀어 Prototype이라고 부릅니다. 각각이 무엇을 뜻하는지 알아보겠습니다.

 

Prototype Object

객체는 언제나 함수(Function)로 생성됩니다.

function Car() {} // => 함수
var carObject = new Car(); // => 함수로 객체를 생성

carObject 객체는 Car라는 함수로 생성된 객체입니다. 객체는 함수로부터 시작됩니다.

var obj = {};

이 객체 생성 코드는

var obj = new Object();

이것과 같습니다.

Object란 자바스크립트에서 기본적으로 제공하는 함수입니다.

이 외에도 모든것이 자바스크립트에서는 함수로 정의되어 있습니다.

함수가 정의 될 때 2가지 일이 동시에 이루어 지는데,

 

1. 해당 함수에 constructor(생성자) 자격을 부여합니다.

constructor 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 됩니다. 자바스크립트에서 함수만 new 키워드를 사용할 수 있는 이유입니다. 예를 들어, new 키워드를 객체에서 사용하면 에러가 일어납니다.

 

2. 해당 함수의 Prototype Object 생성 및 연결

함수를 정의하면 함수의 생성과 동시에 Prototype Object도 같이 생성이됩니다.

생성된 함수는 prototype 속성을 통해 Prototype Object에 접근할 수 있게 되고, Prototype Object는 일반적인 객체이며 기본 속성으로 constructor와 __proto__를 가지고 있습니다.

• constructor : 생성된 함수 Car()를 가리킵니다
• __proto__ : Prototype Link입니다. 모든 객체에 존재하는 속성이며, 객체가 생성될 때 부모였던 함수의 Prototype Object를 가리킵니다(Prototype Link에서 설명).

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제할 수 있습니다. Car() 함수로 생성한 객체들은 Car.prototype으로 참조할 수 있게 됩니다.

Prototype Link

tesla에는 handle 속성이 없는데 tesla.handle을 실행하면 1이라는 값을 참조하는 것을 볼 수 있습니다. 바로 __proto__를 통해 Prototype Object를 참조할 수 있기 때문입니다.

prototype 속성은 함수만 가지고 있었지만(그림의 왼쪽 참고) __proto__ 속성은 모든 객체가 빠짐없이 가지고 있습니다.

tesla의 __proto__를 보니 Car 함수의 Prototype을 가리키고 있는 것을 확인할 수 있습니다.

tesla 객체가 handle이나 wheel을 가지고 있지 않아도 필요한 속성을 찾을 때까지 상위 프로토타입을 탐색합니다. 최상위인 Object의 Prototype Object까지 도달했는데도 못찾을 경우 undefined를 리턴합니다. 이렇게 __proto__ 속성을 통해 상위 프로토타입과 연결되어 있는 형태를 프로토타입 체인이라고 합니다.

모든 객체가 Object의 자식이라고 불리는 것은 이 프로토타입 체인 구조때문입니다.

 

지금은 간단하게만 정리하였지만 좀 더 깊이있는 내용의 경우 추가하겠습니다.

 

참고 및 출처

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

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

 

위 링크, 내용과 설명이 정말 좋습니다. 한 번 보시기를 강력추천드립니다.