class & new & constructor & 프로토타입

class

class란 ES6(2015)부터 추가된 기능 중 하나로 이를 통해 객체를 생성하는 것이 가능하다.

일반적으로 class는 생성자 함수(constructor), 프로퍼티, 메소드 등으로 이루어져 있고,

contructor 함수는 객체가 생성될 때 실행되며 객체의 프로퍼티를 초기화하는 역할을 하며,

new 연산자를 사용하여 해당 class 객체를 생성할 수 있다.

 

어떤 면에서 class는 '어떤 것'을 만들기 위한 레시피와 같은데,

갑자기 이삭토스트가 먹고 싶으니 토스트를 기준으로 설명한다.

class Toast {
  constructor(bread, egg) { // 생성자 함수
    this.bread = bread // 프로퍼티
    this.egg = egg // 프로퍼티
  }
  cook() { // 메서드
   console.log(`${this.bread}와 ${this.egg} 요리.`) 
  }
}

위와 같은 class 생성자에서,

생성자 함수는 contructor / bread, egg는 프로퍼티 / bake는 메서드라고 볼 수 있다.

 

그리고 이는 new를 사용하는 방법으로 생성하는 것이 가능하다.

// new 생성자를 활용한 새로운 객체 선언
const homil_toast = new Toast("homil", "small_egg") 

// 프로퍼티 호출
console.log(homil_toast.bread)

// 메서드 호출
homil_toast.bake()

 

여기서 constroctor와 new에 대해 설명을 추가로 해본다.

 

contructor

contructor 는 class 내에서 객체를 만들 때 호출되는 메서드로,

class 내에서 오직 하나만 정의할 수 있으며, 새로운 객체 생성 시 자동으로 호출되는 특징을 가진다.

그리고, constructor는 매개변수를 가질 수 있으며, 생성자를 호출할 때 매개변수를 전달한다. (homil, small_egg)

또한 생성된 객체는 this 키워드를 통해 접근할 수 있으며, this키워드는 생성된 객체를 참조한다. (때문에, 위 bake 메서드에서 bread와 egg에 this를 활용하여 접근함)

마지막으로, constructor는 객체의 초기 상태를 설정하거나 인스턴수 변수를 초기화하는데 사용할 수 있다고 하는데, 이 개념은 아래와 같이 이해하면 쉽다.

호밀 토스트를 만든 방식으로 식빵 토스트를 만들었다고 할 때, 각 변수는 매개변수로 전달한 변수만을 사용할 뿐, 여러 번 class Toast를 통해 변수를 생성하더라도 서로 간섭하지 않는다는 것.

 

new를 설명하기 이전에, 프로토타입에 대한 개념을 알아두면 좋아 이에 대해 먼저 설명한다.

 

프로토타입

자바스크립트에서 모든 객체는 다른 객체를 상속받는데, 이때 상속받는 객체는 프로토타입이라고 한다.

즉, 객체의 프로토타입은 해당 객체를 상속받은 다른 객체를 가리키는 내부 '참조 값'이라고 볼 수 있으며,

객체의 프로토타입은 __proto__프로퍼티에 저장된다.

위와 같은 프로토타입은 생성된 객체가 참조한 객체의 메서드와 프로퍼티를 재사용할 수 있게 되므로, 코드 중복을 줄이고 상속관계를 보다 간단하게 구현할 수 있다는 장점을 가진다.

 

new

new 연산자는 객체를 생성하는데 사용한다.

new를 사용하여 객체(인스턴스)를 생성할 때는 기존 객체와 생성된 객체 사이에 프로토타입 체인이 생성되는데,

이때 프로토타입 체인이란, 앞서 프로토타입을 설명할 때 서로의 연결을 가리키는 '연결고리'로 이해하면 쉽다.

 

new의 동작 방식에 대해 얘기하면,

1. 빈 객체를 만들고,

2. 이 객체의 _proto_ 프로퍼티(homil, small_egg)를, 참조하고 있는 class의 프로토타입 객체(this.bread, this.egg)로 설정한다.

// 이와 같은 방식으로 동작
constructor {
  this.bread = homil
  this.egg = small_egg
}

3. 이후 생성자 함수를 새로운 객체의 컨텍스트에서 호출한다. (단순히, new를 사용하여 생성된 객체가 생성자 함수 내에서 this로 참조될 수 있게끔 한다고 이해하면 쉽다.)

4. 생성된 객체를 반환한다.