[JS] ES6에서 도입된 클래스 개념

들어가기 전에

자바스크립트는 프로토타입 기반의 객체 지향언어

클래스가 필요 없는 객체 지향 프로그래밍 언어
(클래스 없이도 생성자 함수와 프로토타입을 통해 구현 가능)

클래스

• ES6에서 도입
• 문법적 설탕 : 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 것
• 새로운 객체 생성 메커니즘: 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료

클래스	생성자 함수
new 연산자 필수	new 연산자 없이 호출 시, 일반 함수로 호출됨
extends, super 키워드 제공	X
호이스팅이 발생하지 않은 것 처럼 동작	호이스팅 O
클래스 내 모든 코드에 strict mode 적용	X

정의

// 선언문 (일반적 방식)
class Person {
  // 생성자
  constructor(name) { ... }
  
  // 프로토타입 메서드
  sayHi() { ... }
  
  // 정적 메서드
  static sayHello() { ... }
}

// 표현식으로 정의 가능
// -> 클래스가 일급 객체라는 것을 의미
const Person =  class {};

(생성자 함수의 정의 방식)

var Person = (function () {
  // 생성자 함수
  function Person(name) { ... }
  
  // 프로토타입 메서드
  Person.prototype.sayHi = function () { ... }
  
  // 정적 메서드
  Person.sayHello = function () { ... }
  
  return Person;
}());                               

일급 객체로서의 클래스

• 무명의 리터럴로 생성 가능(런타임에 생성 가능)
• 변수나 자료구조에 저장 가능
• 함수의 매개변수에 전달 가능
• 함수의 반환값으로 사용 가능

메서드

• 메서드 축약 표현 사용
• 메서드 정의 시, 콤마 사용 X
• 열거 불가

1. constructor

• 인스턴스를 생성하고 초기화하기 위한 특수한 메서드
• 이름(constructor) 변경 불가
• 클래스 내 최대 한 개 (생략 시, 빈 생성자 암묵적 정의)
• 별도의 반환문 X (암묵적으로 this(인스턴스) 반환)
  • 객체 반환 시, 암묵적 this 반환 무시
  • 원시값 반환 시, 암묵적 this 반환

2. 프로토타입 메서드

• 클래스 몸체에 정의한 메서드 -> 자동적으로 프로토타입 메서드

3. 정적 메서드

• 인스턴스를 생성하지 않아도 호출할 수 있는 메서드
• static 키워드 사용

인스턴스

• 생성과정
  1. 인스턴스 생성과 this 바인딩
     • 암묵적으로 빈 객체 생성(인스턴스)
     • this에 바인딩
  2. 인스턴스 초기화
     • constructor 내부 코드가 실행되어 인스턴스 초기화
  3. 인스턴스 반환
     • 인스턴스가 바인딩된 this 반환

프로퍼티

1. 인스턴스 프로퍼티

• constructor 내부에서 정의(클래스 몸체에는 메서드만 선언 가능)
• 언제나 public
• 참조할 경우 반드시 this 사용

Class field declarations

• 클래스 몸체에서 클래스 필드를 정의할 수 있도록 제안된 사양
• 최신 브라우저(Chrome 72 이상), 최신 Node.js(버전 12 이상)에서 구현 가능

Class field private fields

• private 필드를 정의할 수 있도록 제안된 사양
• 최신 브라우저(Chrome 72 이상), 최신 Node.js(버전 12 이상)에서 구현 가능
• 필드를 선언, 참조할 때 선두에 # 붙이기
  ex. #name = '...';

Class field static class features

• static 키워드를 사용하여 정적 필드를 정의할 수 있도록 제안된 사양
• 최신 브라우저(Chrome 72 이상), 최신 Node.js(버전 12 이상)에서 구현 가능
• 정적 필드: static public 필드, static private 필드, static private 메서드

2. 접근자 프로퍼티

• 자체적인 값을 갖지 않고
  다른 데이터 프로퍼티의 값을 읽어나 저장할 때 사용하는 접근자 함수
  -> getter, setter 함수로 구성
  

상속

1. 상속에 의한 클래스 확장

• 프로토타입 기반 상속: 프로토타입 체인을 통해 다른 객체의 자산을 상속 받음
• 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의
• 코드 재사용 관점에서 유용

2. extends 키워드

// 슈퍼(베이스/부모) 클래스
class Base {}

// 서브(파생/자식) 클래스
class Derived extends Base {}


// 생성자 함수 상속 가능
function Base( ... ) {... }

class Derived extends Base {}
                      
// 표현식을 이용한 동적 상속 가능
class Derived extends (condition ? Base1 : Base2) {}                      

3. super 키워드

1. super 호출

• 슈퍼클래스의 constructor 호출
• 서브클래스의 constructor 생략하지 않는 한, 반드시 super 호출
• super 호출 전까지는 this 참조 불가
• 서브클래스의 constructor에서만 호출 가능

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

1. 서브클래스의 super 호출
   • 슈퍼클래스에게 인스턴스 생성 위임
2. 슈퍼클래스의 인스턴스 생성과 this 바인딩
   • 인스턴스 생성은 슈퍼클래스,
     생성된 인스턴스의 타입은 서브클래스의 protorype 프로퍼티가 가리키는 객체
3. 슈퍼클래스의 인스턴스 초기화
4. 서브클래스 constructor로의 복귀와 this 바인딩
   • 서브클래스는 별도의 인스턴스 생성없이,
     super가 반환한 인스턴스를 this에 바인딩하여 사용
5. 서브클래스의 인스턴스 초기화
6. 인스턴스 반환

2. super 참조

• 슈퍼클래스의 메서드 호출