JS중급_constructor와 prototype

▶️ constructor 문법

var student1 = {name : "kim", age : 15};
var student2 = {name : "park", age: 16};
//.
//.
//.
var student30 = {name : "heo", age : 15};

• 비슷한 오브젝트를 여러개 만들 때 쓰는 것이 constructor다.
  (붕어빵 틀을 생각해보면 된다.)

function Student(name, age) {
	this.name = name;
  	this.age = age;
  	this.sayHi : function () {
    console.log('Hello '+ this.name + ' 입니다.');
    console.log(this);
    }
}

var student1 = new Student('kim', 15);
var student2 = new Student('park', 16);

• constructor의 기본적 생성 방법은 다음과 같은데, 첫글자는 항상 대문자로 설정한다.
• 여기서 this는 새로 생성되는 오브젝트를 의미한다.(=instance)
• 함수와 파라미터도 포함할 수 있다.
• Student라는 constructor가 가진 name, age라는 속성을 그대로 물려받아 오브젝트를 생성하는 것을 재산 물려주는 상속과 비슷하다 해서 상속이라고 부른다.

---

▶️ 상속과 prototype 문법

function Student() {
	this.name = 'kim';
  	this.age = 15;
}

let s1 = new Student();
let s2 = new Student();

Student.prototype.gender = 'woman'

console.log(s1); // { name : 'kim', age : 15; }
console.log(s1.gender);//woman
console.log(Student.prototype); // 출력값 : {constructor: ƒ}

• constructor를 이용한 오브젝트 생성을 객체지향 용어로 상속이라고 배웠다.
• 부모의 유전자 역할을 해주는 일종의 비밀 공간을 prototype이라고 하는데, prototype은 자식들이 물려받을 수 있는 유전자라고 생각하면 된다.
• 여기에선 Student의 prototype에 { gender : 'woman' } 이라는 key/value 한쌍을 저장했다.
• prototype은 이렇게 object 자료형 다루듯이 사용하면 된다.

▶️ prototype의 작동원리

(1). student1에 직접 gender라는 값이 있는가? 있다면 출력
(2). 없다면 그럼 부모 유전자(Student.prototype)에 gender라는 값이 있는가? 있다면 출력
(3). 없다면 그럼 부모의 부모 유전자에 gender라는 값이 있는가? 있다면 출력
(4). 없다면 그럼 부모의 부모의 부모의 유전자에 값이 있는가? 있다면 출력
(5). 없다면4번 상위요소까지 반복한다.

• 이를 요약하면 내가 요소를 가지고 있는지 검출한 뒤에, 가지고 있으면 부모요소를 차례대로 검사한다.

function Student() {
	this.name = 'kim';
  	this.age = 15;
}

let s1 = new Student();
let s2 = new Student();

Student.prototype.gender = 'woman'

console.log(s1); // { name : 'kim', age : 15; }
console.log(s1.gender);//woman
console.log(Student.prototype); // 출력값 : {constructor: ƒ}

• 이 코드에서 s1.gender 를 출력시 woman이 출력되는 것이 그 예이다.

---

▶️ toString()/Sort() 등의 내장함수를 사용할 수 있는 이유

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

• 위의 arr array에서 toString() function을 사용할 수 있는 이유는 arr array의 부모 유전자가(혹은 부모의 부모 유전자가) toString() function을 가지고 있기 때문이다.
• arr array는 constructor가 없는것이 아니냐고 반문할 수도 있지만, array나 object는 아래와 같은 방법으로도 생성할 수 있다.

var arr = [1,2,3];  
var arr = new Array(1,2,3); //위와 동일한 내용의 코드이다.
var obj = new Object();

console.log(Array.prototype);//출력시 toString,Sort,Slice 등 다양한 함수를 확인 할 수 있다.

• 위에서 array에 관한 코드는 위,아래 모두 완전히 동일한 내용의 코드이다.
• 좌항은 인간이 array를 만드는 방식 / 우항은 컴퓨터가 실제로 array를 만드는 방식이다.
• 사람은 대괄호를 쳐서 요소를 만들지만 컴퓨터는 내부적으로 항상 new 키워드를 이용해서 array / object를 생성한다.

---

▶️ 두 요소의 상속 방식 차이

• 자식들이 값을 직접 소유하게 만들고 싶으면 constructor로 상속시키시면 되고
• 부모만 가지고 있는 요소를 참조해서 쓰게 만들고 싶으면 prototype으로 상속시키면 된다.
• 보통은 상속할 수 있는 function 같은 것들은 prototype으로 많이 만들어놓는다.

---