본문 바로가기

Study/JavaScript

[JavaScript] 객체지향1. Constructor = Object 뽑아내는 기계

#0. Constructor (생성자)

- 비슷한 유형의 오브젝트를 편리하게 생성하도록 도와주는 기계다.

 

#1. 왜 이걸 사용해야하나?

- 학급의 30명의 학생들의 인적사항을 담은 출석부 데이터를 생성해야한다고 생각해보자. 

- 기존의 지식으론, 학생 데이터를 30개 일일히 다 만들어야한다. 이건 너무 번거롭다. 이런한 반복작업을 조금 더 쉽게 할수 있도록 도와주는 것이 constructor ! 

var 학생1 = {name: '김윤아', age: 15};
var 학생2 = {name: '남도일', age: 15};
var 학생3 = {name: '손예진', age: 16};
// ...(중략)
var 학생30 = {name: '송혜교', age: 15};

 

#2. Constructor 사용법

1. fucntion 키워드를 사용하여 constructor 생성

- constructor 생성시, 이름의 맨앞은 대문자를 쓰는 것이 일반적이다. (함수와의 구분을 위함)

ex) function student()   -> x    function Student()  -> o

2. new constructor이름 으로 object를 생성해준다. 

// 1. Constructor 생성
function Student(name, age) {
    this.name = name; // this는 새로 생성되는 object = instance
    this.age = age;
    this.sayHi = function(){ // 함수도 이런식으로 넣을수 있음.
    	console.log(`안녕하세요 ${this.name} 입니다`); 
    }
}

// 2. new Construct를 사용해, object를 뽑아낸다.
var 학생1 = new Student('김윤아', 15);
var 학생2 = new Student('남도일', 15);
var 학생3 = new Student('손예진', 15);
// // ...(중략)
var 학생30 = new Student('송혜교', 15);

console.log(학생1,학생2,학생3,학생30); // 출력결과 >> Student {name: '김윤아', age: 15, sayHi: ƒ} Student {name: '남도일', age: 15, sayHi: ƒ} Student {name: '손예진', age: 15, sayHi: ƒ} Student {name: '송혜교', age: 15, sayHi: ƒ}
학생1.sayHi(); // 출력결과 >> 안녕하세요 김윤아 입니다

- constructor와 파라미터를 사용하면, 학생 object를 편리하게 뽑아낼 수 있다. 

- costructor를 통해 생성되는 object 학생1, 학생2, 학생3 ... 학생30을 instance라고 한다.

- 그리고 constructor를 통해, 만들어진 이 인스턴스들은 부모인 constructor를 상속받았다. 라고도 표현한다.

 

>> 의의

같은 key를 가진 object를 편리하게 뽑아낼때 constructor를 사용하면 편리하다