자바스크립트 클래스 1 - 기본 개념

자바스크립트 클래스

• ES6 가 나오기 이전에는 프로토타입 체이닝을 이용해 객체를 객체지향의 상속과 비슷한 구현이 가능했다.
  • new function() 을 이용했다.
  • function 키워드가 클래스 생성자 역할까지 하려다보니 이 때 function 에 쓸데없는 것들이 많이 추가됐다.
    • 결국 function 키워드는 화살표 함수의 등장으로 이제는 쓸 필요가 없다. (제너레이터 빼고)
• ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 컴퓨터 프로그래밍에서의 클래스 를 구현하는 것이 가능해졌다.
  • 여전히 프로토타입도 이용하지만, 단순히 프로토타입만을 이용해서는 불가능하고 클래스로는 가능한 것들이 생겼다.

컴퓨터 프로그래밍에서의 클래스란?

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

• 객체지향 프로그래밍의 장점인 상속, 다형성, 추상화 등을 이용할 수 있게 된다.
• new.target 을 통한 트릭으로 abstract class, final class 와 같은 것들을 만들 수도 있다.

클래스 기본 문법 살펴보기

class Color {
  constructor(r = 0, g = 0, b = 0) {
    this.r = r;
    this.g = g;
    this.b = b;
  }

  get rgb() {
    return `rgb(${this.r}, ${this.g}, ${this.b})`;
  }

  set rgb(value) {
    // TODO ...
  }

  toString() {
    return this.rgb;
  }

  static fromCSS(css) {
    // TODO ...
  }
}

let c = new Color(30, 144, 255); // new 키워드를 통한 생성
c = Color.fromCSS("00A"); // 정적 팩토리 메서드를 통한 생성

클래스의 구성요소

• 생성자 (constructor)
  • 보통 여기서 유효성 검사까지 많이 한다.
• 데이터 필드 (r, g, b)
• 접근자 속성 (get(), set())
• 프로토타입 메서드 (toString())
  • 인스턴스 메서드라고 하지 않는 이유는 프로토타입에서 상속되기 때문이다.
  • Color.prototype.toString 에 존재하다, 생성자를 통해 프로토타입 체인으로 옮겨진다.
• 정적 메서드 (fromCSS)

프로토타입 확인

console.log(Color.prototype); // {constructor: ƒ, toString: ƒ}
const color = new Color();
console.log(color.__proto__); // {constructor: ƒ, toString: ƒ}

• Color.prototype (프로토타입 객체) 에 존재하던 메서드가 color.__proto__ (프로토타입 체인, 던더 프로토) 로 옮겨간 걸 볼 수 있다.
• 기존의 프로토타입 상속과 같은 동작 방식이다.

프로토타입으로 클래스를 흉내낼 수 없는 이유

function UserFunc(name) {
  this.name = name;
}

UserFunc.prototype.sayHi = function () {
  console.log(this.name);
};

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(this.name);
  }
}

let userFunc = new UserFunc("Jake");
userFunc.sayHi(); // Jake

let user = new User("Jake");
user.sayHi(); // Jake

let userFuncCall = UserFunc("Jake");
let userCall = User("Jake"); // Uncaught TypeError: Class constructor User cannot be invoked without 'new'

• 클래스의 생성자는 new 와 함께 호출하지 않으면 에러가 발생한다.
• 내부에 [[isClassConstructor]] 라는 특수 속성이 true 로 설정되어 있어, new 키워드가 없으면 생성자를 호출하지 못한다.
• 클래스에 정의된 메서드는 열거가 불가능하다. (non-enumerable)
• 클래스 내부의 코드는 항상 use strict 가 붙은 것처럼 엄격 모드 로 실행된다.