위 코드를 살펴보자면 Vehicle 라는 클래스 라는 개념이 만들어져 있다.
그리고 내부에는 contructor 라는 함수를 사용해서 바깥쪽에서 인수로는 name 과 wheel 라는 각각의 매개변수로 받아서
this.name 과 this.wheel 부분의 각각 할당하고있다.
그럼인단 Vehicle 통해서 하나의 인스턴스를 생성해보자!
콘솔창에 Vehicle 이라는 하나의 객체데이터 가 만들어진걸 확인할수있다.
속성으로 는 name 은 운송수단이고 wheel 은 2개라는걸 확인할수있는 데이터가 만들어져있다.
일단 Vehicle 같은경우에는 말그대로 운송수단이다.
그런데 운송수단에 대한 기본적인 정보를 Bycycle 이라는 새로운 클래스로 확장 혹은 상속을 해서 기본적인 내용을
내부에서 사용을 하겠다라는 의미를 가지고있다. 그러면 Bycycle 이라는 새로운 클래스 내부에서 어떤개념을 추가적으로
사용이 가능하냐? super 라는 함수를 사용할수가있음
클래스를 사용한다는 것은 미리 만들어진 어떠한 정보에 추가적을 살을 붙여가면서 새로운 기능들을 확장이라는 개념으로관리를 해줄수가 있다. 이러한 패턴들은 리액트에서 많이 사용이 된다!!
기존의 내용을 가지고 와서 추가적인 내용 일부만 작성을 해서 운송수단에서 자동차로 한단계 발전 할수있는 개념으로
확장 과 혹은 상속 이라는 개념을 사용할 수 가있다.
정리를 해보자면 대표적으로 Vehicle 이라는 운송수단을 의미하는 클래스를 위쪽에서 만들었다.
그리고 기본적인 로직만 추가를 해서 정리를 했는데 그것을 Car라는 클래스를 새로 만들때 이미 만들어져있는 Vehicle 이라는 기능이 있으니까 그것을 가지고 와서 extends 라는 키워드와 함께 작성을 해주면 위쪽에서 정의되어져 있는 기능을
Car 라는 클래스 내부에서 따로 작성하지 않고도 사용을 할수가 있다. 그때 super라는 함수를 실행해서 super 가 Vehicle이라는 클래스를 실행될수 있게 Vehicle 이 요구하는 인수들을 Car라는 클래스가 실행되는 부분에서 name, wheel , license 로 받아서 그중에 name 을 super에 첫번째 인수로 wheel 을 super의 두번째 인수로 담아서 Vehicle이라는 클래스를 실행한다.
'자바스크립트' 카테고리의 다른 글
가져오기,내보내기 (0) | 2022.08.27 |
---|---|
문자 (0) | 2022.08.26 |
ES6 Classes (0) | 2022.08.26 |
this (0) | 2022.08.26 |
생성자 함수(prototype) (0) | 2022.08.26 |