객체지향 constructor,prototype

constructor는 object를 생성하는 기계이다.

즉, 마구 복사를 하고 싶을 때 사용한다.

예를 들어, 출석부를 만든다고 생각해보자.

//하드코딩은 이럼
var 학생1 ={
	name : 'Kim',
   	age : 15
}

//function은 함수만들때도 쓰지만 constructor만들때도 씀 (그래서 이름을 대문자로 시작하게함)
function 기계() {
	this.name = 'Kim';
    	this.age = 15;
}

var 학생1 = new 기계(); //이러면 object 뽑힘

위처럼 사용하며 function안에 있는 this는 새로 생성되는 object를 뜻한다. 즉, this.name은 새로 생성되는 object의 name엔 Kim을 넣어주세요가 된다. 그래서 학생1이란 변수에 new를 사용해 constructor이름을 써주면 object가 생성된다.

계속 사용하는 this는 개발자용어로 instance라고 한다. 그리고 기계는 constructor(생성자)가 된다.

 

이제, 학생1.sayHi()을 입력하면 "안녕하세요 Kim입니다"라고 나오게 해보려한다.

//하드코딩은 이렇지만
var 학생1 ={
	name : 'Kim',
   	age : 15,
        sayHi : function() {
            console.log('안녕하세요' + this.name + '입니다.')
        }
}

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

이렇게 문자나 함수를 다 넣어서 오브젝트 생성기계를 만들 수 있다.

 

마지막으로 문제점이 있다. 학생1과 학생2가 다 같으므로 constructor에 하드코딩이 아니라 파라미터를 이용해주면 된다.

function 기계(이름,나이) {
	this.name = 이름;
    	this.age = 나이;
      	this.sayHi = function() {
            console.log('안녕하세요' + this.name + '입니다.')
        }
}
var 학생1 = new 기계('Park',15);
var 학생2 = new 기계('Kim',21);

이런 식으로, 파라미터를 뚫어서 사용할 때 해당 파라미터를 넣어주면 해결할 수 있다.

 

위처럼 기계로부터 name, age 등을 학생1, 학생2가 각각 물려받는걸 상속이라고 한다. 

그리고 이 상속을 구현할 수 있는 js에만 존재하는 prototype이란 문법이 있다.

prototype은 유전자라고 비유할 수 있다고 한다. constructor를 만들면 prototype이란 공간이 자동으로 생긴다.

prototype이 유전자인 이유는 prototype에 값을 추가하면 모든 자식들이 물려받을 수 있다.

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

//prototype
기계.prototype.gender = '남';

var 학생1 = new 기계('Park',15);
var 학생2 = new 기계('Kim',21);

위처럼 이렇게 쓰면 학생1 학생2 같은 자식들은 .gender을 사용할 수 있다. (부모 유전자에 등록을 했기 때문)

원리는 js에서 학생1.gender라고 입력하면

(1) 학생1이 직접 gender을 가지고 있는가?

(2) 없으면, 학생1의 부모 유전자가 gender을 가지고 있는가?

라는 과정을 거치기 때문에 prototype을 설정했을 때 자식에서 사용하는게 가능한 것이다.

(여러가지 내장함수도 부모에 부모로 거슬러올라가서 찾아서 사용하는 것)

 

prototype은

1. 함수에만 몰래 생선된다.

2. 내 부모유전자가 궁금하면 __proto__를 입력하면 검색할 수 있다.

3. __proto__를 이용해 부모님을 강제 등록할 수 있다.

var 부모 = { name : 'Kim' };

var 자식 = {};
자식.__proto__ = 부모;

이렇게 나의 부모 유전자는 이걸로 해주세요~ 하면 등록을 할 순 있다.