생성자 함수 자바스크립트

 

생성자 함수(Constructor Function)는 객체를 만들고 기존 객체의 속성에 대한 값을 설정하는 특수 함수입니다.

생성자 함수를 이해하기 위해 먼저 객체를 만들어 보겠습니다.

 

객체 리터럴 사용 객체 만들기

let user = { 
    name:'kim',
    age:20,
}

 

단일 객체를 만들 때는 위와 같이 리터를 방식을 사용해서 user라는 객체를 만들면 되는데

값만 다른 여러 개의 객체가 필요할 때 그때마다 일일이 객체를 만들어 줄 필요가 없이

생성자 함수를 만들어주면 됩니다.

 

this를 이용한 생성자 함수 만들기

function User(name, age) { //생성자 함수는 보통 첫글자를 대문자로 만든다.
    this.name=name;
    this.name=age;
}

 

생성자 함수는 붕어빵 틀이라고 생각하면 됩니다.

위와 같이 틀을 만들어 주고 

let user1 = new User('lee',30);

new 키워드를 사용해서 함수의 인스턴스를 생성하게 되면 this로 생성된 객체를 참조합니다.

 

콘솔 창에 user1을 출력해보면

name이 lee이고 age가 30인 객체가 생성된 걸 확인할 수 있다.

 

 

여러 개의 객체 만들기

위와 같은 방법으로 동일한 생성자를 사용해서 여러개의 객체를 만들 수 있다.

function User(name, age) {
    this.name=name;
    this.age=age;
}

let user1 = new User('lee',30);
let user2 = new User('park',10);
let user3 = new User('choi',25);

 

개체 프로토타입

프로토타입을 사용해서 속성과 메서드를 생성자에 추가할 수 있다.

User.prototype.address = "seoul";

콘솔 창에 출력해보면 seoul이라고 나오는걸 확인할 수 있다.

 

생성자 함수에 메서드 추가하기

User 생성자 함수에 나이에 따라서 성년과 미성년을 구별해서 콘솔창에 출력하는 메서드를 추가해 보자

function User(name, age) {
    this.name = name;
    this.age = age;
    this.minors = function(){
        if(age < 20) {
            console.log(`${this.name}님은 미성년자 입니다.`);
        } else {
            console.log(`${this.name}님은 성인 입니다.`);
        }
    }
}
let user1 = new User('lee',30);
let user2 = new User('park',10);
let user3 = new User('choi',25);
let user4 = new User('Han', 17);

 

생성자 함수의 알고리즘

function User(name, age) { 
    // this = {} // 생략된 부분

    this.name=name;
    this.age=age;

    // return this;//생략된 부분
}