자바스크립트 CLASS

자바스크립트는 자바, C++ 같은 클래스 타입 언어와는 달리 프로타입(prototype) 기반의 언어다.

그래서 별도의 클래스 문법이 없었는데, es6 (ECMA 2015) 버전부터 class 문법이 추가가 되었다. 

하지만, 프로토타입에서 클래스타입으로 언어 자체가 바뀐 것이 아니라 문법적으로 지원하는 것이라고 한다. (언어 내부가 클래스 타입으로 재설계 된 것이 아님)

 

클래스 문법이 없다고는 하지만, 상속과 같은 객체지향 기능들은 사용이 가능하다.

 

 

es5

function Car(name, speed) {
  this.name = name;
  this.speed = speed;
}

Car.prototype.run = function() {
  console.log(this.name + ' ' + this.speed + 'km/h 로 달립니다~');
};

var car1 = new Car('k3', 100);

console.log(car1.run  //k3 100km/h 로 달립니다~

 

 

자바스크립트에서는 함수도 객체이다. 

함수를 선언하면 함수명의 prototype 프로퍼티가 추가된 객체를 생성한다. 

 

참고) 생활코딩 https://youtu.be/wT1Bl5uV27Y

 

construcotr 라는 프로퍼티를 가진 객체를 가리키고 있다.

이 constructor 메서드가 다시 Car 를 참조하고 있다. 

서로 참조관계인 것이다.

 

 

 

 

 

es6 문법을 사용하면 다음과 같이 바꿀 수 있다.

class Car {
  constructor(name, speed) {
    this.name = name;
    this.speed = speed;
  }

  run() {
    console.log(this.name + ' ' + this.speed + 'km/h 로 달립니다~');
  }
}

const car1 = new Car('k3', 120);
car1.run(); // k3 120km/h 로 달립니다~

constructor 는 생성자로서 초기화 해주는 역할을 한다.

 

extends 키워드를 활용해 상속 기능도 구현할 수 있다.

 

class RacingCar extends Car {
  constructor(name, speed) {
    super(name, speed);
  }
}

const raceCar1 = new RacingCar('m1', 300);
raceCar1.run();  // m1 300km/h 로 달립니다~

 

super 라는 키워드를 이용해 부모 클래스의 생성자 함수를 사용할 수 있다. 

RacingCar 에는 run 이라는 메서드가 없어도 Car 클래스로부터 상속을 받았기 때문에 run 메서드를 사용할 수 있다.

오버라이딩(덮어쓰기)도 가능하다.

 

class RacingCar extends Car {
  constructor(name, speed) {
    super(name, speed);
  }

  run() {
    console.log(this.name + ' ' + this.speed + 'km/h 로 질주합니다!!');
  }
}

const raceCar1 = new RacingCar('m1', 300);
raceCar1.run();  // m1 300km/h 로 질주합니다!!

 

static 이라는 키워드를 이용하여 정적 메소드가 구현이 가능하다.

 

class Car {
  constructor(name, speed) {
    this.name = name;
    this.speed = speed;
  }

  static horn() {
    console.log('빵빵!');
  }

  run() {
    console.log(this.name + ' ' + this.speed + 'km/h 로 달립니다~');
  }
}

car1.run();
// car1.horn(); // TypeError
Car.horn();

-------------------
콘솔
k3 120km/h 로 달립니다~
빵빵!

주의해야할 것은 정적 메소드를 호출할 때 클래스 명으로 호출을 해야 한다. 인스턴스 객체에서는 호출할 수 없다.

그리고 상속받은 자식 클래스에서도 부모 클래스의 정적 메소드를 사용할 수 있다.

 

const raceCar1 = new RacingCar('m1', 300);
raceCar1.run();
// raceCar1.horn(); // TypeError
RacingCar.horn();

---------
콘솔
m1 300km/h 로 질주합니다!!
빵빵!

자식 클래스도 마찬가치로 자식 클래스의 인스턴스 객체는 부모의 정적 메소드를 호출할 수 없다.

 

 

참고

https://poiemaweb.com/es6-class

Class | PoiemaWeb