진짜 프로토타입 혼자 읽으면서 이해해보려다가 뇌가 너무 힘겨워해서
동영상을 찾아보기로 했다. 생성자 함수까지 포함해 유려하게 설명은 못 해도
대충 느낌만 알고 가기🥲
⛄ 비슷한 object를 여러 개 쉽게 찍어내고 싶을 때 쓰는 문법!
🖥️ <script>
function 기계(){
this.q = 'strike';
this.w = 'snowball';
}
var nunu = new 기계()
</script>
-
object 찍어내는 기계를 function을 이용해 하나 만들면, 복사기계 완성.
-
복사된 object가 미리 가지고 있을 위시리스트를
this.q = 'strike',this.w = 'snowball'등으로 미리 채움
({q: 'strike},{w: 'snowball'}이 추가가 된 것이고,
이것들은 복사된 object가 기본으로 가질 속성이다.) -
new 기계()라고 쓰면 object가 뿅 남음
({q: 'strike},{w: 'snowball'}를 가지고 있지!) -
var nunu = new 기계()이렇게 쓰면 여러 개 찍어낼 수 있다.
훨씬 코드가 간결해지고 편하겠죠?
🖥️ console.log(nunu)
// ▶️기계 {q: 'strike, w: 'snowball'}➡️ 부모(기계)가 자식(nunu)을 생산하고, 자식에게 q,w를 물려줌(상속)
⛄ JS에만 있는 또 다른 상속 방법이 바로 prototype!
이렇게 콘솔을 찍어보면 기계가 나온다.
🖥️ console.log(기계)
// ▶️ f 기계() {
this.q = 'strike';
this.w = 'snowball';
}
✨ console.log(기계.prototype)
// ▶️ {constructor: f}그리고 기계와 함께 생성되는 비밀 공간이 하나 있다.
(딥다이브에서 슬롯이라고 부른 듯)
우리는 prototype이라는 애를 만들어 놓은 적이 없는데, ✨이렇게 나왔잖아요.
몰래 생성된 공간입니다.
구글링특) 겁나 어렵게 설명함
➡️ prototype은 원형이란 말보다는 유전자라고 이해하면 쉽다!!!
- 코딩애플 : 자 여러분 왜 못생기고 키가 작습니까, 우리는?
- 나 : 🥲
- 코딩애플 : 이거는 부모님 탓이에요. 부모님이 유전자를 물려줬기 때문에 키가 작고 못생긴 거예요. 부모님이 키가 작다고 항상 키가 작은 게 아니라,
부모님이 물려준 이 유전자에 키가 작은 유전자가 기록이 되어 있으면
우리도 키가 작게 되는 것일 뿐입니다.
이와 비슷하게 prototype도 유전자 역할을 한다.
기계.prototype을 출력해 본 것처럼, 이런 부분을 우리 마음대로 수정할 수 있다.
기계.prototype.name = "kim"을 추가해볼게요.
(object에 자료 추가/수정하는 문법이죠?)
prototype도 {object} 자료이므로 점표기법으로 접근해서 추가/수정 가능.
그리고 부모인 기계에 name을 추가해두면 자식들은 모두 가져다 쓸 수 있다.
➡️ prototype에 뭔가를 추가하면 자식들이 사용 가능
🖥️ <script>
function 기계(){
this.q = 'strike';
this.w = 'snowball';
}
기계.prototype.name = 'kim';
var nunu = new 기계()
console.log(nunu.name)
// "kim"
}
</script>
우리는 nunu에다가 name을 직접적으로 부여한 적이 한 번도 없다.
그런데 부모 유전자에 기록이 되어 있어서 그것을 갖다 쓸 수 있는 것이다.
이게 바로 prototype의 역할!
🖥️ console.log(nunu);
// ▶️기계 {q: 'strike, w: 'snowball'}nunu를 콘솔에 찍어보면, name은 전혀 없죠?
근데 부모의 유전자가 가지고 있어서 가져다 쓸 수 있는 것이고,
상속 기능을 구현하는 두 번째 방법이다.
⛄ 즉 어떤 속성을 상속하고 싶을 때 방법은 두 가지
🖥️ <script>
function 기계(){
this.q = 'strike';
this.w = 'snowball';
}
// ❤️ 위에 this.q나 this.w처럼 function 기계 안에 추가하는 방법
기계.prototype.name = "kim"
// 💛 이렇게 prototype으로 추가하는 방법
var nunu = new 기계()
</script>1. ❤️ this.q나 this.w처럼 function 기계 안에 추가하는 방법
: 자식이 {q: 'strike'}를 직접 가짐
2. 💛 prototype으로 추가하는 방법
: 부모만 가지고 있고 자식이 끌어다 씀
⛄ prototype 상속 원리?
- object에서 자료를 뽑을 때 일어나는 일
-
nunu.name으로 name을 뽑자
▶️ nunu가 name이라는 항목을 가지고 있으면 ▶️ 출력 -
nunu가 name을 가지고 있지 않으면
▶️ nunu 부모 찾아봄 (정확히는 부모 유전자한테 물어봄 "너 name 있냐?")
▶️ 있으면 출력해주세요. -
부모에게 없으면 부모의 부모 유전자까지 찾음
➡️ 이렇게 계속 물어보는 것이 프로토타입 체인(Prototype Chaining)!
⛄ 원리 알기
<script>
var 배열 = [4, 2, 1];
배열.sort()
console.log(배열);
// ▶️ (3) [1, 2, 4]
</script>배열이란 배열이 있고, sort() 같은 거 붙여서 쓰면 정렬이 되어서 나온다.
➡️ array 자료에 붙일 수 있는 기본 함수들이 있다.
(sort()같은 함수를 우리가 추가해주지 않았는데 사용할 수 있고,
.length 같은 것도 사용 가능)
🪄 Q : 왜 가능하지?
JS에서 array를 만드는 방식
1. var 배열 = [4, 2, 1] ➡️ 인간(에게 편한) 방식
2. var 배열 = new Array(4, 2, 1) ➡️ 컴퓨터 방식
- new 키워드 : new 오른쪽에 기계 이름을 적으면, 이 기계로부터 자식을 하나 뽑아주는 문법 (그리고 그것을 변수에 담아 사용)
(객체, 문자열 등도 마찬가지의 방식 사용)
🪄 A : 부모 유전자에 써있기 때문!
sort나 length 같은 애들이 기록되어 있겠죠?
🖥️ // 검증 타임
console.log(Array.prototype)
▶️ {constructor: f, concat: f, copyWithin: f, fill: f, fund: f, ...}➡️ 콘솔에 찍힌 위 항목들 중에 length, sort가 존재한다.
➡️ array 자료의 자식들은 length, sort 등을 갖다 쓸 수 있다!
MDN Web Docs를 보면 Array.prototype.sort()라는 타이틀로 적혀있음을 확인할 수 있다.
⛄ 원리를 응용하기
모든 array 자료에서 쓸 수 있는 함수를 내가 추가하기!
🖥️ <script>
function 기계(){
this.q = 'strike';
this.w = 'snowball';
}
기계.prototype.name = 'kim';
var nunu = new 기계()
var 배열 = [4, 2, 1];
var 배열 = new Array(4, 2, 1);
// 예를 들어, 2를 삭제하는 기능을 만들어 쓸 건데, 자주 쓰니까 어디다가 저장해두고 싶다.
// 모든 배열에 적용 가능하게 하고 싶다.
Array.prototype.2를삭제하는함수 = fucntion(){}
</script>
}
➡️ 모든 array 자료에서 '2를삭제하는함수'를 가져다 쓸 수 있게 됐다!
