클래스

ES2015에 추가된 클래스는 다른언어에서 말하는 클래스가 아님 프로토타입을 기반으로 하여 만들어진 문법으로 생성자의 기능을 대체 합니다. 클래스사용으로 훨씬 더 깔끔한 문법을 사용할수 있습니다.

생성자와 클래스에 차이점

  • 클래스는 함수로 호출될 수 없습니다.
  • 클래스 선언은 let과 const 처럼 블록 스코프에 선언되며, 호이스팅이 일어나지 않습니다.
  • 클래스는 super 키워드를 사용할수 있습니다.

클래스 문법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 클래스 기본 코드
// class 선언
class Person {
  // 이전에서 사용하던 생성자 함수는 클래스 안에 `cosntructor`라는 이름으로 정의합니다.
  // cosntructor는 인스턴스를 생성하고 클래스 속성을 초기화하기 위한 특수한 메소드입니다.
  constructor({ name, age }) {
    // 클래스 속성의 선언과 초기화는 반드시 constructor내부에
    this.name = name;
    this.age = age;
  }

  // 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면, 메소드가 자동으로 `Person.prototype`에 저장됩니다.
  introduce() {
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
  }
}

// 인스턴스 생성
const person = new Person({ name: "윤아준", age: 19 });
console.log(person.introduce()); // 안녕하세요, 제 이름은 윤아준입니다.

Getter, Setter

  • Getter: get 키워드로 정의, 속성을 읽어올때 사용
  • Setter: set 키워드로 정의, 속성을 변경 할 때 호출
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Account {
  constructor() {
    this._balance = 0;
  }
  // get 읽기
  get balance() {
    return this._balance;
  }
  // set 변경
  set balance(newBalance) {
    this._balance = newBalance;
  }
}

const account = new Account();
account.balance = 10000;
account.balance; // 10000

정적 메소드

정적 메소드: 생성자의 속성에 직접 지정된 메소드를 가지고 정적 메소드라고 합니다.

static 키워드를 메소드 이름 앞에 붙여주면 해단 메소드는 정적 메소드가 됩니다.

참고링크

https://poiemaweb.com/es6-class