프로토타입 (Prototype)

Byunghoon Lee·2020년 11월 9일
0

JavaScript

목록 보기
11/13
post-thumbnail

함수를 선언할때 생성되고 해당 함수를 통해 생성되는 모든 객체들이 상속받는 객체이다.

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'이라고 합니다.

profile
Never never never give up!

0개의 댓글