ES6 - Class

기본 문법

비슷한 종류의 객체를 생성할 때 클래스를 도입하여 상속해주는 방식으로 만들 수 있다. 하지만 클래스는 엄격하게 보면 '함수'로 볼 수 있다.

ES6부터 클래스를 만드는 문법이 굉장히 간결해졌다. 예를 들어 'Car'라는 클래스가 있다고 생각하고 이를 활용해서 인스턴스를 만들어보면

class Car{
  constructor(){ ... }
  method1()
  method2()
  method3()
  ...
}

const arr1 = new Car();
const arr2 = new Car();

여기서 constructor(){...}는 객체의 초기 상태값을 정해준다.

class Car {
  constructor(name) {
    this.name = name;
  }
  carName() {
	console.log(`이 차의 명칭은 ${this.name}입니다`);
  }
}

// 사용법:
let car = new Car("Hyundai");
user.carName();

constructor()에서 새롭게 만들어진 car 객체의 name을 할당하고 carName에서 사용되고 있다. 클래스 함수의 본문이 constructor에서 만들어지는데 없으면 함수 본문이 빈 상태라고 볼 수 있다.

클래스안에 여러 개의 메서드가 존재할 수 있는데 이것은 해당 클래스의 프로토타입을 참조한다고 할 수 있다. 본 예시에서는 carName()는 Car.prototype에서 저장된다.

Car.prototype에서 carName: function, constructor: Car로 접근한다. 다시 말해 클래스명 Car는 그 해당 프로토타입에서 constructor 메서드 자체라고 정의된다.

클래스와 클래스에서 만들어진 객체를 구체화하면,

class Car{
  constructor(company, model){
    this.company = company;
    this.model = model;
    this.userGears = ['P', 'N', 'R', 'D'];
    this.userGear = this.userGears[0];
  }
  
  shift(gear){
    if(this.userGears.indexOf(gear) < 0){
      throw new Error(`Invalid gear: ${gear}`);
    }
    this.userGear = gear;
  }
}

const car1 = new Car("Hyundai", "Genesis");
const car2 = new Car("Tesla", "Model S");

car1.shift('D'); // shift메서드의 this가 car1에 묶인다.
car2.shift('R'); // shift메서드의 this가 car2에 묶인다.

console.log(car1.userGear); //'D'
console.log(car2.userGear); //'R'

새로운 각 인스턴스에 shift()메서드에 값을 할당하지 않으면 constructor에서 설정한 초기 기어 this.userGear는 'P'가 되고, shift()에 값을 넣으면 그에 맞는 값이 this.userGears안에 인덱스가 존재한다면 this.userGear가 해당 값에 묶인다.

클래스와 함수의 차이점

클래스로 안에 특수 프로퍼티 [[FunctionKind]]:"classConstructor가 따라디닌다. 이 프로퍼티로 인해 새로운 클래스를 통해 인스턴스를 만드려면 생성자 new를 반드시 같이 써야 한다. 클래스가 아닌 일반적인 함수라면 이 특수 프로퍼티가 없고 자바스크립트 엔진은 이 부분을 확인하기 때문에 클래스와 함수는 엄연히 차이가 있다.

또한 클래스의 메서드들은 열거(enumerable)할 수 없으며 예외 없이 엄격모드에서만 작동한다.

클래스 표현식