[JAVASCRIPT.INFO] 4.5 new 연산자와 생성자 함수

4.5 new 연산자와 생성자 함수

생성자 함수

1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 new연산자를 붙여 실행한다.

function User(name) {
  // this = {}; (빈 객체가 암시적으로 만들어짐)
  this.name = name;
  this.isAdmin = false;
  // return this; (this가 암시적으로 반환됨)
}
let user = new User("보라");
alert(user.name);    // 보라
alert(user.isAdmin);    // false

new User(...)를 써서 함수를 실행하면 아래와 같이 작동한다.

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

new function(){...}

재사용할 필요가 없는 복잡한 객체를 만들어야 할 때, 아래와 같이 코드를 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다.

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

생성자 함수가 익명 함수이기 때문에 어디에도 저장되지 않는다. 처음 만들 때부터 한번만 호출할 목적으로 만들었기 때문에 재사용이 불가능하고, 익명 생성자 함수를 이용하면 재사용은 막으면서 코드를 캡슐화할 수 있다.

new.target과 생성자 함수

자주 쓰이지 않음

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

일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환한다. 반면 new와 함께 호출한 경우엔 new.target은 함수 자체를 반환한다.

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

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

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

아래와 같이 활용 가능하다.

function User(name) {
  if(!new.target){
    return new User(name);
  }
  this.name = name;
}

let bora = User("보라");     // 'new User'를 쓴 것처럼 바꿔준다.
alert(bora.name);

하지만 new를 생략하면 새로운 객체를 생성하는지 모를 수 있기 때문에 new를 생략해서 객체를 만드는 것은 지양해야 한다.

생성자와 retrun문

생성자 함수에서 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 보통 retrun문이 없다.(명시적으로 쓸 필요가 없음)

return문이 있는 경우

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

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다. this에 프로퍼티뿐만 아니라 메서드를 더하는 것도 가능하다.

function User(name) {
  this.name = name;
  this.sayHi = function() {
    alert("제 이름은 " + this.name + "입니다.");
  };
}

let bora = new User("이보라");
bora.sayHi(); // 제 이름은 이보라입니다.