생성자 함수: 객체를 만드는 함수
생성자 함수는 이렇게 생겼다.
일반적인 함수와 구분하기 위해 생성자 함수의 이름은 대문자로 시작한다.
function 함수이름(property) {
this.property = property;
}
Ex. function Test(name, price) {
this.name = name;
this.price = price;
}
이렇게 생성자 함수를 만든 뒤 new 키워드와 함께 사용해 객체를 생성한다.
function 함수이름(property) {
this.property = property;
}
let 객체이름 = new 함수이름(key, value);
------------------------------------------
Ex. function Test(name, price){
this.name = name;
this.price = price;
}
let snack = new Test("꼬깔콘", 1000);
new 키워드란?
new 키워드를 앞에 붙이지 않으면 생성자 함수가 아닌 일반 함수 호출이 된다. 보통의 함수는 return(반환값)을 해야 하는데 new가 없는 상태에서 return도 없다면 일반함수에 return값이 없는 상태이므로 값이 들어가지 않는다.
이렇게 만든 객체는 점 표기법으로 property 값을 읽거나 추가하거나 삭제할 수 있다.
user.name // jieun
user.age // 24
user.job = "Dev";
delete user.hobby;
생성자 함수로 만든 객체는 프로토타입이라는 공간에 메소드를 지정해 모든 객체가 공유하도록 만들 수 있다.
대부분의 사람들은 미리 class를 만들어둔다. 하지만 class는 한 번 만들면 변경하지 못한다. 이런 때를 위해 자바스크립트는 프로토타입을 갖고 있다. 프로토타입은 원형이란 뜻인데, 이미 생성한 class를 변경할 수는 없으니 원형을 마치 VR처럼 띄워서 프로토타입을 변경하는 것이다.
해당 문서의 스코프 내에서 실제로 클래스가 변경된 것처럼 사용할 수 있게 만든 것이다.
// 생성자 함수
function User(name, age) {
this.name = name;
this.age = age;
}
// 프로토타입에 메소드를 선언
User.prototype.print = funtion(){
console.log(`${user.name}의 나이는 ${user.age}입니다. `);
};
// 객체를 생성
let user = new User("지은", 24);
메소드 호출
user.print();