prototype, constructor, __proto__ 정리

migraine : 편두통 sinus: 코안쪽이 찡할 때 /// 출처 : www.techindustan.com

자바스크립트는 OOP를 생각하고 만들지 않았다. 그렇기 때문에 객체지향 언어가 아닌 프로토타입 기반 언어이다. 그래서 개발자들은 prototype를 활용해서 OOP적으로 구현해냈다. 

(진짜 감사하게도 지금은 자바스크립트에서 OOP를 지원하고 있다.🙇🏻)

 

채신기술 class를 코드로 작성해보고 알아보자!

class Test { // 클래스를 만들 때에는 첫글자는 대문자가 국룰!
 constructor() {
 }
};

let test1 = new Test();  
test1; // 첨부된 사진 참조

이렇게 Test라는 클래스를 만들고, test1이라는 인스턴스를 만들고 test1을 확인해 보았다. ⬇️⬇️⬇️

 

뭐가 많다.... 오늘은 그중에서 prototype,  constructor, __proto__를 기록해보자!

---

1. prototype

자바스크립트의 객체들은 부모 객체를 가지고 있고, 연결되어 있다.

그렇기 때문에 상속(Inheritance)이라는 특징을 활용해서 property(프로퍼티)나 method(메소드)를 사용할 수 있게 되었다. 이때 자신을 생성하기 위해서 사용되어진 객체원형(부모객체)를 prototype이라고 한다.

(prototype의 사전적인 의미는 원형原型이다. 자바에서의 의미와 현실의 의미와 너무 알맞다. 이런거 보면 정말 직관적이고 괜찮단 말이지...)

 

2. constructor

constructor는 어떠한 객체를 생성하는 '생성자 함수'이다. 생성자 함수는 새로운 인스턴스(객체)를 만들 수 있는 함수이다.  그리고 constructor의속성은 프로토타입 객체를 생성했던 함수에 대한 참조를 나타낸다. 만약에 비슷한 인스턴스들이 여러개 존재한다고 한다면, 어떤 생성자를 통해서 만들어 졌는지 확인도 가능하다. 

위의 사진을 보게 되면, test1클래스는 Test클래스 생성자를 통해서 만들어진 것을 확인할 수 있다.

3. __proto__ 

먼저 프로토타입 체인(prototype chaining)에 대해서 간략히 정리하고자 한다. 체인이라는 단어는 '쇠사슬'을 뜻하기도 한다. 말그대로 연결되어 있는 구조를 상상할 수 있다. 프로토타입 체인도 마찬가지다. 자바스크립트는 특정 객체의 프로퍼티나 메소드를 접근 할 때, 자신의 것만 접근하는 것이 아니다. __proto__가 가리키는 링크를 따 자신의 부모 역할을 하는 프로토 타입 객체의 프로퍼티나 메소드에도 접근 할 수 있다.

c.sayHi가 있는지 C에서 먼저 찾아가고, 없으면 B로가고 B에도 없으면 A로 간다! A에 있네!!! 그럼 hello world! 출력!!

만약에 특정 객체의 프로퍼티나 메소드를 접근을 할 떄 자신이 가지고 있지 않다면 __proto__가 알려주는 곳으로 따라 부모 객체에 프로퍼티나 메소드가 있는지 찾으러 간다. 

 

간단히! __proto__는 자신의 부모 객체를 가르키는 역할을 한다.

(모습도 되게 무슨 줄같이 되있으니까 이해하기 더 쉬운듯!)