[JavaScript] .prototype(프로토타입)과 클래스

코드스테이츠 강의자료 외 유튜버 코딩애플님의 영상을 참고하며 공부했는데 프로토타입을 '유전자'라고 생각하면 이해가 쉬워진다고 하셔서 그렇게 해보기로 했다. 

 

프로토타입: 객체를 생성하면 생기는, 메서드를 저장하는 공간. 

 

//ES5 문법
function Rabbit(){
    this.명칭= '토끼';
    this.개체수= 10;
    this.우리= 'A';
}

//class에 food 추가
Rabbit.prototype.먹이 = '당근';

let 토깽이 = new Rabbit();

 

위에 적은 내용과 같이 Rabbit.prototype.먹이 로 class에 먹이를 추가하고 콘솔에 찍어보면 아래와 같은 결과를 볼 수 있다.

 

 

Rabbit.prototype.먹이는 부모인 class Rabbit에게만 요소를 추가시켰기 때문에 instance인 토깽이는 여전히 '먹이'라는 요소를 가지고 있지 않지만, 상속관계로 인해 토깽이는 Rabbit의 prototype, 즉 Rabbit의 '유전자'에 각인된 '먹이'를 끌어다 쓸 수 있다.

 

우리가 배열을 사용할 때 쓰는 .push(), .slice() 등도 Class인 Array가 가지고 있는 prototype이다. 우리는 Array의 instance를 만들어(ex. let arr=[]) 사용하며 '토깽이.먹이'처럼 부모인 Array의 메서드를 가져다 쓰고 있는 것이다. 

 

Array.prototype을 콘솔에 찍으면 Array가 가지고있는 메서드들을 볼 수 있다.

 

 

instance에서 부모의 prototype, 즉 부모의 '유전자'에 접근 및 변경하는 상속자가  .__proto__로 알고있는데, mdn web docs에 따르면 .__proto__의 사용을 권장하지 않는다고 한다. 

 

 

---

이 글은 코드스테이츠 블로깅 과제로, 배운 것을 정리한 글입니다.

 

참고자료

• https://www.youtube.com/watch?v=wUgmzvExL_E&t=14s
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
• 코드스테이츠 강의 자료