[JavaScript/DeepDive]24.클래스(1)

• [25.1] 클래스는 프로토타입의 문법적 설탕인가?
• 클래스는 생성자 함수보다 엄격하며 생성하 함수에서는 제공하지 않는 기능도 제공한다.
  • 클래스를 new 연산자 없이 호출하면 에러가 발생한다.
    
    • 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.
  • 클래스 상속을 지원하는 extends와 super 키워드를 제공한다.
    • 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.
  • 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.
    • 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
  • 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다.
    • 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
  • 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다.
    • 다시 말해, 열거되지 않는다.
• 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 보는게 좀 더 합당하다.

 

 

 

• [25.2] 클래스 정의
• 클래스는 class 키워드를 사용하여 정의한다.
  • // 클래스 선언문
    class Person { }
• 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다.
  • 클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급객체라는 것을 의미한다.
    • 즉, 클래스는 일급 객체로서 다음과 같은 특징을 갖는다.
      • 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
      • 변수나 자료구조(객체, 배열)에 저장할 수 있다.
      • 함수의 매개변수에게 전달할 수 있다.
      • 함수의 반환값으로 사용할 수 있다.
• 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.

 

 

 

• [25.3] 클래스 호이스팅
• 클래스는 함수로 평가된다.
• 클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성한다.
  • 이때 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수, 즉 constructor다.
• 단, 클래스는 클래스 정의 이전에 참조할 수 없다.
• 클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다.
  • 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다.
    • 따라서 클래스 선언문 이전에 일시적 사각지대에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.

 

 

• [25.4] 인스턴스 생성
• 함수는 new 연산자의 사용 여부에 따라 일반 함수로 호출되거나 인스턴스 생성을 위한 생성자 함수로 호출되지만 클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new연산자와 함께 호출해야 한다.
• 클래스 표현식으로 정의된 클래스의 경우 식별자를 사용해 인스턴스를 생성하지 않고 기명 클래스 표현식의 클래스 이름을 사용해 인스턴스를 생성하면 에러가 발생한다.

 

 

 

• [25.5] 메서드
• 클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다.
• constructor
• constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다.
  • constructor는 이름을 변경할 수 없다.
    • class Person {
           // 생성자
           constructor(name) {
                // 인스턴스 생성 및 초기화
                this.name = name;
           }
      }
• constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다.
  • 다시 말해, 클래스 정의가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 생성된다.
• constructor는 클래스 내의 최대 한 개만 존재할 수 있다.
• constructor를 생략하면 빈 constructor가 암묵적으로 정의된다.
• 프토퍼티가 추가되어 초기화된 인스턴스를 생성하려면 constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다.
  • 인스턴스를 생성할 때 클래스 외부에서 인스턴스 프토퍼티의 초기값을 전달하려면 constructor에 매개변수를 선언하고 인스턴스를 생성할 때 초기값을 전달한다.
• constructor는 반환문을 갖지 않아야 한다.
• 프로토타입 메서드
• 클래스 몸체에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과는 다르게 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.
  • class Person {
         // 생성자
         constructor(name) {
         // 인스턴스 생성 및 초기화
               this.name = name;
         }
    
         // 프로토타입 메서드
        sayHi( ) {
             console.log(`Hi! My name is ${this.name}`);
        }
    }
    const me = new Person('Lee');
    me.sayHi( ); // Hi! My name is Lee
  • 생성자 함수와 마찬가지로 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다.
• 인스턴스는 프로토타입 메서드를 상속받아 사용할 수 있다.
• 정적 메서드
• 정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다.
• 클래스는 메서드에 static 키워드를 붙이면 정적 메서드(클래스 메서드)가 된다.
• class Person {
       // 생성자
       constructor(name) {
            // 인스턴스 생성 및 초기화
            this.name = name;
       }
       // 정적 메서드
       static sayHi( ) {
            console.log('Hi!');
       }
  }
• 클래스는 클래스 정의(클래스 선언문이나 클래스 표현식)가 평가되는 시점에 함수 객체가 되므로 인스턴스와 달리 별다른 생성 과정이 필요 없다.
  • 따라서 정적 메서드는 클래스 정의 이후 인스턴스를 생성하지 않아도 호출할 수 있다.
    • // 정적 메서드는 클래스로 호출한다.
      // 정적 메서드는 인스턴스 없이도 호출할 수 있다.
      Person.sayHi( ) // Hi!
      • 정적 메서드는 인스턴스로 호출할 수 없다.
• 정적 메서드와 프로토타입 메서드의 차이
  • 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.
  • 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
  • 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.