프로토타입(Prototype) 이해하기(2)

프로토타입(Prototype) 이해하기(1)에서는 목적인 프로토타입에 대해 공부하기보다 단순히 프로토타입 기반 언어인 자바스크립트가 어떻게 클래스 기능을 흉내내는지 알아봤다.

 

이번엔 정말로 프로토타입에 대해 알아보자!

---

✅ 자바스크립트의 프로토타입이란?

프로토타입에 대해 알기 전에 몇가지 정리하는 것이 필요할 것 같다. 나 같은 경우에도 이상한 말들이 자꾸 튀어나와 이해하는데 정말 많은 시간이 걸린것 같다 ㅠㅠ

 

밑에 글들을 보기전에 결론을 먼저 말하자면

정리

🖋 prototype

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 prototype(object) 라고 하고, 최상위 부모객체는 Object이다.

 

🖋 constructor 프로퍼티

(생성자)함수 선언 시, 함수와 프로토타입 객체가 생성

프로토타입 객체는 consturctor 프로퍼티를 갖고, 자신을 생성한 생성자 함수를 가리킨다.

 

🖋 __proto__

prototype link라고 부른다.

생성자 함수와 new연산자로 생성된 인스턴스(객체)가 상위 객체에 접근할 수 있게 하는 프로퍼티

 

🖋 prototype chain

생성된 객체가 프로퍼티를 갖고 있지 않을때, __proto__ 프로퍼티를 이용해 상위 객체를 타고 올라가 프로퍼티를 검색하는 것

---

생성자 (new 연산자)

클래스 기반 언어들은 클래스를 이용해 프로퍼티가 같은 객체를 만들 수 있다고 했다. 하지만 자바스크립트는 클래스가 없다. 그 대신에 new 연산자를 통해서 객체를 생성한다. 

 

여기서 헷갈리지 말아야 할 것!!!

new 연산자를 이용해서 새로운 객체를 생성할 수 있는데, 이 때 사용하는 함수( function() {} 구조는 같다!)를 단순히 생성자 함수라고 부르고, 첫 글자를 대문자로 쓰는 것이다.

function Human(name) {
  this.name = name;
}

let human1 = new Human();

위 코드를 순서대로 정리해보자.

---

1. name을 인자로 받는 Human 이라는 생성자함수를 선언

function Human(name) {
  this.name = name;
}

 

이때 발생하는 일은

>> 해당 함수(Human)에 Constructor(생성자) 자격을 부여 (자격이다. 프로퍼티와는 다름)

>> 해당 함수(Human)의 프로토타입 객체(Prototype Object)가 생성되고 Human이라는 함수와 연결

 

빨간 네모 표시안을 보면 prototype이 보이는데 이것이 바로 프로토타입 객체(prototype Object)다. 그림으로 보자면 다음과 같은 관계가 형성된다.

 

함수와 연결된 객체는 constructor 프로퍼티를 통해 함수에 접근할 수 있고,

(이때, 함수에 부여되는 생성자(constructor) 자격과는 다른 개념이라고 생각하자)

함수는 prototype 프로퍼티를 통해 함수와 연결된 객체에 접근할 수 있는 것이다.

추가로 __proto__ 는 Prototype Link라고 하는데 명심하고 있자.

---

2. new 연산자를 사용해서 새로운 객체(human1)을 만들었다.

let human1 = new Human('jewon');

이때 발생하는 일은

>> name = 'jewon' 의 프로퍼티가 저장된 객체가 생성되고, human1 변수에 할당

(여기서 만들어진 human1 객체를 인스턴스라고 부른다!)

>> human1 인스턴스에 __proto__ 프로퍼티를 가진다.

(__proto__를 통해 상위 객체(Human.prototype)에 접근할 수 있다. 이래서 prototype link라고 부른다.)

위 사진을 보면 __proto__에 constructor(생성자 함수)을 가지는데 그것이 Human 함수다!

즉 human1.__proto__ 는 Human.prototype과 같다는 것이다.

 

관계를 그림으로 나타내 보면 다음과 같다.

 

 

이렇게 __proto__ 프로퍼티를 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라한다.

 

생성된 prototype의 최상단에 있는 __proto__는 결국 Object로 수렴한다. 이러한 체인 구조 때문에 모든 객체는 Object의 자식이라고 불리고, Object prototype Object에 있는 모든 속성을 사용할 수 있는 것이다.