프로토타입 이해한 내용 정리

명확한 설명이 있는 좋은 글을 읽게 되어서 이해한 대로 쭉 적어보았다.

 

프로토타입을 제대로 이해하려면 4가지 포인트가 있다.

---

첫 번째, 모든 객체는 생성자 함수를 통해 만들어진다.

두 번째, 생성자 함수가 정의될 때는 두 가지의 일이 발생한다.

세 번째, Prototype Object을 이해한다.

네 번째, __proto__, Prototype Chain을 이해한다.

---

 

객체 지향 언어에서 Class는 빠지지 않는 개념이다.

 

클래스는 상속 기능이 있는데,

자바스크립트는 객체 지향 언어이지만 Class에 대한 개념은 없다.

 

때문에 상속 기능을 흉내내기 위해 존재하는 것이 바로 Prototype이다.

 

ES6에서 Class 문법이 추가되긴 했지만,

그렇다고 자바스크립트가 Class 기반 언어가 된 것은 아니다.

 

자바스크립트에서는 함수와 new 키워드를 통해 Class를 흉내 낼 수 있다.

 

생성자 함수를 통해 만들어진 빈 객체를 인스턴스라고 부른다.

이때 인스턴스에 없는 값들은 생성자 함수.prototype이라는 빈 객체에서 그 값을 찾는다.

 

어떻게 이런 과정이 가능할까?

 

자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재한다.

그리고 이 두 가지를 통틀어 프로토타입이라고 부른다.

 

이를 4가지 포인트를 기준으로 이해해보겠다.

 

첫 번째.

아까 말했던 것처럼 모든 객체는 생성자 함수를 통해 만들어진다.

 

const list = []; -> const list = new Array();

const obj = {}; -> const obj = new Object();

 

이렇게 Array, Object 그리고 Function까지 모두 함수로 정의되어 있다.

 

두 번째.

함수가 정의될 때에는 2가지의 일이 발생한다.

 

1. 함수에 constructor(생성자) 자격을 부여한다.
   함수에 생성자 자격을 부여하면 new 키워드를 사용할 수 있고 이를 통해 인스턴스 객체를 생성할 수 있게 된다.
2. 함수의 프로토타입 오브젝트를 생성하고 연결한다.
   함수가 정의되면 함수 뿐만 아니라 정의된 함수만의 프로토타입 오브젝트도 함께 생성된다.
   함수에는 prototype 속성을, 프로토타입 오브젝트에는 constructor, __proto__ 속성을 기본적으로 부여한다.
   
   

   

   constructor 속성은 정의된 함수를 가리킨다.
   prototype 속성은 함수와 함께 생성된 함수 프로토타입 오브젝트에 연결된다.
   __proto__ 속성은 Prototype Link이다(뒤에서 설명).
   
   함수 프로토타입 오브젝트는 일반 객체와 같다.
   따라서 임의대로 속성을 추가하고 삭제할 수 있다.
   
   따라서 인스턴스는 함수.prototype을 통해 프로토타입 오브젝트를 참조할 수 있게 된다.
   이렇게 세 번째 포인트까지 자연스럽게 살펴보았다.

 

그건 그렇고, 인스턴스는 무엇을 근거로 참조를 할 수 있게 되는 것일까?

그것에 대한 해답이 바로 __proto__(Prototype Link)이다.

 

prototype 속성은 함수만 가지고 있었던 것과는 다르게,

__proto__는 모든 객체가 빠짐없이 가지고 있는 속성이다.

 

프로토타입 링크는 객체가 생성될 때 조상이었던 함수의 프로토타입 오브젝트를 가리킨다.

 

인스턴스가 생성될 때,

생성자 함수의 프로토타입 오브젝트인 것이다.

 

 

인스턴스는 가지고 있지 않은 속성이 필요한 경우 프로토타입 링크를 타고 상위 프로토타입 오브젝트를 탐색한다.

만약 찾지 못할 경우 최상위 프로토타입 오브젝트까지 프로토타입 링크를 타고 탐색하며,

끝까지 찾아도 없을 경우 undefined를 반환한다. 이러한 과정을 Prototype Chain이라고 한다.

 

 

이런 특성을 가진 덕분에 모든 객체는 Object의 자식이라고 불리는 것이다.

이것이 네 번째 포인트이다.

 

 

 

 

 

출처

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

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