[JavaScript] 클래스

자바스크립트의 기본 개념과 동작 원리를 정확히 이해하는 것이 중요!

---

개인적인 공부를 하면서 중요한 내용을 정리한 형식이기 때문에 오류가 있을 수 있습니다.
피드백 주시면 정말 감사하겠습니다.

---

클래스와 생성자 함수의 정의 방식 비교

함수는 new 연산자의 사용 여부에 따라 일반 함수로 호출되거나 인스턴스 생성을 위한 생성자 함수로 호출되지만 클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출해야 한다

class Person {}

// 클래스를 new 연산자 없이 호출하면 타입 에러가 발생한다.
const me = Person();
// TypeError: Class constructor Person cannot be invoked without 'new'

constrictor는 별도의 반환문을 갖지 않아야 한다

class Person {
  constructor(name) {
    this.name = name;

    // 명시적으로 원시값을 반환하면 원시값 반환은 무시되고 암묵적으로 this가 반환된다.
    return 100;
  }
}

const me = new Person('Lee');
console.log(me); // Person { name: "Lee" }

정적 메서드와 프로포타입 메서드의 차이
1. 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다
2. 정적 메서드는 클래스를 호출하고 프로토타입 메서드는 인스턴스로 호출한다
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다

클래스에서 정의한 메서드의 특징
1. function 키워드를 생략한 메서드 축약 표현을 사용한다
2. 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요없다
3. 암묵적으로 strict mode로 실행된다
4. for ... in 문이나 Object.keys 메서드 등으로 열거할 수 없다 즉, 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값을 값는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다
5. 내부 메서드 [[Construct]]를 갖지 않는 non-constrctor다 따라서 new 연산자와 함께 호출할 수 없다

클래스의 인스턴스 생성 과정

class Person {
  // 생성자
  constructor(name) {
    // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.
    console.log(this); // Person {}
    console.log(Object.getPrototypeOf(this) === Person.prototype); // true

    // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
    this.name = name;

    // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
  }
}

클래스 필드를 참조하는 경우 this를 반드시 사용해야 한다

class Person {
  // 클래스 필드
  name = 'Lee';

  constructor() {
    console.log(name); // ReferenceError: name is not defined
  }
}

new Person();

클래스 상속과 생성자 함수 상속

class Animal {
  constructor(age, weight) {
    this.age = age;
    this.weight = weight;
  }

  eat() { return 'eat'; }

  move() { return 'move'; }
}

// 상속을 통해 Animal 클래스를 확장한 Bird 클래스
class Bird extends Animal {
  fly() { return 'fly'; }
}

const bird = new Bird(1, 5);

console.log(bird); // Bird {age: 1, weight: 5}
console.log(bird instanceof Bird); // true
console.log(bird instanceof Animal); // true

console.log(bird.eat());  // eat
console.log(bird.move()); // move
console.log(bird.fly());  // fly

super 키워드는 함수처럼 호출할 수도 있고 this와 같이 식별자처럼 참조할 수 있는 특수한 키워드다

// 수퍼클래스
class Base {
  constructor(a, b) { // ④
    this.a = a;
    this.b = b;
  }
}

// 서브클래스
class Derived extends Base {
  constructor(a, b, c) { // ②
    super(a, b); // ③
    this.c = c;
  }
}

const derived = new Derived(1, 2, 3); // ①
console.log(derived); // Derived {a: 1, b: 2, c: 3}

super를 호출할 때 주의할 사항
1. 서브클래스에서 constrictor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다
2. 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다
3. super는 반드시 서브클래스의 constructor에서만 호출한다 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다