[JS] 생성자 함수

 

객체 리터럴

---

let user = {
	name: 'Stella',
    age: 29,
}

 

 

생성자 함수 (Intermediate Class)

---

비슷한 객체를 여러개 만들어야 하는 상황이 올 때 쓸 수 있는게 생성자 함수이다.

생성자 함수는 붕어빵 틀이나 와플팬이라고 생각하면 된다. 필요한 재료들을 넣어주고 찍어준다.

아래 코드에서 필요한 재료는 이름과 나이, 생성되는 객체는 와플이다.

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

let user1 = new User('Stella', 20);
let user2 = new User('Kate', 25);
let user3 = new User('Andy', 32);

*생성자 함수는 첫글자를 대문자로 하는게 관례이다.

 

동작 과정

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

new 함수명();

---

function User(name, age){
	this = {} // 2) 빈 객체를 만들고 this에 할당
    
	this.name = name; // 3) 함수가 실행되면서 this에 프로퍼티를 추가
	this.age = age;
    
	return this; // 4) this를 반환
}

new 함수명(); // 1) 실행

실제로 this = {}, return this 이 두줄은 코드에 없다. new를 붙여서 실행하는 순간 해당 방식으로 알고리즘이 동작한다.

이렇게 객체를 만들면 일일이 객체 리터럴을 쓰는 것 보다 훨씬 빠르고 일관성 있게 객체를 만들 수 있다.

 

 

function Menu(name, price){
	this.name = name;
    this.price = price;
    this.showPrice = function(){
    	console.log(`${name}의 가격은 ${price}원 입니다.`);
    }
}

const menu1 = new Menu('파스타', 18000);
const menu2 = Menu('샐러드', 9000);
const menu3 = new Menu('스테이크', 50000);

console.log(menu1); // {name: '파스타', price: 18000, showPrice: f}
console.log(menu2); // undefined
console.log(menu3); // {name: '파스타', price: 18000, showPrice: f}

menu3.showPrice(); // 스테이크의 가격은 50000원 입니다.

new를 붙이지 않으면 그냥 함수가 실행된다.

Menu 함수는 리턴해주는 값이 없기 때문에 menu2는 undefined를 반환한다.