Prototype

Prototype

프로토타입은 뭘까? 어떤 역할을 할까? 라는 궁금증에서 시작했고, 공부의 끝에는 늘 한 마디로 정의할 수 있었는데 프로토타입은 스스로에게 물었을 때, 정의 내리기가 참으로 애매했다. 여러 블로그 글과 유튜브 영상을 찾던 중에 가장 와닿은 정의는 '유전자'였다.(코딩애플님의 설명 방식이었다.)

그렇다! 프로토타입은 객체가 갖는 유전자이다. 그러니까 우리가 따로 정의하지 않아도, 따로 뭔가를 코드로 작성하지 않아도 사용할 수 있는 것이다.

결론
프로토타입의 정의는 객체의 원형을 의미한다. 조금만 더 쉽게 보면, 객체의 부모의 유전자이다. 그렇기 때문에 객체가 부모로부터 상속 받아(유전자를 받아) 사용하는 데이터와 메서드이다.

어떤 부분에 그러한지 이제부터 알아보자!

프로토 타입은 객체의 원형

 const arr = [5,3,2]
 
 console.log(arr.sort()) // [2,3,5] 

너무나도 당연하게 우리는 arr이라는 변수에 담은 배열을 정렬하기 위해 sort라는 메서드를 사용한다.
잠깐만! sort라는 메서드는 내가 정의한 적도 없는데 어떻게 사용할 수 있을까?
변수 arr이 배열이 될 때 내부적으로는 어떻게 만들어 지는지 알아야 이해가 가능하다.

1. 우리는 변수 arr로 배열을 만들었지만 컴퓨터는 내부적으로 new Array() 라는 생성자 함수를 만들어서 배열 객체를 만든다.
2. 그리고 여기서 상속(유전자 받기)이라는 개념이 등장하는데, 내가 만든 배열의 부모(arr 객체의 원형)는 Array이다.
3. arr.sort()를 하면 arr은 sort가 따로 없기 때문에 객체의 원형인 Array로 부터 해당 메서드를 찾는다.(이를, 프로토타입 체이닝이라고 한다.)
4. 객체의 원형으로부터 없는 것을 찾는 것을 상속이라 하고 더 쉽게 말하기 위해 부모가 가진 유전자가 자식에게 그대로 전달되는 것처럼 설명한 것이다.
   

위의 이미지에서 볼 수 있듯이 [[Prototype]] : Array(0) 라는 객체의 원형(arr의 부모)가 있고 그 부모가 수많은 프로토타입을(상속 받을 수 있는 유전자) 갖고 있는 것을 확인할 수 있다.

만약, 바로 상위 부모에도 없는 프로토타입이라면 계속해서 상위 부모를 찾아가서 해당 메서드를 찾게되는데 그래도 없다면 결국 최종적으로 undefiend를 반환한다.

프로토타입 추가하기

어떤 방식으로 프로토타입을 가져와 사용할 수 있는지 알았다. 그리고 프로토타입을 만들어서 추가할 수도 있다.

 const arr = [5,3,2]
 Array.prototype.name = 'king';

 console.log(arr.name) // king 

선언한 arr에는 name이 없지만 프로토타입을 추가하고 나면 name을 읽을 수 있게 된다.

prototype 과 proto 의 차이

Prototype

• 객체의 원형에서 때 존재한다.
• 함수 객체만 갖고 있다.

proto

• 객체의 원형을 가리킬 때 사용한다.
• 모든 객체가 갖고 있는 것으로 가리키기 때문에 링크라고 한다.

const arr = [5,3,2]

console.log(arr.prototype) // undefined
console.log(arr.__proto__) // [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]at: ƒ at()concat: ƒ concat()constructor 어쩌구... ]

arr은 객체의 원형이 아니기 때문에 prototype이 없다. 하지만 proto를 이용하면 arr의 원형(부모)에 접근할 수 있다.