JS. ES6 Classes

ES6 Classes

Class는 객체를 생성하기 위한 템플릿이다.

클래스는 데이터와 이를 조작하는 코드를 하나로 추상화하는데 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다.

 

const imae = {
  name: 'imae',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name)
  }
}

imae.normal()
imae.arrow()

실행 결과
imae
undefined

ES6에서는 클래스 문법을 흉내내는 것이 가능하다.

prototype을 쓰는 대신 class를 사용하여 생성자 함수를 만들 수 있다.

function User(first, last) { 
  this.firstName = first 
  this.lastName = last 
} 
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}` 
}

방법1이라고 하자, 이 방법을 ES6의 classes를 사용하면 더욱더 코드가 간편해진다.

class User {
  constructor(first, last) {
    this.firstName = first 
    this.lastName = last 
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}` 
  }
}

이러한 방법을 사용하여 출력하면 동일한 결과가 나온다.

constructor (생성자)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.

"constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다.

만약 클래스에 여러 개의 constructor 메서드가 존재하면 SyntaxError가 발생한다.