본문 바로가기

TIL

JS Prototype?

728x90

JS에서 Prototype이라는 것은 많이 봤고 실제로 사용해보았다.

근데 이게 무엇이냐 라고 질문을 받았을 때 딱 정의해서 말하지를 못했다.

 

한번 이론적으로 이해를 해보자.

 

먼저 JS는 class라는 개념이 없고 prototype 기반의 언어이다.

prototype은 모든 객체에 존재하며 기본적으로 private 속성을 가지고 있다.

또한 prototype은 자신의 prototype이 되는 객체를 가리킨다

그러니까 결국 Object -> prototype -> prototype -> prototype... 의 반복이다.

하지만 이 prototype에도 종착지는 있다.

바로 prototype의 값이 null 되는 경우이다. (이것이 prototype 체인의 종점 역할을 한다.)

 

이해하기 쉽게 실제로 해보자

먼저 object를 하나 선언한다.

const a = {
  b: 1,
  c: 2
}

해당 object를 console.log로 찍어보면 다음과 같은 결과가 나온다.

여기서 보면 __proto__라는 Object 형태의 값이 있는데 이게 a의 prototype의 값이다.

a.__proto__를 찍으면 a의 prototype 값이 나오게 되며 a.__proto__.__proto__를 출력하면 prototype 체인의 종점으로 null이 나온다.

 

또한 prototype은 각 객체마다 존재하기 때문에 위의 상황에서 Object prototype에 s = 123이라는 값을 주면

a도 Object이기 때문에 a.__proto__에 s 123이 생기는 것을 볼 수 있다.

 

그리고 js의 모든 값의 종착지는 Object이다.

예를 들어 Number type의 변수를 선언해보자

Number type의 __proto__를 찍어보면 위처럼 Number로 나오는 것을 볼 수 있고

a.__proto__.__proto__를 하면 Object의 Prototype 값이 나오게 된다.

이렇게 아까 Object.prototype에 추가한 s 값이 있는 것을 확인함으로써 Object의 prototype임을 알 수 있다.

 

아무튼 이런 식으로 prototype이라는 게 있는데 답변 못했던 이것을 한마디로 정의하면

prototype은 JS의 기반이고 Class 대신 존재하는 것이다.(그렇다고 Class와 같은 동작을 하는 것은 아님)

라고 말할 수 있을 것 같다.

 

이제 말은 할 수 있을거같은데... 음 일단 Array.prototype.filter 뭐 이런것도 쓰고는 있지만 뭐라 정의를 해야되는지는 아직 모르겠다.

각 타입에서 기본 제공하는 함수..? 이거에 대해선 좀 더 알아보자

 

 

반응형

'TIL' 카테고리의 다른 글

React v16 lifecycle - Mounting  (0) 2019.09.21
React 부모 컴포넌트의 props가 같은 값으로 set 했을 시 자식 컴포넌트에서의 rendering에 대해서  (0) 2019.09.16
Flux Pattern?  (0) 2019.09.14
TIL 소개  (0) 2019.09.12
ECMA Script?  (0) 2019.09.12