[JavaScript] 34. 생성자

* 생성자 함수

- 유사한 객체를 다중으로 생성할 때 사용되는 함수 (타 언어의 class 개념과 유사)

- 일반적으로 생성자 함수의 첫 글자는 대문자로 시작

- 생성자 함수로 객체 생성 시 키워드 new를 이용

// 붕어빵 틀 (생성자 함수)
function FishBread(flavor, price) {
  this.flavor = flavor;
  this.price = price;
  this.base = "flour";
}

// 붕어빵 틀로 찍어낸 붕어빵들 (객체들)
let bread_1 = new FishBread("redbean", 1000);
let bread_2 = new FishBread("cream", 1200);
let bread_3 = new FishBread("pizza", 1500);

console.log(bread_1);
// output: FishBread { flavor: 'redbean', price: 1000, base: 'flour' }
console.log(bread_2);
// output: FishBread { flavor: 'cream', price: 1200, base: 'flour' }
console.log(bread_3);
// output: FishBread { flavor: 'pizza', price: 1500, base: 'flour' }

 

* new.target

- new.target 속성(property)을 사용하여 키워드 new로 객체를 생성했는지 여부 확인 가능

// 붕어빵 틀 (생성자 함수)
function User(name) {
  console.log(new.target);
  this.name = name;
}

// 키워드 new를 사용하지 않음 (new.target은 undefined를 반환)
let result_1 = User("John");
console.log(result_1);
/* output:
undefined
undefined
*/

// 키워드 new를 사용 (new.target은 이 객체를 생성할 때 사용된 생성자 함수를 반환)
let result_2 = new User("John");
console.log(result_2);
/* output: 
[Function: User]
User { name: 'John' }
*/

- 혹시나 키워드 new를 깜빡했더라도 제대로 객체가 생성되도록 하려면..?

// 붕어빵 틀 (생성자 함수)
function User(name) {
  if (!new.target) {
    // new.target이 undefined일 경우.
    // 즉, 키워드 new를 사용하지 않고 객체를 생성할 경우 키워드 new를 붙여줌
    return new User(name);
  }
  this.name = name;
}

// 키워드 new를 사용하지 않음 (new.target은 undefined를 반환)
// 그러나 생성자 함수 내에서 키워드 new를 붙여 제대로 객체를 만들어줌
let result_1 = User("John");
console.log(result_1);
// output: User { name: 'John' }

// 키워드 new를 사용
let result_2 = new User("John");
console.log(result_2);
// output: User { name: 'John' }