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