비슷한 객체를 여러개 만들어보자!

✅ 생성자 함수

비슷한 객체를 여러개 만들어야할때 어떻게 해야할까? 그리고 만약 그 수가 100개 1000개가 된다면?

이럴떄 사용하는 것이 생성자 함수 이다! 보통 붕어빵 틀로 예시를 많이 든다.

 

-  생성자 함수명은 관레적으로 첫글자를 대문자로 한다.
- new 연산자를 이용해서 함수를 호출하여 객체를 생성한다.
: 일반 함수호출에서 new 연산자를 붙이면 자동적으로 객체를 생성한다 이렇게 반환된 객체를 인스턴스(instansce)라고 한다.

//todo 생성자 함수

function Factory() {

}

//* 일반적인 함수 호출
let factory1 = Factory() // undefined



//* new 연산자를 붙인 함수 호출
let factory2 = new Factory() // Factory {}

 

이제 실제로 활용을 해볼까요?

다양한 유저를 생성자 함수를 사용해서 만들어봅시다.

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

let taehee = new user('taehee', 28); // user {name: 'taehee', age: 28}
let danna = new user('danna', 26); // user {name: 'danna', age: 26}

🧨 원래 함수에서 'this' 는 함수를 호출한 객체를 참조하지만 생성자 함수 앞에 new 연산자를 사용하면 함수 안의 this는 생성자가 만들어낸 객체 즉, 인스턴스를 참조합니다.

 

🤔 그럼 new 연산자를 쓰는 순간 함수에게 어떤일이 일어나는 걸까요?

// new 연산자를 쓰게되면...
function user(name, age) {
    this = {} // 1. 빈 객체를 만들어 this에 할당합니다. (실세론 생략돼있음)

    this.name = name;
    this.age = age; // 2. 함수 본문을 실행하면서 this에 프로퍼티들을 추가합니다.

    return this // 3. 마지막으로 this를 반환  (실세론 생략돼있음)
}

사실 생성자 함수라고 해서 특별한 것이 없다! 어떤 함수든 new 연산자를 사용하면 저 위의 알고리즘이 실행됨

 

이번엔 함수에 메서드를 추가해보자!

function item(title, price){
    // this = {}

    this.title = title;
    this.price = price;
    this.sayPrice = function (){
        console.log(`${this.title}의 가격은 ${this.price}원 입니다.`);
    }

    // return this
}

let item1 = new item('인형', 3000)

item1.sayPrice() // 인혀의 가격은 3000원 입니다.