자바스크립트 JavaScript : 생성자(Constructor)

생성자(Constructor)란?

생성자는 객체를 편리하게 생성할 수 있게 도와주는 기계같은 역할입니다. 비슷한 객체들을 여러개 생성하기 위해서 생성할때마다 키밸류 값을 일일이 입력해서 만드는 것이아니라 하나의 생성자를 만들어놓으면 그 생성자를 이용하여 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해줍니다.

 

이렇게 설명만 나열해서는 이해하기 어려울 수 있는 예를 들겠습니다.

현재 자바스크립트로 학생 출석부를 만들어야 하는 상황입니다.

var 학생1 = { name : 'Kim', age : 15 };
var 학생2 = { name : 'Park', age : 15 };
...

이렇게 쭉 30명을 만들어야합니다. 어떻게 하는게 가장 빠른 방법일까요?

당연히 오브젝트를 직접 중괄호쳐서 하드코딩 30개 하는 것 보다는 비슷한 오브젝트들이니 복사를 하는게 좋을 것 같습니다. 

 

//var 학생1 = { name : 'Kim', age : 15 };

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

object 자료 복사 기계만들 땐 function이라는 함수만드는 키워드를 빌려서 이용하시면 됩니다. 

function을 하나 만드시고 거기 안에 this.name과 this.age를 집어넣어주시면 됩니다.

이게 바로 오브젝트 생성 기계 Constructor입니다.

 

쉽게 말하자면, constructor 문법의 용도 비슷한 오브젝트 여러개 만들 때 오브젝트 를 마구 복사하고 싶을때 사용하는 것이죠.

 

이곳에서 this는 새로생성되는 오브젝트를 뜻하고, 인스터스라고 합니다.

 

이제 기계에서 새로운 오브젝트를 뽑고 싶으시면 이렇게 따라하시면 됩니다. 

//var 학생1 = { name : 'Kim', age : 15 };

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

var 학생1 = new 기계();
var 학생2 = new 기계();

new라는 키워드를 쓰신 다음 오른쪽에 기계(constructor) 이름을 쓰신다면 기계로부터 새로운 오브젝트를 하나를 뽑아낼 수 있습니다. 그리고 그걸 변수에 저장하시면 이제 자유롭게 오브젝트를 뽑아 쓰실 수 있는겁니다. 

 

오브젝트에 함수가 들어가야 한다면

예를 들면 모든 학생 오브젝트 안에 sayHi() 라는 함수를 추가해야한다고 칩시다. 

학생1.sayHi()라고 사용하시면 콘솔창에 "안녕하세요 'Kim'입니다"라고 이름이 포함된 인삿말을 출력해주어야합니다. 

어떻게 코드를 짜면 될까요? 

 

var 학생1 = { 
    name : 'Kim', 
    age : 15 
    sayHi : function(){
        console.log('안녕하세요' + this.name + ' 입니다');
    }
};

학생1.sayHi();

이렇게 하면 되겠군요.

 

근데 학생1이라는 곳에다가만 하드코딩하는게 아니라 앞으로 모든 학생들이 sayHi()를 쓸 수 있게 만들고 싶으면 어떻게 해야할까요? 

당연히 오브젝트 생성 기계에 추가하시면 되겠죠? 

 

기계(Contructor)에 sayHi()를 추가해봅시다.

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

학생2.sayHi();

기계에 저렇게 this.sayHi 를 추가하시면 이제 기계로부터 생성되는 모든 학생들이 sayHi()를 가지고 있게 됩니다.

그럼 학생1, 학생2 전부 sayHi()를 쓸 수 있게됩니다. 

 

학생 오브젝트를 뽑을 때 각각 다른 name, age 값을 부여하고 싶다면

또한, 함수이기 때문에 파라미터 값도 전달할 수 있으니 값을 고정하지 않고 확장성있게 활용할 수도 있습니다.

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