프로토타입이란?
prototype은 '유전자'라고 생각하면 됌 (코딩애플 쌤이 말해주신 설명 ㅎㅅㅎ)
function 기계(x = "x기본값", y = "y기본값") {
this.q = x;
this.w = y;
}
// 콘솔창에 기계.prototype이라고 찍어보면
// 우리도 모르게 비밀공간이 생겨있음
// prototype은 '유전자'라고 생각하면 됌
기계.prototype.name = "kim";
//이 유전자에 먼가를 추가하면, 그 아래 자식들도 다 갖고있음
var nunu = new 기계("달리기", "말하기");
console.log("nunu", nunu);
// 실제로 nunu를 찍어보면 결과값은
// { q: '달리기', w: '말하기' } 이렇게 뜨지만
console.log("nunu.name", nunu.name);
//이렇게 nunu.name을 치면 유전자속에(프로토타입) 있는 name을 발견할 수 있음
nunu가 실제로 자기가 쥐고있지도 않은 name이 출력될 수 잇는 원리가 뭘까?
=> 자바스크립트 작동원리!!!
자바스크립트는 nunu.name이라고 명령하면 첨에 nunu한테서 찾지만 없으면, 그 유전자까지 뒤지러감(프로토타입)
(자바스크립트가 오브젝트를 꺼낼때 여러 스탭이 있다고 보면 된다)
<자바스크립트가 옵줵에서 자료 뽑을때 순서> = 프로토타입 체인
1.직접 자료를 갖고있으면 그걸 출력
2.없으면 부모유전자까지 뒤진다.
3. 없으면 부모의 부모까지 가버림
요런 개념으로 prototype이 자주 등장하는 걸 이해할 수 있음 ㅎㅅㅎ
이 프로토타입을 이용해서
만약 내가 모든 array자료에서 자주쓰고싶은 함수가 생기면??
'📙 자바스크립트 공부' 카테고리의 다른 글
문득 궁금해진 Promise와 콜백지옥(Promise 객체 안쓸때)의 차이 (0) | 2023.04.17 |
---|---|
&& 연산자로 undefined/null 걸러내기 (타입스크립트에서 응용) (0) | 2023.01.18 |
[js] 클래스 개념 이해하기 (1) | 2023.01.15 |
[js] async와 await 제대로 알고 있었늬!? (0) | 2023.01.02 |
리액트는 왜 쓰며, 리액트와 vue와 angular의 차이 (0) | 2022.12.20 |
댓글