[모던 JavaScript] 4.5 new 연산자와 생성자 함수

생성자 함수

- new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됨

 

1. 함수 이름의 첫 글자는 대문자로 시작함

2. 반드시 'new' 연산자를 붙여 실행함

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) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

 

 

 

- 재사용할 필요가 없는 복잡한 객체를 만들어야 할 때

- 아래 생성자 함수는 익명 함수이기 때문에 어디에도 저장되지 않음

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

 

 

 

new.target과 생성자 함수

- new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있음

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

// 'new' 없이 호출함
User(); // undefined

// 'new'를 붙여 호출함
new User(); // function User { ... }

 

 

 

생성자와 return문

- 생성자 함수엔 보통 return문이 없음

- 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없음

- 만약 return 문이 있다면

1. 객체를 return 한다면 this 대신 객체가 반환

2. 원시형을 return 한다면 return문이 무시됨