객체지향 #2

재웅·2023년 3월 30일

오늘의 정리

목록 보기

5/52

prototype

function 기계(){
  this.name = 'Kim';
  this.age = 15;
}
var 학생1 = new 기계();
var 학생2 = new 기계();

console.log(기계.prototype);

constructor 기계를 만들면 prototype이라는 항목이 기계안에 몰래 생성된다.

그 prototype이 부모의 유전자역할을 해주는 일종의 비밀 공간이다.

기계.prototype => 기게의 유전자

기계.prototype에 변수나 함수가 들어가있다면 새로운 오브젝트(자식)들은 물려받아 사용 가능

prototype으로 obj생성

function 기계(){
  this.name = 'Kim';
  this.age = 15;
}

기계.prototype.gender = '남'; //계의 prototype이라는 곳에 { gender : '남' } 이라는 key/value 한쌍을 저장
var 학생1 = new 기계();
var 학생2 = new 기계();

console.log(학생1.gender); //'남'이 출력됩니다

기계의 prototype, 즉 유전자에 gender : '남'이라는 데이터를 추가한 것

이제 학생1, 학생2 같은 기계로부터 생성되는 모든 자식들은 gender라는 속성을 사용할 수 있다.

(참고)

prototype에는 값을 여러개 부여할 수도 있고 심지어 함수도 집어넣으실 수 있습니다. object 자료처럼 다뤄주시면 됩니다.
prototype에 추가된 데이터들은 자식들이 직접 가지는게 아니라 부모만 가지고 있습니다.
이 말은 학생1.gender 는 사용가능하지만 콘솔창에 학생1을 입력했을때 obj에 gender : '남' 이라는 값이 저 장되어있지 않다는 뜻이다 이말인즉슨 부모 유전자에만 저장되어있고 가지고있지않지만 사용 가능하다는것.

작동원리

학생1.gender라고 사용하면 '남'이 출력되는 이유는

자바스크립트는 오브젝트에서 값을 출력할 때 이런 순서로 물어봅니다.

(1) 학생1에 직접 gender라는 값이 있는가?

(2) 그럼 부모 유전자에 gender라는 값이 있는가?

(3) 그럼 부모의 부모 유전자에 gender라는 값이 있는가?

(4) 그럼 부모의 부모의 부모의 유전자에 .. 그게 있는가?

쉽게말하자면 오브젝트에서 값을 뽑을 때

내가 직접 가지고 있는지 검사
내가 가지고 있지 않으면 부모 유전자들을 차례로 검사하는구나라고 잘 기억해주시면 됩니다.

그래서 학생1이라는 오브젝트가 gender라는 값을 가지고 있지 않지만
부모의 유전자(기계.prototype) 에 있는 gender라는 걸 출력할 수 있는 이유입니다.

작동원리 2 : 자바스크립트 내장함수 toString() 을 쓸 수 있는 이유

내가 만든 array에 arr.toString() 이렇게 붙일 수 있는 이유는

내가 만든 array의 부모 유전자가 toString()을 가지고 있기 때문입니다. (혹은 부모의 부모요)
```
var arr = [1,2,3];
var arr = new Array(1,2,3);
```
위 코드 두줄은 같은 완전 똑같은 의미입니다.

위는 인간이 array 만드는 방식, 밑은 컴퓨터가 array 만드는 방식입니다.

사람은 귀찮아서 [] 그냥 대괄호쳐서 만드는데 내부적으로는 저렇게 new 키워드를 항상 이용해서 array/object를 만들어줍니다.

Array로부터 생성된 자식들은 Array의 유전자에 부여되어있는 함수, 데이터들을 자유롭게 사용가능