constructor(생성자 함수)

📌생성자 함수

• 생성자 함수는 객체를 찍어내는 틀
• 매개변수로 받는 값을 객체의 값 프로퍼티로 할당
• 붕어빵 틀이라고 생각하면됨

function Item (name, price) {
    this.name = name;
    this.price = price;
};

let item1 = new Item(‘bag’, 10000);
let item2 = new Item(‘shoes’, 15000);
let item3 = new Item(‘clothes’, 25000);

console.log(item1);  // { name: ‘bag’, price: 10000 }

1. 생성자 함수의 첫 글자는 대문자로 작성
2. this의 프로퍼티로 할당 해주어야함
3. 호출시 new 연산자를 붙여 호출!

📌 생성자 함수 동작 방식과 순서

function Item (name, price) {
    this = {} // 빈 객체 생성, 실제로는 적지 않아도 되는 코드
     
    this.name = name;
    this.price = price;

    return this. // 객체 반환, 실제로는 적지 않아도 되는 코드
};

let item1 = new Item(‘bag’, 10000);
let item2 = new Item(‘shoes’, 15000);
let item3 = new Item(‘clothes’, 25000);

• new 함수명()
• 생성자 함수라고 특별한게 없고 어떤 함수라도 new를 붙여 동작시키면 위 알고리즘이 동작됨

📌 생성자 함수에 메서드 추가하기

function MakeObject (name, age) {
   this.name = name;
   this.age = age;
   this.sayHello = function() {
      console.log(`${this.name}, Hi!`);
   }
}

let user1 = new MakeObject (‘Tom’, 30);

console.log(user1);  // { name: ‘Tom’, age: 30, sayHello: [Function (anonymous)] }

user1.sayHello();  // ‘Tom, Hi!’

• ${this.name}에서 this는 user1 객체가 된다

💡 ES6 문법 : Class

• 사용 문법이 조금 달라지는데 알고리즘 자체는 동일하다!

class Item {
    constructor(title, price) {
       this.title = title,
       this.price = price
    }
}

let item1 = new Item(“shoes”, 30000);

console.log(item1); // { title: “shoes”, price: 30000};

• function이 아닌 class 키워드로 생성자 함수 생성
• 이후 대괄호 안에 constructor()함수 호출
• 이후는 생성자 함수와 동일함, 매개변수를 받고 이를 this.{key}에 value로 할당

class Item {
    constructor(title, price) {
       this.title = title,
       this.price = price
       this.sayPrice = function(){
          console.log(`$가격은 {this.price} 입니다`);
       }
    }
}

let item1 = new Item(“bag”, 30000);

item1.sayPrice();

• this는 item1이 된다.