20210708 JavaSciprt DeepDive 07 : 클래스, 클래스 필드, private, static 필드 정의 제안, 클래스 상속, super, 상속 클래스의 인스턴스 생성과정, 표준빌트인 생성자 함수 확장

JavaScript Deep Dive 07

용어 및 중요사항 정리

클래스

• 자바스크립트는 프로토타입 기반의 객체지향 언어지만, 클래스를 제공함

• 그렇다고 클래스를 제공한다고 해서 새로운 클래스 기반 객체지향 모델을 제공하려는 것은 아님 단지 새로운 객체 생성의 매커니즘일 뿐임

• 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만, 정확히 동일하게 동작하지는 않고 클래스만 제공하는 기능도 있음

• 클래스 vs 생성자 함수

클래스	생성자 함수
new 연산자 없이 호출시 에러 발생	new 연산자 없이 호출시 일반 함수로 호출
extends와 super 키워드 제공 O	extends와 super 키워드 제공 X
호이스팅 발생하지 않는 것 처럼 동작	함수선언문(함수 호이스팅), 함수표현식(변수 호이스팅)
암묵적 strict mode O	암묵적 strict mode X
클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 [[Enumerable]]의 값이 false임

• 클래스 정의
  • class 키워드를 사용하여 정의함
  • class 선언문 형식, class 표현식 형식 모두 가능
  • 클래스는 일급 객체임
    • 무명의 리터럴로 생성가능
    • 변수나 자료구조에 저장가능
    • 함수의 매개변수에 전달가능
    • 함수의 반환값으로 사용가능

// class 선언문
class Person {}

// 기명 class 표현식
const Person = class MyClass {};

// 익명 class 표현식
const Person = class {};

• 클래스 몸체에 정의할 수 메서드
  • constructor
    • 클래스가 평가되어 생성한 함수 객체 코드의 일부가 됨
    • 인스턴스를 생성하고 초기화 하기 위한 특수한 메서드 (constructor이름 변경 불가)
    • 함수 객체의 프로토타입 프로퍼티가 가리키는 프로토타입 객체의 constructor 프로퍼티는 클래스 자신을 가리킴 (클래스는 생성자 함수니까)
    • 프로토타입의 constructor 프로퍼티와 전혀 관계 없음
    • constructor에서 작성한 this는 인스턴스를 가리킴
    • constructor 생략 가능하고 생략시 암묵적으로 빈 constructor가 암묵적으로 정의됨 (2개 이상은 syntax Error 발생)
    • 인스턴스 생성시 바로 초기화 할 값을 전달하려면, constructor 매개변수를 선언하여 프로퍼티에 할당하면 됨
    • constructor는 반환문이 있으면 안됨 (객체 반환시 객체가 반환되고, this 반환이 무시됨)
  • 프로토타입 메서드
    • 명시적으로 프로토타입에 할당하지 않고, 축약형 메서드를 정의하면 자동으로 프로토타입 메서드가 됨
    • 인스턴스는 상속받아 프로토타입 메서드를 사용할 수 있음
    • 인스턴스 프로퍼티를 사용해야 하는 경우 프로토타입 메서드 활용
  • 정적 메서드
    • 인스턴스를 생성하지 않아도 호출할 수 있는 메서드
    • 명시적으로 메서드를 할당하지 않아도 static 키워드를 붙여 메서드를 정의하면 정적 메서드가 됨
    • 클래스에 바인딩 된 메서드가 됨
    • 인스턴스는 클래스 자체의 메서드를 상속 받을 수 없기에 호출 할수 없음
    • this : 생성자 함수에와 마찬가지로 this는 어디서 호출됬는지에 따라서 this가 달라지기 때문에 constructor의 this는 인스턴스를, 정적 메서드의 this는 클래스를 가리킴

class Person {
  // 생성자 (인스턴스의 프로퍼티)
  constructor(name) {
    this.name = name; // name 프로퍼티는 public임
  }

  // 프로토타입 메서드
  sayHi() {
    console.log(`Hi! My name is ${this.name}`);
  }

  // 정적 메서드
  static sayHello() {
    console.log("Hello!");
  }
}

const me = new Person("kim");

// 인스턴스의 프로퍼티 참조
console.log(me.name);

// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is kim

// 정적 메서드 호출
Person.sayHello(); // Hello!

• 클래스 호이스팅
  • 클래스는 평가되어 함수객체가 됨
    • 함수객체 고유의 프로퍼티도 가지고 있고, 프로토타입과도 연결되어 자신의 스코프 체인을 구성함
  • 클래스 선언문의 경우, 런타임 이전에 먼저 평가되어 함수 객체를 생성함
  • 생성되는 함수 객체는 생성자 함수(constructor)이며 이때 프로토타입도 같이 생성됨
  • const, let의 일시적 사각지대 처럼 클래스도 호이스팅이 발생하지 않는것 처럼 보임 하지만, 호이스팅이 발생함

• 인스턴스 생성
  • 클래스는 생성자 함수이기 때문에 new 연산자와 함께 호출되어 인스턴스 생성함 (new 연산자가 없으면 Type Error 발생)
  • 클래스를 가리키는 식별자로 인스턴스를 생성해야함
  • 클래스 표현식에서의 기명 클래스 이름을 사용하여 인스턴스를 생성하면 안됨(클래스 몸체에서만 사용가능한 것이기 때문에 외부에서 참조 불가함)

• 클래스에서 정의한 메서드의 특징
  • function 키워드 생략한 메서드 축약 표현 사용
  • 클래스에서 매서드를 정의하는 경우 콤마가 필요 없음
  • 암묵적으로 strict mode가 설정됨
  • 열거 불가능 함
  • non-constructor 라서 new 연산자와 함께 호출할 수 없음

• 클랫의 인스턴스 생성 과정
  • 인스턴스 생성, this 바인딩
    • new 연산자와 함께 클래스 호출 -> 암묵적으로 빈 객체(인스턴스)가 생성 -> 클래스의 prototype 프로퍼티에 인스턴스의 프로토타입이 바인딩 됨 -> 인스턴스가 constructor 내부 this에 바인딩 됨
  • 인스턴스 초기화
    • constructor 내부 코드 실행 -> this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가후 값을 초기화 함
  • 인스턴스 반환
    • 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환

• 접근자 프로퍼티 :
  • 클래스에서도 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수를 사용할 수 있음
  • get, set 키워드를 메서드 이름 앞에 사용해서 정의함
    • 접근자 함수를 사용하여 참조하면 get이 실행됨
    • 접근자 함수를 사용하여 값을 할당하면 set이 실행됨 (1개의 값만 할당 가능하여 접근자 함수는 1개의 매개변수만 사용됨)
  • 기본적으로 접근자 프로퍼티는 프로토타입의 프로퍼티가 됨

클래스 필드

• 클래스 필드 정의 제안 :
  • 클래스 필드 : 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어
    • 클래스 기반 객체지향 언어에서는 인스턴스의 프로퍼티인 클래스 필드를 클래스 몸체에 정의할 때 constructor 밖에서 this없이 정의함
  • 자바스크립트에서 이러한 방식으로 인스턴스의 프로퍼티를 선언하게 되면 syntax Error를 발생시킴
  • 그런데, 클래스 필드 정의 제안으로 인해 최신 브라우저에서는 정상 동작하기도 함
    • constructor없이 클래스 필드(인스턴스 프로퍼티)를 정의 할수 있음
      • 하지만, 인스턴스를 생성하면서 동적으로 값을 받아 초기화 하고자하면 constructor를 사용해서 기존 방식으로 사용해야함
      • 값을 동적으로 받아 인스턴스를 생성하는것이 아니라면, 클래스 필드 방식으로 this없이, constructor 없이 인스턴스 프로퍼티를 지정할 수 있음
      • 클래스 필드 방식으로 함수를 할당하면, 인스턴스 메서드를 지정함(기존의 프로토타입 메서드가 아니고)
      • 클래스 필드를 참조하고 싶으면 this를 사용해야함
  • 핵심은, constructor 차이고 둘다 사용해도 상관은 없음

• private 필드 정의 제안
  • # 기호를 private를 하고 싶은 클래스 필드 모양 앞에 붙여주면 private 필드로 변함 (ex. #name='') -> 클래스 외부, 인스턴스에서 접근하지 못함
  • 접근자 프로퍼티를 private 필드를 참조하여 만들면, 간접적으로 접근 가능함
  • 내부에서 private 필드를 클래스 내부에서 참조하는 경우에는 this를 붙여 사용해야함
  • private 필드는 constructor를 통해서 정의하지 못하므로 클래스 몸체에서 무조건 정의해야 함

• static 필드 정의 제안
  • static 키워드를 통해서 이전에 정적 메서드를 정의 했었음
  • static public/private는 최신 브라우저에 구현되었음
    • static 필드이름: static public 필드 정의 -> 클래스 자체 프로퍼티이다
    • static #필드이름 : static private 필드 정의 -> 클래스의 것인데 외부 호출, 참조 불가
    • static 메서드 : static 메서드 -> 클래스 자체 메서드다
  • static은 클래스(생성자 함수)자체에 있는 것이다라는 의미(내부에서 외부에서 참조 호출됨)
  • private는 외부에서 참조, 호출 못하며 클래스 내부에서만 사용해라
  • public은 외부, 내부 모두 참조 가능

상속에 의한 클래스 확장

• 프로토타입 기반 상속 : 프로토타입 체인을 통해 다른 객체의 자산을 상속 받음
• 상속에 의한 클래스 확장 : 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의
• extends 키워드 : 다른 클래스를 확장할 수 있는 문법
  • 생성자 함수는 다른 생성자 함수를 확장할 수 있는 문법이 없음
  • 클래스 또한 프로토타입을 통해 상속 관계를 구현함
  • 인스턴스의 프로토타입 체인, 클래스간의 프로토타입 체인도 생성함
  • 프로토타입 메서드, 정적 메서드 모두 상속이 가능함
• 서브 클래스, 파생클래스, 자식클래스 : 상속을 통해 확장된 클래스
• 수퍼 클래스, 베이스클래스, 부모클래스 : 서브 클래스에게 상속된 클래스

// super
class Base {}

// sub
class Derived extends Base {}

• 의사 클래스 상속 패턴 : 생성자 함수와 프로토타입의 연결을 변경하여 상속을 흉내는 패턴

• 동적상속 : extends를 통해서 클래스 뿐만 아니라 생성자 함수도 상속을 받을 수 있기 때문에 조건을 걸어 동적으로 선택하여 상속을 받는 것을 말함
  • [[Construct]] 내부 메서드를 갖는 함수 객체면 가능함 -> 클래스, 함수 선언문, 함수 표현식 모두 상속 받을 수 있음

function Base1() {}

class Base2 {}

let condition = true;

class Derived extends (condition ? Base1 : Base2) {}

const derived = new Derived();
console.log(derived instanceof Base1); // true

• 서브클래스의 constructor
  • 서브클래스에 constructor를 생략하는 경우 암묵적으로 constructor가 정의되면서 서브클래스로 인스턴스를 생성할 때 넣은 인수 리스트를 수퍼클래스의 constructor에 넣어 호출하게 설정됨
  • 수퍼클래스, 서브클래스 모두 constructor를 생략하면 빈 객체 생성

// constructor 생략
class Derived extends Base {}

// -----------------------------

// 암묵적인 constructor 생성과 세팅 값
class Derived extends Base {
  constructor(...args) {
    super(...args);
  }
}

• super 키워드 :
  • super 키워드는 함수처럼 호출 가능하고, this와 같이 식별자 처럼 참조도 가능함
    • super 호출 -> 수퍼클래스의 contructor를 호출
      • 서브클래스에 인스턴스 프로퍼티를 지정하는 경우에는, constructor를 생략할수 없고 사용해야만 함 이때 super 호출을 무조건 해야함
      • super 호출 전에는 this참조가 불가하다
      • 반드시 서브클래스의 constructor에서만 super을 호출
    • super 참조 -> 수퍼클래스의 메서드 호출
      • super.메서드 : 수퍼클래스의 프로토타입 메서드를 가리킴
      • super 참조를 통해 수퍼클래스의 프로토타입 메서드를 참조하려면, 서브 클래스에서 수퍼클래스의 프로토타입을 참조 할수 있어야함
      • [[HomeObject]] : 자신을 바인딩하고 있는 객체를 가리킴
        • 메서드 축약 표현으로 정의된 함수만 HomeObject 내부슬롯을 가짐 (즉, 프로토타입 메서드에 바인딩 되것은 해당 프로토타입임)
        • HomeObject 내부슬롯을 가지는 메서드 축약 표현으로 정의된 함수만이 super참조를 할수 있음
        • 클래스, 객체리터럴에서 super 참조 사용 가능
        • 정적 메서드에서의 super는 수퍼클래스의 정적 메서드를 가르킴
  • 서브클래스를 통해 인스턴스를 생성하면서 넣은 인수를 수퍼클래스 constructor에 전달하고 싶으면 super()안에 매개변수를 넣어 연결시켜 전달 가능함

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

// Super
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }

  toString() {
    return `width = ${this.width}, height = ${this.height}`;
  }
}

// Sub
class ColorRectangle extends Rectangle {
  constructor(width, height, color) {
    super(width, height);
    this.color = color;
  }
  // 메서드 오버라이딩
  toString() {
    return super.toString() + `, color = ${this.color}`;
  }
}

• 서브클래스의 super 호출
  • JS엔진에서 클래스 평가시
  • 수퍼클래스(생성자 함수) : [[ConstructorKind]] 내부슬롯이 base로 설정
  • 서브 클래스 : [[ConstructorKind]] 내부슬롯이 derived로 설정
  • 수퍼클래스 + new 연산자 호출 -> 암묵적으로 빈 객체를 가진 인스턴스 생성, this 바인딩
  • 서브클래스 + new 연산자 호출 -> 수퍼클래스에게 인스턴스 생성 위임(constructor에서 super 호출 의무)
    • super 호출 -> 수퍼클래스 평가되어 생성된 함수 객체의 코드가 실행됨

• 수퍼클래스의 인스턴스 생성과 this 바인딩
  • super 호출 -> 수퍼클래스 consturctor 내부코드 실행전 빈 객체인 인스턴스 생성
  • super의 contructor 내부의 this에 서브클래스 인스턴스가 바인딩 (수퍼클래스 this = 서브클래스 인스턴스)
  • new.target은 서브클래스를 가리킴으로서, 서브클래스가 super 호출에 의해 생성된 인스턴스를 생성한 것으로 처리됨 (수퍼클래스 new.target = 서브클래스)
    • super호출로 생성된 인스턴스의 프로토타입은 서브클래스의 프로토타입 임 (서브클래스 인스턴스 프로토타입 = 서브클래스 프로토타입)

• 수퍼클래스의 인스턴스 초기화
  • 수퍼클래스의 constructor에 있는 this에 바인딩 된 서브클래스 인스턴스에 프로퍼티를 추가 및 전달받은 초기값으로 프로퍼티 초기화

• 서브클래스 constructor로의 복귀와 this 바인딩
  • super 호출 종료 -> super가 반환한 인스턴스가 서브클래스 this에 바인딩 (서브는 따로 인스턴스 생성X)
    • super 호출이 되어야 super가 생성하고 초기화 해준 서브클래스 인스턴스를 받아 서브클래스 자신의 세팅을 함
    • 만약, super 호출없이 this를 참조하여 바인딩 하는 경우, 인스턴스가 생성이 되지 않았기 때문에 애초에 참조가 불가능하여 Error 발생

• 서브클래스 인스턴스 초기화
  • 서브클래스의 contructor에 설정된 프로퍼티 추가 및 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 초기화

• 인스턴스 반환 : 서브클래스의 세팅이 끝나면, 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환됨

표준 빌트인 생성자 함수 확장

• 함수 객체로 평가될 수 있는 모든 표현식을 상속 받을수 있으므로, 표준 빌트인 생성자 함수도 상속 받아 확장할 수 있음

• 표준 빌트인 생성자 함수의 프로토타입 메서드가 인스턴스와 프로토타입체인으로 연결됨으로서 인스턴스는 표준빌트인 생성자 함수의 프로토타입 메서드를 사용할 수 있음

  • 그리고, 인스턴스가 표준빌트인 생성자함수의 프로토타입 메서드를 활용하면 서브클래스의 인스턴스를 반환함으로서 메서드 체이닝을 구현해 줌
    • 서브클래스 인스턴스는 수퍼클래스 프로토타입 메소드, 서브클래스 프로토타입 메서드를 모두 활용할수 있고 연이어 호출 가능

• Symbol.species를 사용하여 정적 접근자 프로퍼티를 추가하면 인스턴스의 프로토타입 메서드를 사용시 반환할 인스턴스 타입(어떤 클래스에 인스턴스 인지)을 지정할 수 있음

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }

  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i);
  }
}