[JavaScript] 상속 2 : Class

* Class 

앞서 Obejct.create() 를 이용한 상속을 알아보았다. 하지만 ES6가 나오면서 class를 사용해 훨씬 간단하게 상속을 구현할 수 있게 되었다. 아래 코드는 이전 포스팅에서 Object.create()를 이용해 구현한 상속을 ES6 문법의 class 를 사용해 구현한 것이다.

// Class
class Shape { // class 명
  constructor(){ // 기존 생성자함수 부분
    this.x = 0;
    this.y = 0;
  }
  move(x,y){ // 기존 prototype 객체에 정의하 메소드 부분
    this.x += x;
    this.y += y;
    console.info('Shape moved.');
  }
}

class Rectangle extends Shape {
  constructor(){
    super() // 상위클래스 생성자함수 실행으로 상위클래스 프로퍼티 사용 가능
    this.z = 0; // 내가 추가하고 싶은 부분
  }
  move(x,y){ // 기존 .move 메소드에 override
    super.move() // super를 이용한 상위클래스의 메소드 호출 
    console.info('Shape moved faster.'); // 내가 추가하고싶은 부분
  } 
}

 

코드를 살펴보자. 먼저 class 키워드 뒤에 class 명을 선언하다. 하위 클래스가 상위 클래스의 속성/메소드를 상속하고 싶을 땐 class 선언 시 뒤에 extends 를 사용하면 된다. Object.create()를 이용한 방식에서는 프로토타입과 컨스트럭터 프로퍼티를 수동으로 조정해야 하는 불편함이 있었으나, class를 사용하면 간단하게 해결되는 것을 볼 수 있다. 

 

이어진 중괄호에 세부 내용을 넣는데, 크게 두 부분으로 나뉘어져 있음을 알 수 있다. 

 

- 생성자함수 부분(constructor) : 이전 방식에서 생성자함수에 해당하는 부분이다. 안에는 생성자함수의 프로퍼티들이 담겨 있다. 

 **  super :  super() 는 부모 클래스의 생성자를 호출해 그 프로퍼티들을 세팅해준다. 따라서 하위 클래스에서는 상위 클래스가 가진 프로퍼티들을 굳이 따로 넣어줄 필요가 없다. 상위 클래스에는 없고, 하위 클래스에만 가지고 있는 프로퍼티만 추가로 넣어주면 된다. 

 

- 메소드 부분  : constructor 아래 부분에는 이전 방식에서 prototype 객체에 일일이 추가했던 메소드들이 나열되어 있다. 

** super : 위 코드를 보면 하위 클래스에 .move 메소드가 정의되어 있다. 즉, override 된 것이다.  하지만 여전히 상위 클래스의 .move 메소드를 가져와 하위 클래스에서 쓰고 싶은 부분을 추가하는 방식으로 사용할 수 있다면 더 효율적이지 않을까? super를 통해 그와 같이 사용할 수 있다. 메소드 앞에 super를 붙여 실행하면 해당 부분은 부모의 메소드처럼 사용할 수 있다. 

 

 

* Refrence : MDN, 생활코딩 (https://www.opentutorials.org/module/4047/24620),