JavaScript 프로토타입과 프로토타입 체인

 

🧐 프로토타입이란?

---

일반적으로 프로토타입(prototype)이란 원형이라는 뜻을 가진다. 자바스크립트는 프로토타입 기반 언어이다. 모든 객체들이 메서드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미다.

우리가 함수라는 객체를 생성했을 때 그 객체에는 prototype이라는 object가 자동으로 생성된다. prototype에는 다시 constructor라는 객체가 자동으로 생성되어 서로를 참조할 수 있게 된다.

 

Person.prototype.sum = function(){}

 

• 위의 코드를 통해서 prototype에 함수를 추가함으로써 여러 객체를 생성하였을 때 해당 함수를 사용할 수 있다.
• 예를 들어 Person이라는 object 안에 mitt, kim이 있는 경우, mitt.sum()과 kim.sum() 둘 다 사용이 가능하다.

 

인스턴스 객체의 key에 접근할 때, 해당 객체에 key가 없다면 그 다음으로 상위 프로토타입 속성에서 key가 있는지 확인한다. 없다면 그것을 찾기 위해 더 상위의 프로토타입에서 찾는다. 이것을 프로토타입 체인이라고 한다.

 

🧐 프로토타입을 더 자세히 알아보자!

---

 

sort 메서드를 사용할 수 있는 이유는 무엇일까?

 

 

위에서 arr라는 변수를 배열 리터럴로 생성했지만 내부적으로는 new Array()와 같이 생성자 함수로 선언한 것이다. new 키워드는 객체를 생성하는 방법 중 생성자 함수를 사용하여 객체를 만들 때 함께 쓰는 키워드이다.

new 생성자함수이름()의 형식을 통해 자바스크립트에서 동일한 구성을 가진 객체를 여러 개 만들어낼 수 있다. 이렇게 생성된 인스턴스 arr는 생성자 함수에게서 sort 메서드 등을 상속 받는다. arr 배열 객체의 원형은 Array이다. 정확히는 Array == 프로퍼티가 아니라 Array가 가지는 프로토타입이라는 특수한 형태의 객체 프로퍼티를 통해 상속 받는다.

 

 

예제 코드

const buzz = {
    flying: true,
};

const woody = Object.create(buzz);
console.log(woody.flying); // true

 

woody는 buzz와 prototype이 링크되었다. woody 내부에는 flying이라는 프로퍼티가 없지만 연결된 buzz에서 해당 프로퍼티를 찾아 그 값을 반환한 것이다.

 

const buzz = {
    flying: true,
};

const woody = Object.create(buzz);
console.log(woody.flying); // true

for (let i in woody) {
    console.log(`${i}를 발견!`); // flying를 발견!
}

 

🧐 Prototype Link VS Prototype Object

---

자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재하고, 이 둘을 통틀어 Prototype이라고 부른다.

 

Prototype Object

function Toy() {} // 함수
const personObject = new Person(); // 함수로 객체를 생성

 

personObject 객체는 Person이라는 함수로 생성된 객체이다. 언제나 객체는 함수에서 시작된다. 함수가 정의될 때는 두 가지 일이 동시에 이루어진다.

• 해당 함수에 Constructor(생성자) 자격 부여
• 해당 함수의 Prototype Object 생성 및 연결

 

 

그리고 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __proto__를 가진다.

 

 

constructor는 Prototype Object와 같이 생성되었던 함수를 가리키고, [[Prototype]] = __proto__는 Prototype Link이다.

 

function Toys() {}
Toys.prototype.flying = true;
Toys.prototype.sleeping = false;

const buzz = new Toys();
const woody = new Toys();

console.log(woody.sleeping); // false

 

Prototype Link

 

Prototype 속성은 함수만 가지고 있던 것과는 달리 proto 속성은 모든 객체가 빠짐없이 가지고 있는 속성이다.

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다. buzz는 Toys 함수로부터 생성되었으니 Toys 함수의 Prototype Object를 가리키고 있는 것이라고 볼 수 있다.

 

 

🧐 Prototype Chain

---

• 자바스크립트는 특정 객체의 프로퍼티나 메서드에 접근 시 객체 자신의 것뿐만 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메서드를 접근할 수 있다.
• 즉, 특정 객체의 프로퍼티나 메서드 접근 시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.
• 모든 프로토타입 체이닝의 종점은 Object.prototype이다.
• 하위 객체는 상위 객체의 프로퍼티나 메서드를 상속 받는 것이 아니라 공유한다.
• 해당 객체에 없는 프로퍼티나 메서드를 접근할 때 프로토타입 체이닝이 일어난다.

 

 

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[prototype]]이라는 은닉 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복된다. 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다.

 

🧐 Reference

---

https://hanamon.kr/javascript-프로토타입과-프로토타입체인/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://mygumi.tistory.com/m/312

https://velog.io/@adam2/자바스크립트-Prototype-완벽-정리

https://velog.io/@turtle601/Prototype이란