자바스크립트 클래스(Class)와 상속

⭐ 자바스크립트 클래스 (Class)

• 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어짐

• 원래 프로토타입이 먼저 존재했지만 ES6부터 클래스를 사용하기 위해 도입됨

• 자바스크립트에서 클래스는 함수의 한 종류, 객체를 생성하기 위한 틀, 클래스는 객체의 데이터와 이를 조작하는 메서드를 하나로 추상화

• 클래스는 함수기 때문에 클래스도 표현식과 선언 두 가지 방법을 모두 제공

• 생성자 함수와 비슷하다고 느끼지만 클래스는 [[IsClassConstructor]]라는 특수 내부 프로퍼티가 true인 값으로 항상 존재 그리고 클래스는 new와 함께 호출하지 않으면 에러가 발생 이때 [[IsClassConstructor]] : true가 사용

⭐ 자바스크립트 클래스 상속

• 클래스의 상속은 extends 키워드를 사용해서 상속가능

• 클래스는 내부적으로 프로토타입을 갖고 있어서 prototype이 상속이 됨 (클래스는 프로토타입을 이용해서 만들어진 거니까) 이런 것을 문법적 설탕이라고 함

• class Rabbit extends Animal로 Animal을 상속한 Rabbit이 있다고 가정
  -- 키워드 extends는 프로토타입을 기반으로 동작, extends는 Rabbit.prototype.[[Prototype]]을 Animal.prototype으로 설정
  -- 따라서 Rabbit.prototype에서 메서드를 찾지 못하면 Animal.prototype에서 메서드를 가져옴
  -- 여기서 주의할 점은 위 그림대로 Rabbit.[[Prototype]]이 Animal을 참조하는 것을 확인할 수 있고 Rabbit.prototype.[[Prototype]]이 Animal.prototype을 참조하는 것을 확인 가능
  -- extends는 두 개의 [[Prototype]] 참조를 만들어내는 것 이것은 밑에서 다룰 정적 메서드 상속과 관련이 있음

⭐ 자바스크립트 클래스 메서드 오버라이딩

• 클래스에서 메서드 오버라이딩시 super 키워드 사용
• 오버라이딩은 부모 메서드를 토대로 일부 기능만 변경하고 싶을 때나 부모의 기능을 확장하고 싶을 때 사용
  -- super.method()는 부모 클래스에 정의된 메서드, method를 호출
  -- super(...)는 부모 생성자를 호출하는데 자식 생성자 내부에서만 사용 가능

자바스크립트 정적 클래스 멤버 (프로퍼티/메서드)

• 정적 클래스 멤버 (프로퍼티/메서드)는 클래스의 특정 인스터스에 묶이는 것이 아닌, 어떤 인스턴스가 이를 참조하는지에 관계없이 동일한 값을 가짐 즉, prototype이 아닌 클래스 자체에 설정 가능 이것은 static(정적) 클래스 멤버라고 함
  -- 일반적인 메서드나 프로퍼티들은 prototype에 포함되는데 정적 메서드는 prototype에 포함되지 않고 클래스 자체에 포함 되기 때문 (더 위에 Animal.run은 일반 메서드, Animal.compare는 정적 메서드)

• 정적메서드는 this에서 User.staticMethod()가 호출될 때 this의 값은 클래스 생성자인 User가 됨

• 정적 프로퍼티나 정적 메서드는 상속이 됨, 이유는 프로토타입 때문 Rabbit의 [[Prototype]]이 Animal을 참조하도록 하기 때문