Prototype

//	object 복사 기계 
// 부모
function machine (){
  // 복사된 object가 기본으로 가질 속성
  this.battery = "120v";
  this.date= "2000-01-12";
}
// 자식에게 battery, date 물려줌
let seohee = new machine() // 이자리가 object가 뿅 남음!
console.log(seohee);

부모가 자식 생산하는 느낌
물려주는 방식을 prototype을 통해서도 가능하다.

function machine (){
  // 복사된 object가 기본으로 가질 속성
  this.battery = "120v";
  this.date= "2000-01-12";
}
machine.prototype	

기계는 자동으로 prototype을 생성한다.

즉 prototype은 유전자이다.

Q. 우리가 키가 작은 이유는?
A. 부모님이 유전자를 물려줬기 때문이다.

이와 비슷한 원리이다.

function machine (){
  // 복사된 object가 기본으로 가질 속성
  this.battery = "120v";
  this.date= "2000-01-12";
}
machine.prototype		// 유전자
machine.prototype.name = "javascript";	

let seohee = new machine();
console.log(seohee);

부모의 유전자에 속성을 추가해주었기 때문에, 자식에서는 존재하지 않는다.

하지만, seohee.name으로 참조가 가능하다.

따라서 어떤 속성을 물려받고 싶을 때, 생성자 함수안에 속성으로 넣어주거나 prototype으로 넘겨주는 방법 2가지가 존재한다.

그런데 어떻게 부모의 유전자를 가져올 수 있는 걸까?
object에서 점 표기법으로 자료를 뽑을 때 일어나는 과정은 다음과 같다.👇

1. 해당 자식이 name이라는 속성을 가지고 있는지 탐색한다.
2. 가지고 있으면 해당 object에서 참조해서 값을 출력해주고, 없다면 한 단계 위의 부모를 탐색한다.
3. 부모 유전자에 속성이 있으면 거기서 출력한다. 없으면 계속해서 한 단계씩 올라가면서 탐색한다.

여기서 잠깐...!
아래의 예제처럼 array 자료에 .sort()가 붙여지는 이유는 무엇일까??

let arr1 = [ 3, 2, 1 ];
arr1.sort();			// [ 1, 2, 3]

🧐 우리는 분명 sort( )를 추가해주지 않았다. 어떻게 가능한걸까?

let arr1 = [ 3, 2, 1 ];			// 인간의 방식
let arr2 = new Array(4, 2, 1);	// 컴퓨터의 방식

arr1.sort();					// [ 1, 2, 3 ]
console.log(arr2.length);		// 3		

[ ] 괄호 표기법으로 배열을 만드는 것이 우리에게 편하지만 컴퓨터는 new Array( )로 이를 인식하게 된다.
우리가 sort( ), length를 직접 추가하지 않았지만, Array라는 부모 유전자에 이미 저장되어 있기 때문이다.

Array.prototype 이라는 유전자를 검색해보면 이미 지정되어있는 속성들을 확인할 수 있다.

더 응용해보자👇

let arr1 = [ 3, 2, 1 ];			
let arr2 = new Array(4, 2, 1);	
// 모든 원소들 출력하는 함수 자체적으로 부모 유전자에 추가
Array.prototype.print = function(){
  console.log(this);
}
arr1.print();
arr2.print();

부모 유전자에 추가된 새로운 print함수를 자식이 올바르게 사용하고 있는 것을 확인할 수 있다.