오늘은 Prototype에 대해 알아보자 🔥 흔히 이런말을 한다.
Javascript는 Prototype 기반의 언어이다. 이게 무슨말일까?
우리는 배열에 아무렇지않게 메서드를 붙여 사용하곤한다. 예를 들어
const number =[1,2,3,4]
number.sort((a,b)=>b-a)
console.log(number)
//[4,3,2,1]우리는 number라는 배열을 만들면서 sort라는 함수를 정의해준적이 없다. 그런데 어떻게 number에 sort라는 함수를 적용할 수 있는 것일까??
이번에 Prototype을 학습하며 더 Javascript와 친해진 거 같다.
Prototype ❓
자, 먼저 프로토타입이란 무엇일까??
영어로 해석해보면 "표준"이다.
코딩애플님의 도움을 받아 이를 정의할 수 있게 됐다. 한마디로!
유전자 🧬
결국 Prototype은 생성자 함수의 유전자이다.
생성자 함수란 무엇이지??
생성자 함수 ❓
생성자 함수란 Object를 생성하는 함수
이런게 바로 생성자 함수이다.
function machine(){
this.name="호빵"
this.favor="sweet"
}
const Bread = new machine()
console.log(Bread.name)
// 호빵본론으로 ❗️
자, 그럼 Prototype은 유전자라고 했다. 그럼 누구의 유전자 일까?
바로 생성자 함수의 유전자이다. 생성자 함수는 인스턴스(자식) 들에게 자신의 속성을 상속시켜준다. 이때 모두 유전자에 의해 결정되지 않겠는가??
일단 name이라는 속성과 favor이란 속성은 직접적으로 상속이 된다.
function machine(){
this.name="호빵"
this.favor="sweet"
}
const Bread = new machine()
machine.prototype.price="5000원"
console.log(Bread)
console.log(Bread.price)
// 호빵이렇게 부모의 유전자인 Prototype에 price라는 속성을 추가하면
자식도 price라는 속성을 상속받게된다. 정확히는 Bread.price는
prototype chain을 통해 값을 출력해낸다.
Prototype chain ❓
Prototype chain이란 인스턴스(생성된 객체)에서 해당 속성을 찾아나설때
만약 인스턴스에 직접적으로 상속된 속성이 아닐 경우 부모에게서 해당 속성을 찾고 또 없다면 그 부모에게 그 속성을 찾아나선다.
function machine(){
this.name="호빵"
this.favor="sweet"
}
const Bread = new machine()
machine.prototype.price="5000원"
console.log(Bread)
//
console.log(Bread.price)machine {name: '호빵', favor: 'sweet'}
5000원
과 같은 결과를 출력한다.
즉 Bread에 직접 속성이 추가되는 것이 아닌 해당 상위 부모인 machine의 prototype에 속성이 전달이 되고 이는 자식이 꺼내 쓸수있는환경이 조성된다.
중간정리 ❗️
Prototype은 부모의 유전자이고 Prototype을 추가한다면 자식에게 직접 속성이 추가되는 것이 아닌 Prototype chain을 통해 자식이 해당 속성을 사용할 수 있는 것! 그럼 자식이 부모의 prototype 객체 내부에 있는 메서드나 속성을 자유롭게 사용할 수 있는 환경이 된다.
array 뒤에 메서드가 붙을 수 있는 이유 ❗️
자, 그럼 이제 array뒤에 메서드가 붙을 수 있는 이유를 알 수있다.
생성자 함수로 생선된 모든 객체는 부모의 prototype을 참조할수있다.
그럼 array는 어떨까?
보통 개발자들이 배열을 생성할때
const arr =[1,2,3,4]이렇게 리터럴형식으로 생성한다. 하지만 사실 컴퓨터는 다음과 같이 받아들인다.
const arr =new Array(1,2,3,4)
어떤가!!! 많이 본 형식아닌가!! 그렇다 생성자함수로 생성된 객체인것이다.
그럼 해당 객체인 array는 Array라는 생성자함수의 프로토타입에 접근이 가능하다.
자 그럼 Array의 프로토타입(유전자)을 한번봐보자
console.log(Array.prototype)
이야.. 솔직히 놀랍다!!! 이런 메서드들이 prototype에 저장되어 있었다니
그러니까 생성자함수로부터 생성된 인스턴스에서 접근이 가능하다.
그럼 새로운 나만의 메서드를 저장해서 배열을 조절할 수 있지 않을까??
Array.prototype.print=function(){
console.log("PRINT")
}
const arr = new Array(1,2,3,4)
arr.print()
// PRINT이렇게 프로토타입 체인을 통해 arr에서 먼저 print라는 메서드를 찾는다 없다면? 부모의 prototype을 뒤져서 print라는 메서드를 찾는다. (메서드는 객체형식의 함수를 말한다.)
그렇게 함수를 사용할 수 있다.
정리
면접에서 Prototype이 뭔가요?
흠 Prototype이란 말이죠~
먼저 Javascript는 Prototype을 기반으로 하는 언어인데요.
Prototype은 유전자와 같습니다.
생성자 함수가 가지고 있는 유전자입니다.
인스턴스를 생성하게 되면 인스턴스는 부모의 유전자인 Prototype을 참조할 수 있게되고 이 과정을 Prototype chain이라고 합니다!
예를들어 배열뒤에 pop(),push()같은 메서드가 붙을 수 있는 이유가 바로 이 prototype 때문입니다.
생성자함수인 Array는 프로토타입 객체에 많은 메서드들을 저장하고있습니다.
그렇기 때문에 인스턴스로 생성된 배열은 부모의 프로토타입을 참조하여 해당 메서드들을 사용할 수 있습니다.
이러면 아마 50점은 받을 수 있지 않을까..ㅎㅎ!!
Prototype을 어떻게 쓰면 잘 쓸 수 있을지 고민해봐야겠다. 현재는 프로토타입에 대해 이해하고 자바스크립트에 더 큰 매력을 느낄 수 있어 감사하다!
Prototype은 생성자 함수의 유전자 !
