Web/JavaScript

prototype과 prototype chain

gorae_lulu 2023. 1. 23. 21:50

 

prototype

자바스크립트에서 prototype를 써서 자식 object에게 데이터를 물려줄 수 있음.

상속기능을  구현할 수 있는 장치.

 

기계를 하나 만들고 출력하면 아래.

 

기계를 만들고 쓰면 기계와 함께 자동으로 prototype이라는 공간이 생긴다.

프로토타입(prototype)이란.. 유전자라고 생각하면 쉽다. 

 

기계.prototype 마음대로 수정가능한데 name이 'kim'을 추가하도록 하면 

기계로부터 생성된 자식(nana)들은 전부 다 name='kim'을 갖다 쓸 수 있음.

object에다가 자료 추가,수정하는 문법임.

콘솔에 출력해서 확인해 보면

nana에 name을 직접 부여한 적이 없는데 'kim'이 찍힘.

근데 nana라고 쳐보면 name = 'kim' 전혀 없음.

→ 부모 유전자에 기록되어 있으니 가져다 쓸 수 있음.

   

어떤 원리? 부모 유전자에서 어떻게 끌어다 쓰는 걸까?

 

nana는 직접 name을 가지고 있지 않다.

name을 출력해 보면 나오는 이유는 자바스크립트가 이런 원리로 동작하기 때문.

<script>

function 기계(){
	this.q = 'strike';
    this.w = 'snowball';
}
기계.prototype.name = 'kim'

var nana = new 기계()

nana.name  //nana가 name을 가지고 있으면 → 출력

</script>

nana가 name을 가지고 있지 않으면?

컴퓨터는 포기하지 않음. nana 부모유전자를 뒤져 찾는다.

그래서 부모유전자를 가져다 쓸 수 있는 것!

 

object에서 데이터 꺼낼 때 스텝

1. nana가 직접 name 가지고 있니

2. 없으면 부모 유전자에 묻는다.

3. 거기 없으면 부모의 부모유전자까지 묻고 묻고.. 끊임없으 묻는다.

  prototype chain

 

 

 

 

응용

array자료형 만들고 싶으면 대괄호[] 열어서 여러 개 데이터 한 번에 저장가능한데

array자료에다 sort를 붙이면 array가 정렬됨.

이런 array에 붙일 수 있는 기본 함수들(sort, length... 등) 쉽게 쉽게 갖다 쓸 수 있게 됨.

 

 

 

 

 

'Web > JavaScript' 카테고리의 다른 글

class문법  (0) 2023.01.23
정규표현식  (0) 2022.12.30
인수와 인자, Argument & Parameter  (0) 2022.11.25
자바스크립트의 화면 출력 방법 정리  (0) 2022.11.23