4-5

생성자 함수

• 함수 첫글자는 대문자
• new 연산자 사용하기

function User(name) {		// 생성자 함수 
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");	// new 연산자로 user라는 객체 생성

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

실행 프로세스
1. new User("보라"); 실행 시, 빈 객체가 생성된다.
2. 생성된 빈 객체가 this 에 할당된다.
3. 생성자 함수 User 본문이 실행됨에 따라 빈 객체this에 프로퍼티가 추가된다.
4. 생성자 함수가 끝나면, 완성된 this 객체가 반환되며, 변수 user에 담긴다.

따라서 생성자 함수의 숨겨진 로직을 뜯어보면 다음과 같다.

fucntion 함수명(인자) {
  // this = {};			-> 빈 객체 생성해서 this에 할당
  
  this.키1 = 값1;		// -> 객체에 property 추가 
  this.키2 = 인자;
  
  // return this 		-> 완성된 객체를 반환 

• 생성자는 재사용할 수 있는 객체 생성 코드를 만들기 위해 존재한다.

• 모든 함수는 생성자가 될 수 있다. 호출 시 앞에 new 만 붙인다면 생성자 함수의 프로세스로 실행된다.

익명 생성자 함수

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

  // 사용자 객체를 만들기 위한 여러 코드.
};

• 위와 같이 익명의 생성자 함수를 생성하면 함수는 저장되지 않는다.
• 따라서 생성자의 일반적인 용도인 '재사용'이 불가하다.
• 하지만, 복잡한 객체 생성 코드를 묶어주는 역할을 할 수 있기 때문에,
• 재사용은 하지 않지만, 복잡한 객체 생성 코드를 쓸 경우에 사용할 수 있다.

new.target

• 함수가 new 와 함께 호출되었는지 여부를 알 수 있음
  • 일반적 호출 시 : undefined 반환
  • new 호출 시 : 함수 자체 반환

이를 활용해서, 생성 코드 함수임에도 불구하고 new를 빠트리고 호출을 하는 경우를 대비할 수도 있다.

function User(name) {
  if (!new.target) { // new 없이 호출해도
    return new User(name); // new를 붙여줍니다.
  }

  this.name = name;
}

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

return문

• 생성자 함수에 return문이 잘 없는 이유는, 내부에서 this를 완성하는 코드만 구현하면 완성된 this가 자동으로 반환되기 때문이다.
• 하지만 return문을 구현할 경우
  • return 객체 : this 대신 객체를 반환한다.
  • return 원시형 : 무시하고 this를 반환한다.

예시 :

function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // this가 아닌 새로운 객체 반환
}

alert( new BigUser().name );  // 원숭이가 아닌!!! 고릴라 출력

생성자 내 메서드

생성자 함수 내부에서는
객체 this에 일반적인 property를 추가해줄 수도 있고,
method를 추가해줄 수도 있다!

예시 :

function User(name) {
  this.name = name;			// property 추가
  this.sayHi = function() {	// property를 활용한 method 추가
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

• "이보라" 인자와 함께 생성자 함수가 실행되면
• 빈 객체 this가 생성되어 name : "이보라" 가 추가되고,
• this에 sayHi : function() { ~ } 도 추가된다.
• 완성된 this는 변수 bora에 할당된다.
• bora.sayHi(); 실행 시, bora가 참조하는 객체의 sayHi 메소드가 실행되고, 그 내부에서 현재 객체의 name 값인 "이보라" 가 대입되어 출력된다.

---

🙉 오늘의 TL;DR

• 생성자 함수명은 대문자로 시작하고, new로 호출해야 한다.
• 생성자 함수가 실행되면 빈 객체가 생성되어 this로 할당된다.
• 생성자 함수에서는 별도의 객체를 return할 경우를 제외하면 this가 자동으로 반환된다.