클래스

• ES5 문법에서는 생성자 함수와 프로토타입을 통해 인스턴스를 생성할 수 있었다.
• 그러나 ES6에서 클래스가 도입되면서 extends super 키워드를 사용하여 상속 관계 구현을 이 전 생성자 함수 방식 보다는 상속 관계 구현을 더욱 직관적으로 한다.

클래스 정의

class Person {
	name; // 클래스 필드
  constructor(name) { // 생성자
  	this.name = name; // 인스턴스 생성 및 초기화
  }
	
  print() { // 프로토타입 메소드 정의
	return this.name;
  }
  
  static print() { // 정적메소드 정의
   	console.log('hello!');  
  }
}

• 위 코드와 같이 정의한다!
  클래스 필드에 있는 변수의 값이 할당 되어 있지 않으면 undefined로 들어간다.

클래스의 호이스팅

• 클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다.

const Person = '';
{
	console.log(Person);
  // ReferenceError: Cannot access 'Person' before initialization
  
  class Person {}
}

• 위의 코드를 보면 만약 클래스 선언문이 호이스팅이 발생하지 않는다고 하면 ''이 출력되어야 할 것이다. 그러나 위의 주석과 같이 선언문 전 접근할 수 없다. 라는 참조에러가 발생한다.
  => 이 말은 즉, const나 let 키워드로 선언한 변수와 같이 동작한다는 것이다.

• 따라서 클래스 선언문 이전에 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다!

인스턴스 생성

• 생성자 함수와 똑같이 new 연산자를 사용해 인스턴스를 생성한다.

정적 메소드

class Person {
  name;
	constructor(name){
      this.name = name;
    }
  
  static print(){
	console.log("hello world");
  }
}

const dongs = new Person("dongs");

Person.print(); // "hello world"
dongs.print(); //print is not a function

• static키워드로 선언한 메소드는 정적 메소드이다.
• 위 코드와 같이 정적메소드는 클래스 네임으로만 접근할 수 있고 인스턴스는 정적 메소드를 상속받을 수 없다. 그래서 에러가 나는 것이다.

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

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

보통 this를 사용하지 않는 메소드를 정적메소드로 만든다!

private

• 자바스크립트 class 에서는 private 한 클래스 필드 정의를 # 키워드로 하며 호출할 때도 반드시 해당 키워드를 붙혀줘야한다.

상속과 클래스 확장

class Person {}
class Julie extends Person {}

• 위 코드와 같이 extends 키워드를 사용하여 클래스를 확장한다.

• 상속을 통해 확장된 클래스를 서브클래스, 서브클래스에게 상속된 클래스를 수퍼클래스 라고 한다.

• 서브클래스를 파생클래스, 자식클래스 부르기도 하며 수퍼클래스를 부모클래스 라고 부르기도 한다!

• 또한 생성자 함수를 상속받아 클래스를 확장할 수도 있다.