[🌳 Javascript] 생성자 함수, 클래스

생성자 함수

객체 리터럴 방식을 사용해 객체를 생성할 수 있다.

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('Kitty',20)
let user3  = new User('John',40)
// new 연산자를 사용해 호출하면 된다.

생성자 함수는 쉽게 생각해 붕어빵 틀이라고 생각하면 된다. 원하는 재료(name,age)를 넣고 비슷한 모양의 객체(User)를 생성할 수 있다.

위 예제에서 new 연산자를 사용함으로써, 아래와 같은 알고리즘 흐름으로 객체가 생성된다고 생각하면 된다.

function User(name,age){ 
  // this = {}  <-빈 객체 생성
  this.name = name;
  this.age = age;
  // 원하는 재료 넣어지고
  // return this; <-붕어빵 돌려받음
}

만약에 new 를 붙여주지 않고 let user2= User('Kitty',20) 라고만 실행한다면
위 생성자 함수 실행에서 따로 return하는 값은 없으니 undefined가 출력될 것이다.

클래스

우리가 위에서 사용해본 생성자 함수는 아래와 같다.

function User(name,age){ 
  this.name = name;
  this.age = age;
  this.showName = function(){
    console.log(this.name)
  }
}

const mike = new User('mike',30)

이제 새롭게 등장한 클래스 함수를 살펴보자.

class User2{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name);
  }
}

const tom = new User2('tom',23)

위에서 보다시피 class 라는 키워드를 사용하며, 내부에는 constructor라는 메소드가 사용된다.

constructor는 객체를 만들어주는 생성자 method 이다. 객체를 초기화하기 위한 값을 constructor 내부에 사용하고, 생성자 함수때와 마찬가지로 new 연산자를 통해 호출하면 된다.

그렇다면 일반 생성자 함수와 class 의 차이는 무엇일까?
그 차이를 알기 위해 이 둘로 만든 객체를 각각 호출해보자.

tom은 prototype 내부에 showName이 들어가고, mike는 객체 내부에 showName이 존재한다.
또한 tom은 class 이므로 new 키워드 없이 호출하면 에러가 난다.(mike는 에러는 안남)

for in 문을 사용해보면 prototype에 포함된 property를 다 보여주고, 객체만 가진 property를 판별하기 위해서 hasOwnProperty 를 사용해야 했다. class의 메소드는 for in 문에서 제외된다.

상속

extends 키워드를 사용해 구현한다.