[JavaScript] 클래스 심화 - 상속, 정적메서드, get, set

클래스에 대해서 너무 간단하게 쓴 것 같아서 상속과 정적메서드, get과 set에 대해 정리해보았다.

 

자바스크립트에서 상속은 extends 키워드를 이용해서 적용한다. 상속을 사용하면 기존 클래스를 다른 클래스로 확장할 수 있다. 즉, 이전에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다.

 

정적메서드는 정적 메서드는 클래스와 연결되어 있지만, 해당 클래스의 임의의 인스턴스와는 연결되어 있지 않다. 이러한 메서드에는 클래스의 객체가 입력 인수를 필요로 하지 않는다. 따라서, 클래스의 객체를 생성하지 않고 정적 메서드를 호출할 수 있다. 대표적인 예로 Math에 내장된 함수나 Number에 내장된 함수들이 있다. (Number.isNaN 등)

 

getter와 setter는 그 뜻에서 알 수 있듯이, 값을 얻거나 할당하는 데 사용한다.

 

instanceof는 상속해서 만든 자식 객체가 특정 클래스가 맞는지 확인하는 연산자이다. true와 false를 반환한다. 하지만 어떤 클래스에서 만들어졌는지 정확하게 확인할 수 없다는 단점이 있다. 이를 보완하기 위해 constructor를 사용할 수 있다.

 

대략 요약했으니, 아래 코드를 살펴보며 이해해보자.

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  get fullName() {
    return `${this.firstName} ${this.lastName}`
}
  set fullName(value) {
    console.log(value); // Manuel Neuer
    [this.firstName, this.lastName] = value.split(' ');
}
  static isUser(user) {
    if(user.firstName && user.lastName) {
      return true;
    } return false;
  }
}
const munich = new User('Joshua', 'Kimmich');
console.log(munich.fullName); // Joshua Kimmich
munich.firstName = '응애';
console.log(munich.fullName); // 응애 Kimmich

munich.fullName = 'Manuel Neuer'
console.log(munich); // User {firstName: 'Manuel', lastName: 'Neuer'}
console.log(User.isUser(munich)); // true

// getter(값을 얻는 데 사용), setter(값을 지정하는 데 사용)
// get : 메서드에 붙여서 사용
// set : 할당연산자를 통해 값을 지정해줄 때 사용

//정적메서드 (static method)
//prototype이 붙어있으면 prototype 메서드(인스턴스에서 사용), 붙어 있지 않으면 정적메서드라고 함

// 정적메서드를 만들고 싶으면 메서드 앞에 static을 붙여주면 됨 (인스턴스에선 사용 불가)


// ===================================================================================

// 상속

class Vehicle {
  constructor(acceleration = 1) {
    this.speed = 0;
    this.acceleration = acceleration;
  }
  accelerate() {
    this.speed += acceleration;
  }
  decelerate() {
    if (this.speed <=0) {
      console.log('정지');
      return
    }
    this.speed -= this.acceleration;
  }
}

class Bicycle extends Vehicle {
  constructor(price = 100, acceleration) {
    super(acceleration); // 상속을 받으면 super를 꼭 호출해야함
    this.price = price;
    this.wheel = 2;
  }
}

const bi = new Bicycle(300, 10);
console.log(bi); // Bicycle {speed: 0, acceleration: 10, price: 300, wheel: 2}, [[Prototype]] : Vehicle

class Car extends Bicycle {
  constructor(license, price, acceleration) {
    super(price, acceleration);
    this.license = license;
    this.wheel = 4;
  }
  accelerate() {
    if(!this.license) {
    console.error('무면허!');
    return
  }
  this.speed += this.acceleration;
  console.log('가속', this.speed);
}
}
const carA = new Car(true, 7000, 10);
const carB = new Car(false, 4000, 6);
carA.accelerate(); // 가속 10
carA.accelerate(); // 가속 20
carB.accelerate(); // 무면허!
console.log(carA); // Car {speed: 20, acceleration: 10, price: 7000, wheel: 4, license: true}, [[prototype]] : Bicycle
console.log(carB); // Car {speed: 0, acceleration: 6, price: 4000, wheel: 4, license: false}, [[prototype]] : Bicycle

class Boat extends Vehicle {
  constructor(price,acceleration) {
    super(acceleration);
    this.price = price;
    this.motor = 1;
  }
}

const boat = new Boat(10000, 30);
console.log(boat); // Boat {speed: 0, acceleration: 30, price: 10000, motor: 1}, [[prototype]] : Vehicle

//instance of : 어떤 클래스에서 만들어진 인스턴스임을 확인하는 메서드

class A {
  constructor() {
}
}
class B extends A {
  constructor() {
    super();
  }
}
class C extends B {
  constructor() {
    super();
  }
}

const a = new A();
const b = new B();
const c = new C();

console.log(a instanceof A); // true
console.log(a instanceof B); // false
console.log(c instanceof B); // true
console.log(b instanceof B); // true

//constructor === 어떤 클래스에서 만들어졌는지 확인할 수 있음

const fruit = ['apple', 'orange']
console.log(fruit.constructor === Array); //true