Javascript의 객체 지향 프로그래밍(4부)

지금쯤이면 생성자 함수와 프로토타입에 익숙하고 어떻게 작동하는지 이해할 것입니다. 이제 ES6 클래스에 대해 배울 시간입니다.

ES6 수업

클래스는 ES6 릴리스 이후 javascript에 추가되었으며 소품 및 메서드를 포함한 개체에 대한 청사진을 작성하는 새로운 방법입니다.

예시

고객 청사진을 다시 만들어 보겠습니다. 이제 대신 ES6 클래스를 사용하겠습니다.

class Customer {
  constructor(name, email, password, settings, cart) {
    this.name = name;
    this.email = email;
    this.password = password;
    this.settings = settings;
    this.cart = cart;
  }
  setSettings(newSettings) {
    this.settings = newSettings;
  }
  orderFood(food) {
    console.log(`ordering ${food}`);
  }
}

const customer = new Customer("name", "email", "password", {}, [])
c.orderFood("Pizza"); // ordering pizza

설명

이 클래스의 새 인스턴스를 만들 때 생성자 메서드 내부의 코드가 실행되고 이 경우 가져온 소품을 this 키워드에 추가하여 개체를 빌드합니다.
그러면 생성자 아래에 선언된 모든 메서드가 프로토타입에 자동으로 추가되므로 메모리 손실이나 프로토타입에 연결할 필요가 없습니다.

ES6 클래스에 대한 진실

실제로 ES6 클래스는 생성자 함수를 선언하는 멋진 구문일 뿐이며 내부적으로는 다음으로 변환됩니다.
일반 생성자 함수