[자바스크립트 중급] 생성자 함수

1. 생성자 함수

1) 동일한 포멧의 여러 객체(object)를 생성하기 위한 틀 (Like 붕어빵 틀)

•  회원 정보, 가격표 같이 동일한 포멧에 여러 객체를 생성해야 할 때 하나하나 객체 생성 코드를 작성하는 것이 아닌 생성자 함수 하나로 퉁침

2) 생성자함수의 함수명은 첫글자가 대문자인 것이 관례. 

 

📌 예시)

// 객체 리터럴

let person = {

    name: "Mike",

    age: 29

}

// 생성자 함수

function MakePerson(name, age){

    this.name = name;

    this.age = age;

    this.sayName = function(){

        console.log(`제 이름은 ${name}입니다`)

    }

}

// 생성자 함수 이용한 객체 생성

let person1 = new MakePerson("Mimi", 20);

let person2 = new MakePerson("Coco", 19);

console.log(person1.name); // Mimi

console.log(person2.age); // 19

person2.sayName(); // 제 이름은 Coco입니다

 

3) 객체 리터럴과 생성자 함수의 구조 차이

• 객체 리터럴은 변수 선언구조이고 생성자함수는 함수 구조다
• 객체 리터럴은 키와 벨류를 : 로 구분 하지만 생성자함수는 키에 this가 붙고 = 로 구분한다. 
• 프로퍼티끼리 구분도 객체 리터럴은 , 로 하지만 생성자함수는 ; 로 한다.

4) 생성자 함수를 이용한 객체 생성시 함수 앞에 new 키워드가 꼭 붙어야함.

5) new 키워드의 작동 방식

// new 키워드 작동 방식

function MakePerson(name, age){

     this = {} // 코드에선 생략됨

    this.name = name;

    this.age = age;

    return this; //코드에선 생략됨

}

new MakePerson(); // new 키워드로 함수 실행

• new 키워드로 함수 실행시 함수 내부에 빈 객체를 만들고 this에 할당함.
• 함수 본문을 실행하며 this에 프로퍼티 들을 추가함.
• 마지막으로 this를 반환

 

비슷한 객체를 여러개 만들 때 유용하게 사용합시다.