class 방식, extends, constructor

객체 선언 방식 중 ES6부터 추가되어 권장되고 있는 class 방식! (OOP)

객체 리터럴과 클래스 모두 익혀두는 것이 좋다. 

클래스가 권장되긴 하지만 익숙하다는 이유 등으로 리터럴 방식도 많이 사용하기 때문!

 

참고 - 객체선언방식

1. 리터럴 방식

2. 클래스 방식

3. 생성자 방식 new Object() << 권장하지 않음

4. 함수 방식 << 권장하지 않음

 

기본적으로 선언하는 방법은

class Name {
    constructor() {
    	this.name = 'asha'
    }
    
    say() {
    	console.log('hello')
    }
}

const myName = new Name()
console.log(myName)

class 이름 {}

그리고 중괄호 안에 써내려 가는 것인데 contructor() 안에 속성을 적어줘야했지만

ES2022에서 contructor없이 그냥 선언하면 되는 형태로 바뀌었다.

하지만 생성자로부터 매개변수를 사용해야 할 때는 여전히 constructor 함수를 사용해야한다.

참고로 ES2022에서 private 속성이 추가됐지만 그건 다음에 정리하는 걸루..

 

클래스 방식 예제

1. 비행기 클래스(Aircraft)와 전투기 클래스(FighterAircraft)를 생성합니다.
2. 전투기 클래스는 비행기 클래스를 상속합니다.
3. 비행키 클래스는 이륙여부를 확인하는 속성 (isTakeOff)와 이륙 메서드(takeOff)를 가지고 있습니다.
4. 전투기 클래스는 미사일 발사(fire) 메서드를 가지고 있습니다. 단, 이륙을 한 후 발사할 수 있습니다.
5. 전투기 객체를 생성하고 미사일 발사를 할 수 있도록 코드를 작성합니다.

이 예제에 대해 다뤄볼 건데

class Aircraft {
  isTakeOff = false;

  takeOff () {
    this.isTakeOff = true;
    console.log('이륙 완료!')
    return true
  }
}

class FighterAircraft extends Aircraft {
  fire() {
    if(!this.isTakeOff) {
      console.log('이륙 후 발사 가능')
      return false
    }
    
    console.log('미사일 발사')
    return true
  }
}

const myCraft = new FighterAircraft()
myCraft.fire()
myCraft.takeOff()
myCraft.fire()

constructor 없이 바로 isTakeOff 속성을 선언해줬고

그 아래 takeOff 메서드에 isTakeOff를 true로 만들어주며 이륙 완료 메세지를 띄워준다.

그 후 비행기를 상속하는 전투기 클래스를 생성해서 이륙 했으면 미사일을 발사한다.

처음부터 fire()를 호출하면 이륙 전이기 때문에 이륙 후 발사 가능 메세지가 뜬다.

그래서 takeOff를 호출해서 이륙 시켜주고 다시 fire를 호출하면 미사일 발사 완료!

 

간단하지만 class를 어떻게 사용하는지 기본적인 틀을 알 수 있는 예제다.