함수를 선언할때 생성되고 해당 함수를 통해 생성되는 모든 객체들이 상속받는 객체이다.
prototype의 용어는 아래와 같습니다.
- 함수 , 생성자함수
- prototype
- __proto__ // "dunder proto"
- prototype chain
뭔 죄다 proto야 ...
그래도 하나씩 하나씩 파봅시다.
ES6 표준에서
class문법이 추가 되었지만 C++,Java에서 말하는class가 아닌프로토타입을 기반으로 하여 만들어진 문법입니다.
그렇기 때문에 어떤 type을 통한 객체를 생성할때생성자함수라는것을 이용합니다.
생성자 함수 ?
그냥 자바스크립트
함수입니다.
다만 , 일반 함수와 구분하기 위해 첫글자를 '대문자'로 써줍니다. (관례)
'prototype' 일단 따라해보자
name을 인자로 받는 Human이라는 생성자함수를 선언했습니다.
선언하는 순간 Human의 프로토타입 객체가 어딘가에 생성되고 Human이라는 함수와 연결 됩니다.
🤓 Check!!!
관리자 도구 f12를 통해 console.dir(Human)을 확인해보면 Human안에 여러속성이 있는걸 볼수 있습니다.
prototype 이름의 속성이 참조하는 constructor, __proto__ 2개의 속성을 가지고 있는 객체가
Human함수의 프로토타입 객체입니다.
여기서 constructor 속성이 참조하고 있는건 Human 생성자 함수 입니다.
constructor 속성을 쭉 열어보면 생성자 함수
Human을 참조하고 있는걸 확인 할수 있습니다.
(무한대로 쭈우우욱 있다..)
정리
위의 상황을 그림으로 정리해보자면 아래와 같습니다.
생성자함수 'Human'과 prototype이 서로를 순환 참조 하고 있는걸 볼 수 있습니다.
__proto__("dunder proto")
어떤 객체의 __proto__는 그 객체를 생성한 함수의 prototype 객체를 가르킵니다.
(dunder proto라고 불리며 , dunder는 double underscore의 줄임말 입니다.)
'__proto__' 이것도 일단 따라해보자..
Human 생성자 함수로 Roy 와 Daisy 객체를 만들겠습니다.
Human이라는 생성자함수로 만들어지는 객체들 (Roy & Daisy)는Human함수의 프로토타입 객체의 링크를 가지게 되며, 그 객체들은 프로토타입객체의 속성과 메소드를 사용할수 있게 됩니다.
글로 보면 역시 어려우니 코드를 봅시다.
🤓 Check!!!
__proto__ 에서 prototype 객체의 속성을 참조하는걸 볼수 있습니다.
정리
코드도 어렵죠.. 그럼 그림으로 한번 더 봅시다.
위의 코드처럼 서로 상속을 구현하는 것을 '
프로토타입 체이닝,prototype chain'이라고 합니다.
