20. 클래스
📚

20. 클래스

Description
클래스에 관한 내용
Published
2023-06-08
클래스는 값으로 사용할 수 있는 일급 객체이다.
클래스는 생성자 함수와 마찬가지로 프로토타입 기반의 객체 생성 메커니즘이다.
클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.
클래스의 constructor 메서드와 프로토타입의 constructor 프로퍼티는 직접적인 관련이 없다.
서브클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스를 생성을 위임한다.
 

클래스와 생성자 함수의 차이

  1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다.
  1. 클래스는 상속을 지원하는 extendssuper 키워드를 제공한다.
  1. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.
  1. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다.
  1. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다.
 

정적 메서드와 프로토타입 메서드의 차이

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

클래스에서 정의한 메서드의 특징

  1. function 키워드를 생략한 메서드 축약 표현을 사용한다.
  1. 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요 없다.
  1. 암묵적으로 strict mode로 실행된다.
  1. for...in 문이나 Object.keys 메서드 등으로 열거할 수 없다.
  1. 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다.
 

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

  1. 인스턴스 생성과 this 바인딩
  1. 인스턴스 초기화
  1. 인스턴스 반환
 

상속에 의한 클래스 확장

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장(extends)하여 정의하는 것이다.
 

extends 키워드

상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의한다.
extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다.
extends 키워드 다음에는 클래스뿐만 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있다.
 

super 키워드

  • super를 호출하면 수퍼클래스의 constructor를 호출한다.
    • 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서 반드시 super를 호출해야한다.
    • 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
    • super는 반드시 서브클래스의 constructor에서만 호출한다.
  • super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.
    • 서브클래스의 프로토타입 메서드 내에서 super.method는 수퍼클래스의 프로토타입 메서드 method를 가리킨다.
      • [[HomeObject]]를 가지는 함수만이 super 참조를 할 수 있다.
      • ES6의 메서드 축약 표현으로 정의된 함수만이 [[HomeObject]]를 갖는다는 것이다.
    • 서브클래스의 정적 메서드 내에서 super.method는 수퍼클래스의 정적 메서드 method를 가리킨다.
 

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

  1. 서브클래스의 super 호출(서브클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스 생성을 위임)
  1. 수퍼클래스의 인스턴스 생성과 this 바인딩
  1. 수퍼클래스의 인스턴스 초기화
  1. 서브클래스 constructor로의 복귀와 this 바인딩(super가 반환한 인스턴스를 this에 바인딩하여 그대로 사용)
  1. 서브클래스의 인스턴스 초기화
  1. 인스턴스 반환
 

 
⬇️ 출처