Class와 super

JavaScript ES6에서 사용할 수 있게된 class와 super키워드의 사용 방법을 알아보려고 한다.

1.Class

class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화하는데 자바스크립트에서의 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다.

Class는 사실 특별한 함수이다.
Class 문법은 Class 선언과 Class 표현식 두가지의 방법이 존재한다.

1. Class 선언

class Human {
  constructor(name) {
    this.name = name;
  }
  sleep() {
    console.log('잠든다');
  }
}

위와같이 작성하면 Class 선언이다.

2. Class 표현식

let Human = class {
  constructor(name) {
    this.name = name;
  }
  sleep() {
    console.log('잠든다');
  }
}

위와같이 작성하면 Class 표현식이다.

함수선언과 함수표현식과 같은 방식이다.

2. super

super는 부모 오브젝트의 함수를 호출 할 때 사용된다.

super([arguments]); // 부모 생성자 호출
super.functionOnParent([arguments]); // 부모 메소드 호출

생성자에서 super가 쓰이면 super만 단일로 쓰이거나 this 키워드를 사용하기 전에 호출해야 한다.

위에서 생성한 클래스를 이용해 예제를 만들어 보았다.

class Student extends Human {
  constructor(name,grade){
    super(name);
    this.grade = grade;
  }
  sleep() {
    super.sleep();
    console.log('니 성적에 잠이오냐?');
  }
}

Student 라는 클래스에 Human을 상속받아 super(name)으로 Human에 있는 생성자를 호출하고, super.sleep()으로 Human의 메소드를 호출하게 된다.
(상속성과 다형성을 모두 사용하게 된다.)