변수타입 변수명 = new 생성자 함수()
function FishBread(flavor, price) {
this.flavor = flavor;
this.price = price;
this.base = "flour";
}
let bread_1 = new FishBread("cream", 1200);
console.log(bread_1);
console.log(bread_1.flavor);
function User(name) {
console.log(new.target);
this.name = name;
}
let result_1 = User("john");
console.log(result_1); // output : undefined, undefined
let result_2 = new User("john");
console.log(result_2) // output : [Function: User], User { name : 'john' }
위에 코드에서 result_1은 new 연산자를 통해 만들지 않았다. 따라서 new.target으로 확인했을 때 User함수로 result_1을 생성했지만 new 연산자를 사용하지 않았기 때문에 undefined가 출력이 되고 두번째 로그도 result_1은 undefined가 된다.
result_2는 new 연산자로 User라는 함수를 통해 객체를 생성하였기 때문에 첫번째 log에 [Function : User] 로 출력이 되고 두번째 log에는 result_2에 객체가 출력이 되는 것을 확인할 수 있다.
이처럼 new.target은 new 연산자를 사용하여 객체를 생성했을 때 어떤 함수를 사용했는지 즉, 타겟이 누군지를 출력하는 것이다.
new 생성자를 사용하지 않았지만 재귀함수를 사용하여 new 연산자로 다시 만들게 하는 방법은 아래와 같다.
function User(name) {
if (!new.target) {
return new User(name);
}
console.log(new.target);
this.name = name;
}
let result_1 = User("john");
console.log(result_1);
let result_2 = new User("john");
console.log(result_2);
1) 번거로움 해결
2) 생성자 하나로 여러 객체 생성 가능
var info1 = {name : "홍길원", age : 30}
var info2 = {name : "홍길원", age : 30}
var info3 = {name : "홍길원", age : 30}
위에 코드는 객체를 생성하는 코드이다. 객체를 3개를 생성한다고 했을 때 객체의 property가 name과 age가 반복적으로 사용을 하고 있다. 이렇게 할 경우 지금은 3개만 사용해서 상관없지만 더 많은 객체를 생성한다고 가정하면 굉장히 번거롭다 따라서, 생성자 함수를 사용하여 편리하게 사용할 수 있다.
function Info(name, age){
this.name = name;
this.age = age;
}
var info1 = new Info("홍길원", 30);
var info2 = new Info("홍길투", 20);
var info3 = new Info("홍길삼", 10);
이렇게 생성자 함수를 사용하여 중복된 코드를 사용하지 않고 생성할 수 있고, 번거롭게 하나하나 입력하여 객체를 생성하지 않아도 된다.