25 클래스

호이스팅 : 발생하지 않는것처럼 동작하나 클래스도 결국 함수. 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅 발생, 함수 표현식은 변수 호이스팅 발생 즉, 클래스 선언문은 let const 변수처럼 변수 호이스팅되어 TDZ에 빠져 호이스팅 안생기는것처럼 보임

클래스 vs 생성자함수

클래스 정의

일반적으로 파스칼케이스로 표현, 익명으로도 표현가능

표현식으로 정의 가능함(일급객체 → 무명리터럴 생성가능, 런타임에 생성가능, 변수 자료구조 저장가능, 함수의 매개변수에 전달가능, 함수 반환값으로 사용가능 )

const Person =class {};
const Person =class p1 {};

클래스 내의 메서드 3가지 : constructor, 프로토타입 메서드, 정적메서드

클래스 = 함수 → 객체 고유의 프로퍼티 지녔고, 스코프체인 구성함.
클래스 = 함수 → 객체 고유의 프로퍼티 지녔고, 스코프체인 구성함.

• constructor :인스턴스 생성 초기화

  : 인스턴스 생성 초기화 기능. constructor는 메서드로 해석되는게 아니고 클래스로 평가되어 생성된 함수 객체 코드의 일부가 됨. 
  
  - 클래스의 constructor메서드와 다름(클래스내 1개만 존재가능. 클래스내에 명시 안하면 암묵적으로 빈 객체 생성됨 )

  
  이때 생성자에서 return 해버리면 암묵적인 this 반환이 무시되어 빈 객체가 반환됨

• 프로토타입 메서드 : 클래스내에 정의한 메서드

  클래스내에 정의한 메서드는 기본적으로 프토토타입 메서드가 됨

  클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 되어, 프로토타입 메서드 상속 가능. → 클래스도 결국 프로토타입 기반 객체 생성 메커니즘

• 정적 메서드 :인스턴스 생성 없이 호출 가능메서드 static 붙이면됨

  정적메서드는 클래스에 바인딩된 메서드가 되고, 클래스는 자신의 메서드 프로퍼티 소유 가능.

  Math, Number, JSON, Object, Reflect는 정적 메서드 가지고있음 (utility 함수)

클래스호이스팅

클래스는 클래스 정의 이전에 참조 불가능.

클래스는 소스평가과정, 런타임 이전에 평가되어 함수 객체를 생성. 이때 클래스가 평가되어 constructor 생기고, 함수객체 생성시점에 prototype 생성됨 (prototype, 생성자 함수는 쌍으로 존재)

인스턴스 생성

new연산자와 호출되어 인스턴스 생성

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

• 메서드 축약 표현 사용(function 생략)
• 객체 리터럴과 다르게 클래스 메서드 정의시 , 필요 없음
• 암묵적 static mode
• 열거 불가능 (for...in , Object.keys 불가)
• [[Construct ]] 갖지 않은 non-constructor new와 함께 호출 불가

프로퍼티

1. 인스턴스 프로퍼티 : constructor 내부에 this에 추가된 프로퍼티는 public 함
2. 접근자 프로퍼티 : 접근자 함수 get set 구성됨
   getter 참조하는 형식으로 사용(리턴값 必) , setter 값 할당하는 형식(매개변수 必)

클래스 메서드는 프로토타입 메서드가 됨 그래서 접근자 프로퍼티도→ (protoType property)

서브(자식)클래스, 수퍼(부모/베이스) 클래스

수퍼클래스, 서브클래스는 인스턴스의 프로토타입 체인, 클래스 프로토타입 체인도 생성함. → 프로토타입메서드 정적 메서드 상속 가능

동적상속.. extends 키워드는 클래스외에 생성자 함수 상속 받아 클래스 확장가능. 단 extends 앞에 클래스가 와야함

클래스외에 [[Construct]] 내부 메서드 갖는 함수 객체로 평가 될수 있는 모든 표현식 사용 가능 (String, Number, Array 같은 표준 빌트인 객체도 가능 )

슈퍼 클래스 생성자 생략하면 자동으로 생성되고 서브 클래스에서 생성자 생략하면, 수퍼 클래스꺼 호출해서 생성.

constructor(...args){super(...args);}

프로퍼티 소유하는 인스턴스 생성하려면 constructor 내부에 인스턴스 프로퍼티 추가해야함..

super 키워드

this 처럼 식별자 참조 가능. super 하면 슈퍼클래스 생성자 호출, super 참조시 수퍼클래스의메서드 호출 가능
이때, 서브클래스에 생성자 있을경우, super 반드시 호출해야함

메서드내에 super 참고하면 수퍼클래스 메서드 호출가능

자바스크립트는 내부 슬롯 [[constructorKind]] 의 값으로 수퍼 , 서브클래스 구분 가능.
상속 아닐때 base , 서브클래스는 derived가 됨

원래 JS는 new 연산자 호출시 빈객체, 인스턴스 생성하고 this에 바인딩 하나 서브클래스는 자신이 직접 인스턴스 생성하지 않고 수퍼클래스에게 인스턴스 생성 위엄 그래서 super를 함.

서브클래스 new 되면 서브내 생성자 super가 함수처럼 호출되고 수퍼클래서 생성자가 호출되고, 함수 객체 의 코드 실행

수퍼클래스 생성자 내부 코드 실행전 암묵적으로 빈객체 생성(인스턴스) 이건 this와 바인딩됨. 수퍼 클래스 생성자 this는 생성된 인스턴스 가리킴

→ 생성된 인스턴스 프로토 타입은 서브클래스의 prototype프로퍼티가 가리키는 객체가 됨.