20.12.10 Prototype이 뭘까?

JavaScript에 대한 공식문서를 찾다보면 프로토타입 기반 언어라는 말이 자주 보인다.

드디어 때가 왔다...!
객체 지향 프로그래밍을 잘 하기 위해서 & 자바스크립트의 높은 이해를 위해서는 이 녀석과 꼭 친해져야한다.

Prototype. 너는 누구냐?!
(이 글은 MDN 문서와 이 사이트 그리고 이 블로그의 글을 참고하였습니다. 좋은 내용 감사합니다.)

객체 지향 프로그래밍(OOP)에서부터..

현재 객체 지향 프로그래밍을 배우는 시점에서 정리를 하자면

OOP에서 꼭 필요한 것이 바로 Class라는 개념이다. (왜 필요한지는 여기를 눌러보자.)
그런데 전에는(현재 시점엔 Class문법이 추가되었다.) JavaScript에 Class가 없어서 동적인 언어임에도 불구하고 Class가 없기 때문에 상속기능을 할 수 없었다. 그래서 머리 좋은 예전 JavaScript 개발자들은 이 프로토타입 기반 언어를 가지고 상속기능을 구현해냈었다.

즉, 자바스크립트로 객체지향프로그래밍을 하기 위해선 Prototype의 개념을 꼭 알아야하는 것이다.

Prototype

1) 여태까지 이해한 대로라고 한다면 우리가 만든 객체들은 복제이고 원본이 바로 Prototype이라는 곳에 숨겨져 있다.
2) Prototype은 상속기능이 있어서 Prototype chain이 가능하다.

• 위에서 머리 좋은 JS개발자들이 프로토타입을 가지고 class를 구현해냈다는 것이 바로 이 기술 덕분이다.

Prototype Object & Prototype Link

Prototype = Prototype Object + Prototype Link 이다. 이 두 개를 이해해야 Prototype을 이해했다고 볼 수 있다.

Prototype Object

1) Prototype 객체는 언제나 함수(Function)으로 생성된다.

• 일반적으로 객체를 생성하는 방법은 여러가지가 있다.(리터럴, 생성자..) 그런데 그 모두가 함수로 생성된다는 사실!

let obj = {}; // 리터럴 생성은
let obj = new Object(); // 이 생성자로 만든 것과 같다.

• 위에 코드에서 이 Object()가 바로 함수!

2) 1)에서 생성된 함수에 Constructor 자격 부여

• new라는 키워드를 쓰려면 무조건 Constructor 자격을 부여해야한다!

3) 1)에서 생성된 함수에 Prototype Object 연결

• 1)에서 함수로 객체를 생성한 상태에서 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성된다!
• 그리고 이 함수는 prototype이라는 속성을 통해 Prototype Object에 접근이 가능하다.(연결!)

Prototype Link(Prototype chain)

상속을 가능하게 하는 친구!
바로, proto 가 그 역할을 한다.(_언더바가 두개)

proto는 모든 객체가 가지고 있는 속성이다.
객체들이 생성 될 때 이 녀석은 조상(또는 상위) 함수의 Prototype Object를 가리킨다.

"가리킨다." 라는것은 연결되어 있다는 뜻?
Yes! Exactly!
저번에 Linked List를 했던 것 처럼 가리키는 상대(조상or상위)와 연결되어있어 타고 올라갈 수 있다는 것이다.

하지만 여기서 조건부가 생긴다.

바로, 함수로 생성된 객체의 후손이어야 한다는 점.

그래서 위에서 말한 상속이라는 개념 구현이 가능한 것이다.

이렇게 proto 속성을 통해 조상(상위) 프로토타입과 연결되는 것을 Prototype chain 이라고 한다.