오늘은 간단하게 constructor 흔히 생성자 함수라고 부르는 것에 대해서 간단하게 정리해 보려고 한다.
우리가 객체 리터럴을 많이 사용해야 할 때가 있다.
[객체 리터럴 예시]
let user = {
name: 'eminem',
age: '19',
job: 'singer'
}이러한 객체리터럴은 회원정보, 상품 등을 만들 때 사용되어지는데, 한 두개가 아니다 보니 일일이 다 이렇게 만들려고 하면 힘들다.
그렇기 때문에 생성자함수(constructor)라는 것을 사용하게 된다
실제로 전공자들은 어떻게 배우는지 모르겠지만, 이를 붕어빵 틀 정도로 비유한다고 들었다.
앞서 예시처럼 name, age, job과 같은 필요한 재료를 넣어넣고, 찍기만 하면 된다는 것이다!
그렇다면 생성자함수는 어떤 모습을 가질까?
function User(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
let user1 = new User('eminem', 19, 'singer');
let user2 = new User('zac afron', 30, 'actor');
let user3 = new User('Obama', 60, 'president');생성자 함수는 이러한 모습을 가지는데, 몇 가지 규칙이 있다.
1. 보통 첫 글자는 대문자로 작성한다
=> 그 이유는 어떤 함수라도 new를 붙이면 같은 알고리즘이 작동하므로 구분하기 위함이다
2. new 연산자를 사용하여 함수를 호출한다
=> new를 붙이지 않으면? undefined가 반환된다.
여기서 this 는 무엇일까?
this는 User()로 부터 생성되는 Object 즉, instance이다.
그렇다면 instance는 무엇일까?
바로 new 연산자를 사용해서 만들어낸 각각의 개별객체(여기서는 user1, user2, user3)를 말한다!
이러한 생성자함수를 만들어서 사용하는 장점이 무엇이있을까?
바로, 객체리터럴보다 빠르고 일관성있게 만들수 있다는 장점을 가지고 있다!
앞서 new를 붙이지 않으면 undefiend가 반환된다고 했는데, 그 이유가 무엇일까?
여기서는 동작 원리에 대해서 간단하게 살펴보려고한다.
- new 함수를 실행시키게 되면 빈 객체가 만들어지고 this에 할당한다
function User(name, age, job) {
this = {} // 눈에 보이지 않지만 알고리즘이 이렇게 작동한다
this.name;
this.age:
this.job;
}- 마지막으로 this를 반환한다
function User(name, age, job) {
this = {}
this.name;
this.age:
this.job;
return this // 눈에 보이지 않지만 new를 사용하면 작동한다
}
new User();그렇기 때문에 new를 붙이지 않으면 return this가 실행되지 않아서 undefined가 반환되는 것이다
.jpg)