prototype

- 전 포스팅 class 문법에 이어서 prototype을 이해해야한다. ( https://youtu.be/wUgmzvExL_E )

 

마찬가지로 코딩애플님의 유튜브 영상을 참고함

 

- class 복습 겸 설명

function 기계(){
	this.q = '찍기';
    this.w = '눈던지기';
}
var nunu = new 기계() // nunu라는 이름의 오브젝트가 생성

위 예제를 예시로 함수 기계라는 class는 부모이고 var nunu = new 기계() 는 자식 이라고도 설명을 한다.

왜 이런식으로 설명을 하냐면 기계가 갖고있는 q와 w를 물려주기 때문이다.

 

자바스크립트에서는 이런식으로 물려주는 방법이 두가지 방법이 더 있는데 prototype이다.

 

- prototype

 

콘솔창에 기계() 를 출력해보고 기계.prototype을 출력했을 때의 결과

기계()는 당연히 내가 만들었으니 출력이 되는것이고 내가 만들지 않은 기계.prototype 이라는것도 존재한다.

 

간단히 이해하면 유전자라 이해하면 쉽게 이해할 수 있다.

 

function 기계(){
	this.q = '찍기';
    this.w = '눈던지기';
}

기계.prototype.name = 'kim'; // 오브젝트에 자료 추가하듯이 prototype으로 새로운 정보를 넣어줄 수 있다.

var nunu = new 기계()

기계도 일종의 오브젝트라 오브젝트에 추가하듯 추가할 수 있다.

위 처럼 기계에 새로운 정보인 name = 'kim' 이라는걸 넣어주면 기계에 그 정보가 들어간다.

그리고 prototype 새로운 정보를 추가해주면 자식들은 그 정보를 사용이 가능하다.

 

콘솔창에 nunu.name과 nunu를 출력했을 때 결과

콘솔창에서 직접 찍어서 확인을 해보면 nunu.name에 'kim'이 들어가있는걸 볼 수 있는데

nunu를 출력해보면 거기에는 또 name이 들어있지않다.

 

그러나 부모가 name을 가지고 있다면 자식은 그 데이터를 사용할 수 있다.

 

상속을 받고싶은 데이터가 있다면?

기계라는 class문법에 직접 추가하거나 prototype을 사용하여 추가해줄 수 있다.

 

그러나 유전자인 prototype에 추가를하면 자식은 갖지않고 부모만 그 데이터를 갖고있다

 

이제 nunu가 name을 갖고있지 않은데 nunu.name을 했을 때 출력이 되는 이유는?

자바스크립트의 동작 원리 때문이다.

object에서 자료를 뽑을 때 nunu가 name을 실제로 갖고 있을 땐 바로 출력해주면 되지만

name을 실제로 갖고있지 않을 때 자바스크립트는 거기서 멈추지 않고 nunu의 부모 유전자를 찾아본다.

부모 유전자에 데이터가 존재한다면 그걸 가져오는것이다.

 

1. nunu에게 name이 있는지 직접확인

2. nunu에게 name이 없다면? 부모 유전자를 확인

3. 부모 유전자에게 name이 있다? 그걸 가져와서 출력해줌

4. 거기에도 없다면 부모의 부모유전자까지 계속 찾아본다.

 

---

위에서 prototype을 알았고 오브젝트에 대해 알아보았다. 또 다른 예시로

let 배열 = [4,2,3,1]; // let 배열 = [1,2,3] 이런건 사람이 알기 쉽게 해놓은것이고 컴퓨터는
// let 배열 = new Array(4,2,3,1) 이런식으로 생성해준다.
배열.sort()

위와 같은 예제가 존재한다면?

sort같은 내장함수들은 실제로 직접 만들어서 사용하지않고 그냥 사용하면 바로 사용이된다.

이것도 위 prototype과 같은 원리인데

Array에 유전자에 sort와 다른 여러 내장함수들이 저장이되어있는것이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

보통 구글에 sort를 검색해보면 MDN에서 Array.prototype.sort()로 나오는걸 볼 수 있다.

 

위와 똑같은 원리라 생각하면 된다.

 

같은 원리이기 때문에 Array.prototype에도 새로운 함수를 추가해서 사용을 할 수 있다.

let 어레이 = [4,2,1];

Array.prototype.함수 = function(){}

위 처럼 Array의 유전자에 함수라는 함수를 추가해주고 콘솔창에 출력해보면

Array.prototype에 새로운 함수 추가한걸 출력해본 결과

콘솔창에서 출력해본 결과로 에러가 나지않고 undefined가 나오는걸 볼 수 있고 만들어두지 않은 함수2는 에러가 나는걸 볼 수 있다.