[JS] 상속 (constructor/prototype)

- constructor

: 비슷한 object를 쉽게 찍어낼 수 있는 문법

constructor : object 생성 기계 (= 생성자)
this : 기계에서 새로 생성되는 object (= instance)

function 기계(이름){
  this.name = 이름;
  this.age = 15;
  this.sayHi = function(){
    console.log('안녕하세요' + this.name + ' 입니다');
  }
}

// 기계가 가지고 있던 name, age.. 속성들을 상속받음 
var 학생1 = new 기계('Park');
var 학생2 = new 기계('Kim');

- prototype (원형, 유전자)

constructor를 만들면 자동으로 prototype이 생성됨
prototype에 값을 추가하면 모든 자식들이 물려받음

기계.prototype.gender = '남'; // 기계의 prototype, 즉 유전자에 gender : '남'이라는 데이터를 추가한 것
var 학생1 = new 기계();
var 학생2 = new 기계();

// 기계로부터 생성되는 모든 자식들은 gender라는 속성을 사용할 수 있음
console.log(학생1.gender); //'남' 출력
console.log(학생2.gender); //'남' 출력

=> 이처럼 작동할 수 있는 원리는 무엇일까?

자바스크립트에는 오브젝트에서 데이터를 뽑을 때 확인하는 순서가 존재한다!

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

console.log(학생1.gender)

(1) 학생1에 직접 gender라는 값이 있는가?
(2) 그럼 부모 유전자에 gender라는 값이 있는가?
(3) 그럼 부모의 부모 유전자에 gender라는 값이 있는가?
(4) 그럼 부모의 부모의 부모의 유전자에 .. 그게 있는가?
-> 1. 내가 직접 가지고 있는지 검사 후 없는 경우 2. 부모 유전자들을 차례로 검사

그래서,
학생1 이라는 object에는 gender라는 값이 없지만 gender값을 출력할 수 있었던 이유는
부모의 유전자(기계.prototype)에 있는 gender 값을 출력한 것.

이와 같은 원리로 더 확장해서

자바스크립트 내장함수를 쓸 수 있는 이유는 무엇일까 ??

var arr = [1,2,3];
console.log( arr.toString() ); //가능

arr 에는 toString()이라는 함수가 존재하지 않는데 쓸 수 있는 이유는,
내가 만든 array의 부모 유전자 가 toString()을 가지고 있기 때문이다.

우리의 입장에선 array를 만들 때는

var arr = [1,2,3];

이렇게 만들지만


컴퓨터가 array를 만드는 방식은 다음과 같다.

var arr = new Array(1,2,3);

내부적으로는 이렇게 new 키워드를 이용하여 object와 array를 만든다.

즉, Array라는 유전자에 부여되어 있는 함수들이 있기에
Array로부터 생성된 자식인 arr가 toString()을 사용할 수 있는 것이다. (참조)

정리] 차이점
constructor
-> 자식들이 값을 직접 소유하게 만들고 싶을 때
prototype
-> 부모만 가지고 있고 그걸 참조해서 쓰게 만들고 싶을 때