ES6: Classes

발생일: 2015.05.12

키워드: class, 클래스, class expression, 클래스 선언, 클래스 표현식

내용:

ES6에서는 `class` 키워드로 프로토타입 기반의 상속을 간편하게 구현할 수 있다.
아래 코드를 보면 이해할 수 있다.

// 클래스를 선언할 수 있다.
class Shape {
  // 기본적으로 클래스의 body는 strict mode 로 실행된다.

  // 생성자
  constructor(width, height) {
    this.width = width;
    this.height = height;
}

  // 멤버 메서드
  getArea() {
    return 0;
  }

  // 스태틱 메서드
  static getType() {
    return 'Shape';
  }

  // 클래스 문법으로 스태틱 멤버를 정의할 수 없다.
}


// class 또한 실제로 함수이기 때문에,
// 함수 표현식(function expression)으로도 정의할 수 있다.
// 클래스 표현식(class expression)이라고도 한다.
var Shape = class { ... }


// 클래서 선언에는 호이스팅(hoisting)이 적용되지 않는다.
new Person();
class Person {} //-> Uncaught SyntaxError: Unexpected token class


// 클래스를 중복으로 선언한 경우, 문법 에러가 발생한다.
class Shape {}
class Shape {} //-> Uncaught SyntaxError: Identifier 'Shape' has already been declared


// `extends` 키워드로 상속할 수 있다.
class Rect extends Shape {
  constructor(width, height) {
    // 부모는 `super` 키워드로 참조할 수 있다.
    super(width, height);
    ...
  }

  // 프로토타입 기반으로 동작하므로,
  // 메서드명이 동일하다면 부모의 메서드를 덮어쓴다.
  getArea() {
    return this.width * this.height;
  }

  getType() {
    // 멤버 메서드 내에서도 부모의 인스턴스를 참조할 수 있다.
    return super.getType() + ':Rect';
  }
}




카테고리

분류 전체보기 (702)
About me. (6)
Daylogs (667)
비공개 (0)
영어공부 (0)
My works - 추억 (29)