class에 대해 공부를 하다가 prototype이란 것을 보게 되었다.
내가 아는 prototype은 제품 제작 전 나오는 견본과 같은 개념이었는데
웹 개발에서는 어떤 개념인지 궁금해 알아보기 시작했다.

1. Prototype의 정의

위의 정의에서 적혀있는 대로 Prototype을 이용해

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티
또는 메소드를 상속받아 사용할 수 있게 한다.
이러한 부모 객체를 Prototype(프로토타입) 객체 또는
줄여서 Prototype(프로토타입)이라 한다.

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에
공유 프로퍼티를 제공하기 위해 사용한다.

오늘도 개념만 듣고선 못알아들었다. (다들 솔직해지자)
혼자 예시 코드를 들어가며 이해해보도록 하겠다.

2. 예시

2.1 making Prototype

클래스에서 배웠던 구조랑 똑같다.
kWater를 자식으로 삼아줘 Water의 데이터를 빼먹을 수 있다.
확인을 해보면

Water의 데이터를 가져오는 걸 확인할 수 있다.
그런데 Prototype이라는 데이터도 같이 들어온 것을 볼 수 있는데,
난 저런 데이터를 넣은 적이 없다.

여기서 유추할 수 있는 점 하나는 내가 Water라는 함수를 만들면
자동으로 prototype이라는 공간? 데이터? 가 생긴다는 것이다.

그렇다면 prototype은 어떻게 써먹을 수 있는걸까.

2.2 Prototype의 활용

위의 정의에서 말하길 Prototype 객체는
생성자 함수에 의해 생성된 각각의 객체에
공유 프로퍼티를 제공하기 위해 사용한다.

여기선 Water가 생성자니까 Water를 활용해 데이터를 추가하고,
추가된 데이터를 공유해보도록 하겠다.

Water.prototype.level = '폐수'; 라고 추가해준 후
Water의 Prototype을 kWater에 공유해줬고
kWater.level = 폐수; 라는 결과가 출력된다.

이 kWater에 level이라는 데이터를 추가한 적이 없음에도
prototype을 타고 와서 자식에게 전달이 된 것이다.
(와우)

그러면 function Water() {}에 level 데이터를 추가해주면 다를까?
결과만 놓고 보면 같다고 볼 수 있다.
대신, 데이터를 가지고 있는 대상이 다를 뿐이다.

water()에 level 데이터를 넣어주면 자식도 level 데이터를 가지지만
prototype에 데이터를 추가해주면 부모만 데이터를 가지는거다.
ㅇㅋ?

3. Prototype Chain

kWater.level 이라고 써줬는데 이 kWater가
level이라는 데이터를 안 가지고 있으면
kWater의 부모 역할인 Water의 공간을 압수 수색한다.

공간을 들쑤시며 level이란 데이터를 찾는다면?
부모의 공간에 존재하던 level 이란 데이터를 자식이 사용한다.

만약 부모에도 level이란 데이터가 없다?
그러면 부모의 부모, 부모의 부모의 부모의 공간까지 수색한다.

자식에 데이터가 존재하지 않으면
부모의 데이터에서 데이터를 찾아 가져오는 것.
이것이 내가 이해한 prototype chain이다.

한 줄 설명 : 용돈이 부족한 자식이 부모님 지갑에서 슬쩍 해오는 느낌

4. Prototype 제작

Water의 prototype에 나만의 함수를 만들고, 함수 내용을 공유해봤다.

Water의 기본 함수로 인자값 3개를 더해주는 함수를 만들어줬다.
그리고 Water의 데이터를 물려받은 변수 cool에게 함수를 공유해줬고
결과는 6으로 잘 나왔다.

어설프지만 나만의 Prototype을 제작하는 데 성공했다.