ES6 의 class 및 super 키워드에 대해

 

지난 러닝로그에 이어서, ES6의 최신 문법을 활용한 객체를 생성해 보겠습니다.

아래와 같이 코드를 구성했다면, 이것을 class를 이용해서 똑같이(더 좋게) 구현할 수 있습니다.

 

그 전에, 간단히 코드를 설명하고 넘어가겠습니다

Human 생성자 함수와, Student생성자 함수가 있습니다. 

Human은 프로토타입으로 sleep 메소드를 가지고 있고, Student함수는 learn메소드를 가지고 있습니다.

 

Human을 통해 스티브 객체를 만들었고, Student함수를 통해 존 객체를 만들었습니다.

 

두 개의 생성자 함수이지만, Student는 Human을 상속받게 하려고 합니다.

또한, 존에게서 sleep 메소드를 활용하고 싶습니다.

 

그럼 해야 할 거는 2가지입니다.

 

1. Student.prototype = Object.create(Human.prototype)

2. Student 생성자 함수 안에서, Human.apply(this, arguments)

 

를 작성하는 것입니다. (이유는 지난 러닝 로그 시간에 설명했습니다. 참고 해 주세요)

 

이렇게 되면, 코드가 상당히 복잡?해지는 느낌입니다 

 

 

이제 이 코드를 ES6문법 class와 super를 통해 바꿔보겠습니다

 

 

 

따란!

 

class 를 활용하여 객체를 생성하는 코드입니다.

 

class Human을 통해 Human이라는 생성자를 만들고

그 밑에서 constuctor를 줌으로써 name 이라는 매개변수를 받게 합니다.

추가할 메소드들은 그 안에 하나씩, 메소드명만 작성하여 넣어주면 됩니다.

 

Student도 똑같이 해 주면 되는데,

이 둘을 잇는 키워드가 있습니다.

그것이 extends입니다

사진에 보시면 Student 생성자 함수 라인에서 위치해 있습니다.

 

 

class Student {

  constructor (name) {

    super(name) ;

  }

.

.

.

super의 뜻은 

상속해 주는 Human의 this 실행 컨텍스트를 가져오는 것을 의미합니다.

하지만, 자식의 constructor 와 부모의 constructor가 동일하다면, 자식의 constructor는 생략이 가능합니다.