ES6 class와 super

ES6 - Class

자바스크립트는 다른 언어와는 다르게 class라는 개념이 없다.

그래서 prototype의 상속을 통해 class의 인스턴스들을 구현했었다.

그런데 ES6 이후 Class라는 문법을 새로 등장하였고 과거 사용하던 Pseudoclassical보다 더욱 단순하고

명확하게 객체를 생성하고 상속을 다룰 수 있게 되었다.

※단지 문법을 통해서 비슷하게 구현한 것이지 class라는 개념이 생긴 것은 아니다.

 

 

Pseudoclassical과의 비교

우선 기존 방식인 Pseudoclasssical 방식으로 간단한 생성자 함수와 인스턴스객체를 만들고 비교해보려고 한다.

SmartPhone이라는 생성자 함수를 만들고, iphone이라는 인스턴스객체를 만들었다.

이제 아래는 이것을 class문법으로 바꿔보았다.

조금 더 간결해진 느낌인데 나만 그런가...?

인스턴스를 선언할 때 new를 쓰는것은 동일하고 선언과 function대신 class와 constructor를 사용하게 된다.
그리고 method는 따로 생성자이름.prototype.메소드이름으로 하지 않고 바로 메소드 이름만으로 넣을 수 있다.

 

extends

extends키워드를 이용해서 클래스의 기능을 다른 클래스가 상속할 수 있다.

이때 상속하는 클래스는 자식클래스 주는 클래스는 부모클래스가 된다.

Samsung이라는 클래스를 만들어 extends를 사용해 클래스를 상속해 보았다.

이후 콘솔 창에서 galaxy라는 인스턴스 객체를 만들었다.

이때 galaxy에서 __proto__가 SmartPhone인 것을 확인할 수가 있고 현재 SmartPhone의 프로토타입을 사용하고 있다.

 

 

super

자식클래스는 부모클래스와 이름이 같은 메소드를 만들 수 있는데 이것을 Method Overriding이라고 한다.

그래서 자바스크립트가 호출된 객체 안에서 메서드를 바로 찾을 수 있음으로 자식 클래스의 메소드가 실행된다.

여기서 super키워드를 사용하면 자식클래스가 아닌 부모클래스의 메소드를 사용할 수 있게 된다.

sprider는 오타다....

 

위에 사진처럼 Mavel의 메소드를 사용해서 값이 Spider-man으로 출력되는 것을 볼 수가 있다.

 

 

마무리

여기까지 ES6에서 새롭게 추가된 class문법을 알아봤다.

나도 배우고 있는 수강생이기 때문에 전문가분들처럼 자세하게 분석을 할 수는 없고 간단한 개념과 사용법만을 정리하였다.

익숙해지면 과거의 4가지보다 간편하고 명확하게 사용할 수 있을 것 같다.