[자바스크립트] class 클래스 선언과 사용, extends 와 super

JavaScript Class의 특징들은 다음과 같다

1.  기존 라이브러리에 class를 가져다가 쓰는경우가 대다수 이다

2. class를 사용하면 재사용이 용이하다(선언만 하면 같은걸 여러번 생성이 가능)

3. 클래스는 더 좋은 객체 처럼 생겼다

 

 

 

 

 

 

class 선언

---

 

선언은 세가지 방법이 있다

class MySelf {
  constructor(age, height) {
    this.age = age;
    this.height = height;
  }
}

바로 클래스를 선언

const MySelf = class MySelf {
  constructor(age, height) {
    this.age = age;
    this.height = height;
  }
}

변수에 클래스를 선언

const MySelf = class {
  constructor(age, height) {
    this.age = age;
    this.height = height;
  }
}

변수에 클래스 이름이 없이 선언

 

선언할 때 constructor 메소드는 class 로 생성된 객체를 생성하고 초기화하기 위한 메소드 

constructor 메소드는 클래스 안에 꼭 한 개

class안에 this는 class 전체를 가르키고 있다

 

class 사용

---

 

1~8줄 : Car클래스는 생성할때 color, weight, speed, engine를 받는다

9,10줄 : justCar는 아무것도 받지 않고 생성하고 kia는 보기와 같이 설정한다

12,13줄 : console.log로 아무것도 설정하지 않고 생성했던 justCar와 kia를 콘솔에 출력해 결과를 확인한다

 

justCar는 생성할때 아무것도 설정해주지 않아서 undefined만 있는 클래스가 생성되었고,

kia는 생성할때 설정해줬던 값들이 들어가있다

 

 

1~11줄 : 기존 Car 클래스에서 speed를 10씩 올리는 speedUp함수를 만든다

13,14줄 : kia를 생성해서 바로 출력

16~19줄 : speedUp함수를 세번 실행 후 출력

 

스피드가 0이었다가 30이되는 것을 확인 할 수 있다

extends 클래스 상속

---

1~8줄 : 클래스 선언

10~15,17~22줄 : 클래스 Car를 베이스로 extends하여 DieselCar와 GasolineCar를 선언

24,25줄 : DieselCar와 GasolineCar를 기반으로 하는 kia차를 생성

 

GasolineCar 와 DieselCar 는 Car를 상속 받을때 engine을 초기화해서 받았다

콘솔 창에서 kia 디젤차랑 가솔린차를 출력하면 엔진을 따로 안해도 초기화 되어있다

 

참고영상 : https://academy.nomadcoders.co

참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes