Prototypal Inheritance(프로토 타입 이해하기)

✨ Object를 생성할 때마다, 뭔지 모르게 항상 붙는 __proto__가 있다.
또한 출처를 알 수 없는 .length, split(), toString()를 우리는 항상 사용해 왔다.
이것들은 뭘까? 어디서 왔고? 어디서 생겼을까? 라는 생각으로 시작하면 될 것 같다.

먼저, JavaScript는 객체지향 언어다.
하지만, Java, Python과 다르게 class기반의 객체지향 언어가 아니고, prototype 기반의 객제지향 언어다.
(ES5 이후 class를 지원하지만, class를 객체지향의 기반으로 사용하고 있지 않다)

생성자로 사용하기 위한 fuction을 작성해보자.

Bird constructor, Bird prototype

위 결과를 보면 함수를 생성했는데, constructor와 __proto__가 함께 생성된 것을 볼 수 있다.

간단히 말하자면, constructor는 해당 Object의 원본(Bird 자신)을 가리키며, __proto__는 Object prototype을 가리킨다.
Object prototype은 JavaScript에서 생성되는 모든 것들의 조상이라고 생각하면 된다
(앞서 말한 toString(), split() 등 모든 built-in method를 가지고 있다)

위 생성자를 이용해 bird1과 bird2를 instance로 찍어보자.

bird1, bird2 Instance

bird1를 출력해보면 자신만의 name, color와 생성자가 가지고 있던 sing function 그리고 __proto__가 생성된 것을 볼 수 있다.
그리고 __proto__를 누르면 function 생성자를 선언할 때 볼 수 있던 constructor와 __proto__를 다시 볼 수 있다.

이런식으로, prototype chain을 통해 연속적으로 자신의 조상 prototype을 참조한다.

즉, 우리가 JavaScript안에서 생성하는 Array, String, Object, function 등 모두 함수를 통해 생성되며,
단순히 하나의 Object만 생성되는 것이 아니라, constructor와 Object prototype을 참조하며 생성된다.
또한, 각 instance마다 property를 추가할 필요 없이 prototype을 이용해 memory를 공유할 수 있다.

참고 자료 https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance