생성자 함수
유사한 객체를 여러 개 만드는 방법은 무엇입니까? 숫자가 100 또는 1000이면 어떻게 됩니까?
이 경우 생성자 함수가 사용됩니다!
나는 보통 Taiyaki 금형으로 많은 예를 제공합니다.
– 생성자 함수 이름은 규칙에 따라 대문자로 표시됩니다.
객체는 new 연산자를 사용하여 함수를 호출하여 생성됩니다.
: 일반 함수 호출에 new 연산자를 붙이면 자동으로 객체가 생성됩니다.
이렇게 반환된 객체를 인스턴스라고 합니다.
//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원 입니다.