B16 : 생성자 함수와 new 연산자

목차

1. 생성자 함수

2. new.target

3. 생성자 함수의 return문

---

1. 생성자 함수와 new 연산자

객체 리터럴을 사용해서 객체를 만들 수 있지만, 유사한 객체를 여러 개 만들어야 할 때도 있다. (복수 사용자, 메뉴 내 여러 아이템 등)
그럴 때는 생성자 함수와 new 연산자를 사용한다.

 

생성자 함수와 일반 함수에 기술적 차이는 없다.

하지만 생성자 함수는 3가지 관례를 따른다.

• 함수 이름의 첫 글자는 대문자로 시작함
• new 연산자를 붙여서 호출함
• this.~~로 프로퍼티를 작성함

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

 

 new User(...)로 함수를 실행하면 다음와 같은 알고리즘이 동작한다.

1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행하고, this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환

function User(name) {
  // 1. this = {}; 빈 객체 생성
  
  // 2. 새로운 프로퍼티를 this에 추가
    this.name = name;
    this.isAdmin = false;
    
  // 3. return this;	this가 임시적으로 반환됨
}

 

 

---

2. new.target

new.target 프로퍼티로 함수가 new와 함께 호출되었는지 여부를 알 수 있다.

일반적인 방법으로 함수를 호출한다면 new.target은 undefined를 반환하지만,

new와 함께 호출한 경우, 함수 자체를 반환한다.

function User() {
  alert(new.target);
}

User();	// undefined
new User();	// function User {...}

 

---

3. 생성자 함수의 return문

생성자 함수에는 보통 return문이 없다.

반환해야하는 것들은 모두 this에 저장되고, this는 자동 반환되기 때문이다.

하지만 만약 return문을 작성한다면 아래의 간단한 규칙이 적용된다.

• 객체를 return 한다면 this 대신 객체가 반환됨
• 원시형을 return 한다면 return문이 무시됨

즉, 생성자 함수에서 return은 객체형만 반환해준다.

function BigUser() {
  this.name = "원숭이";
  return { name: "고릴라" };
}
alert( new BigUser().name );	// 고릴라

function SmallUser() {
  this.name = "원숭이";
  return; // <-- this를 반환함
}
alert( new SmallUser().name );  // 원숭이

 

 

 

 

 

참고

https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수