생성자 함수

• 자바스크립트 함수는 재사용이 가능한 코드를 묶음으로 사용하는 것 외에 객체를 생성하기 위한 방법으로도 사용된다.
• new 키워드를 사용하여 함수를 호출하게 되면 return문 없이도 새로운 객체를 반환 시킨다.
• 함수에서 this를 사용하여 반환되는 객체의 초기 상태와 행위를 정의할 수 있다.
• 생성자 함수는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다.
• 함수명은 대문자로 시작한다.

💡 객체에 타입이 적용되면 해당 객체는 그 타입의 인스턴스 라고 부른다. 그래서 new 키워드로 만 들어진 객체는 해당 타입의 instance 라고 칭한다.

let user = {
  name: "Mike",
  age: 30,
};

이렇게 만드는 것을 객체 리터럴 이라고 한다. 개발을 하다보면 이렇게 비슷한 객체를 여러개 만들어야 하는 상황이 온다. 그럴 때 생성자 함수를 사용한다.

// 첫 글자는 대문자로 작성한다.
function User(name, age) {
  this.name = name;
  this.age = age;
}

let user1 = new User("Mike", 30);
let user2 = new User("Jane", 20);
let user3 = new User("Tom", 10);

console.log(user1);
console.log(user2);
console.log(user3);

// user1
// User {name: 'Mike', age: 30}
// user2
// User {name: 'Jane', age: 20}
// user3
// User {name: 'Tom', age: 10}

순식간에 비슷한 객체 3개를 만들었다. 생성자 함수는 붕어빵 틀이라고 생각하면된다. 필요한 재료들을 넣어주고 찍어준다.여기서 필요한 재료는 name과 age 이다.

📌 생성자 함수의 동작 방식

function User(name,age){
  // this = {} // (1) 

  this.name = name;
  this.age = age

  // return this; // (2)
}

new 함수명();

// new 함수명()을 실행하면 일단 빈 객체를 만들고 this에 할당합니다. (1)
// 함수 본문을 실행하면서 this에 프로퍼티들을 추가 합니다. ex) this.name
// 마지막으로 this를 반환 합니다. (2) 
// 실제로 저 두줄((1),(2))은 코드에 없습니다.
// new를 붙여 실행하는 순간 위 방식으로 알고리즘이 동작합니다. 

이렇게 객체를 만들면 일일이 객체 리터럴을 쓰는 것보다 훨씬 빠르고 일관성 있게 객체를 만들 수 있습니다. 스펙이 변경되어도 저 생성자 함수만 고치면 된다

📌 생성자 함수에 메서드를 추가해보자

function User(name, age, subject) {
  this.name = name;
  this.age = age;
  this.subject = subject;
  this.teach = function (student) {
    console.log(`${student}에게 ${this.subject}를 가르칩니다`);
  };
}

let user1 = new User("Mike", 30, "농구");
console.log(user1);
user1.teach("민수"); // 민수에게 농구를 가르칩니다.

• new 키워드와 함께 생성자 함수를 호출 하여 생성자 함수 블록이 실행되어도 return 없이도 새로운 객체가 반환된다.
• 새로운 객체에서 this 가 가리키는 것이 user1 변수이다 그렇기 때문에 user1.teach(”민수”)로 객체에 teach 메서드를 호출하면 민수에게 농구를 가르칩니다 라는 문구가 뜨게 되는 것이다.

📌 instanceof

instanceof 키워드는 A instanceof B 의 형식으로 사용하며 A가 B의 인스턴스가 맞는지를 판단하여 true / false를 반환한다

function User(name, age, subject) {
  this.name = name;
  this.age = age;
  this.subject = subject;
  this.teach = function (student) {
    console.log(`${student}에게 ${this.subject}를 가르칩니다`);
  };
}

let user1 = new User("Mike", 30, "농구");

// instanceof 연산자를 사용해서 user1의 객체가 User 생성자 함수의 인스턴스 여부를 확인해서 true가 나왔다.
console.log(user1 instanceof User); // true
console.log(user1 instanceof Object); // true

instanceof 연산자는 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인한다. 해당 객체가 프로토타입 체인에 존재 시 해당 프로토타입의 메소드를 상속받는다.