본문 바로가기
Study/JavaScript

ES6 ) Class 클래스

by JongIk 2022. 4. 17.
반응형

클래스

ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다.

function Vacation(destination, length){
    this.destination = destination;
      this.length = length;
}

Vacation.prototype.print = function(){
  console.log(this.destination+" "+this.length+"일");
}

var daegu = new Vacation("대구",5);
daegu.print() // 대구 5일

객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다.

ES6 부터는 클래스 선언이 추가되었습니다. 함수는 객체이며 상속은 프로토타입을 통해 처리됩니다.

class Vacation {
  constructor(destination, length){
      this.destination = destination;
      this.length = length;
    }
  print() {
    console.log(`${this.destination} ${this.length}일`);
  }
}

var daegu = new Vacation("대구",5);
daegu.print() // 대구 5

클래스를 정의하고 나면 새로운 객체를 생성하기 위해 원하는만큼 new 를 호출할 수 있고 클래스를 확장할 수도 있습니다. 기존의 클래스를 확장한 새로운 클래스는 상위 클래스의 모든 프로퍼티와 메서드를 상속받습니다. 이렇게 상속한 프로퍼티나 메서드를 하위 클래스 선언 안에서 변경할 수 있습니다.

Vacation 을 여러 가지의 타입을 정의하기 위한 추상 클래스로 사용할 수도 있습니다.
예를 들어, Expedition 은 Vacation 클래스를 확장해 장비를 표현하는 프로퍼티를 더 가집니다.

class Expedition extends Vacation {
  constructor(destination, length, gear) {
    super(destination, length);
    this.gear = gear;
  }
  print() {
    super.print();
    console.log(`${this.gear} 를 가져오세요`);
  }
}

const trip = new Expedetion("대구", 3, "차");
trip.print();
//대구 3
//차 를 가져오세요
반응형

댓글