[Deep Dive] Class

🌼 25.2 클래스 정의

클래스는 class 키워드를 사용하의 정의한다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. class는 생성자 함수처럼 선언문 형태 혹은 표현식 형태로 표현 할 수 있다. 이렇게 정의된 클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다.

//클래스 선언문
class Person {};

//익명 클래스 표현식
const Animal = class {};

//기명 클래스 표현식
//인스턴스를 생성하려면 클래스를 가리키는 식별자를 사용해야 한다.
//MyClass는 클래스 몸체 내부에서만 유효한 식별자다.
const Vegetable = class MyVegetable {};

• 클래스를 표현식으로 표기가 가능하다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다.

• 클래스 몸체에는 0개 이상의 메서드를 정의할 수 있다.

  • constructor(생성자): 인스턴스를 생성하고 초기화하기 위한 특수 메서드이다. 컨스트럭터 내부에서 this에 추가한 프로퍼티는 인스턴스의 프로퍼티가 된다. 이 때 컨스트럭터 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.

    • 프로토 타입 메서드의 constructor와는 직접적인 관련이 없으며 constructor는 메서드로 해석되지 않고 함수 객체 코드의 일부처럼 동작한다.

    • 컨스트럭터는 생략이 가능하며 컨스트럭터를 생략한 클래스는 컨스트럭터로 인해 빈 객체를 생성한다.

    • 컨스트럭터는 별도의 반환문을 갖지 않으며 new 연산자를 통해 클래스가 호출되면 암묵적으로 this를 반환한다.

  • 프로토타입 메서드: 생성자 함수와 다르게 prototype이라는 키워드 없이 클래스 몸체제 정의된 메서드는 기본적으로 프로토타입 메서드로 동작한다.

    • function 키워드를 생략한 메서드 축약 표현을 사용한다.

  • 정적메서드: 메서드에 static 키워드를 붙이면 정적 메서드가 된다. 정적 메서드는 클래스에 바인딩된 메서드로 인스턴스와 다르게 별다른 생성 과정이 필요 없으며 인스턴스가 아닌 클래스로 호출해야 한다.

    • 정적 메서드와 프로토 타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.

    • 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.
      

🌼 25.6 클래스의 인스턴스 생성 과정

1.인스턴스 생성과 this 바인딩: new 키워드를 통해 class가 호출되면 암묵적으로 빈 객체가 생성되며 생성된 인스턴스가 this로 바인딩 된다.

2.인스턴스 초기화: 컨스트럭터 내부 코드가 실행되며 인스턴스에 프로퍼티를 추가하는 등 생성된 인스턴스를 초기화한다.

3.인스턴스 반환: 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

🌼 25.7 프로퍼티

다른 객체지향 언어처럼 private, public, protected 키워드와 같은 접근 제한자를 지원하지 않는다. 따라서 인스턴스는 언제나 public하다.

• 외부의 값을 사용하여 인스턴스를 초기화할 필요가 있는 경우에는 constructor 내부에서 this라는 키워드를 사용하여 초기화해야 한다.

• 외부의 값을 사용하지 않고 클래스 몸체에 클래스 필드를 정의하는 경우, this에 클래스 필드를 바인딩하지 않고 클래스 필드에 초기값을 할당할 수도 있다.(현재 정식 표준 사양으로 승급되지는 않았으나 최신 브라우저, node.js는 선제적으로 구현해두었다.)

• 클래스 필드에 메서드도 할당할(함수 선언) 수 있으나 이는 프로토타입 메서드가 아닌 함수의 프로퍼티로 동작하므로 클래스필드에 함수를 할당하는 것은 권장하지 않는다.
  

🌼 25.7.4 private 필드 정의 제안

자바스크립트는 캡슐화를 완전하게 지원하지 않아 다른 객체 지향 언어에서 지원하는 접근 제한자 키워드를 지원하지 않는다. 다만 새로운 표준 사양이 제안되어 있어 아래의 키워드를 선제적으로 사용할 수 있다.

• private필드 선두에 #을 붙이며 참조할때도 #을 붙히면 private 접근 제한자처럼 사용할 수 있다. 이렇게 private으로 선언된 필드는 클래스 내부에서만 참조할 수 있다. 단, 접근자 프로퍼티를 통해 간접적으로 접근할 수 있다.

class Animal {
  //private 필드는 클래스 몸체에 정의해야 한다.
  //초기값을 정의하지 않으면 undefined를 갖는다.
  #age = 0;
  constructor(age) {
    this.#age = age;
  }

  //접근자 프로퍼티로 프로퍼티를 읽을 수 있다.
  get age() {
    return this.#age;
  }
  
  //접근자 프로퍼티로 프로퍼티 값을 변경할 수 있다.
  set age(newAge) {
    this.#age = newAge;
  }
}

let animal = new Animal(10);

console.log(animal.age); // 10
//접근자 프로퍼티는 함수 선언문 형태이지만 프로퍼티를 다루는 것처럼 사용한다.
animal.age = 20;
console.log(animal.age); // 20

🌼 25.8 상속에 의한 클래스 확장

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장(extends)하여 정의하는 것이다. 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 기본적으로 제공되지만 생성자 함수는 그렇지 않다. 상속으로 확장된 클래스를 서브 클래스 또는 자식 클래스라고 부르고 서브 클래스에 상속된 클래스를 수퍼 클래스 또는 부모 클래스라고 부른다.

• extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다.

• 동적으로 상속받을 대상를 결정하여 클래스를 확장할 수도 있다.

  🌼 25.8.5 super 키워드

  super 키워드는 함수처럼 호출할 수도 있고 this와 같이 식별자처럼 참조할 수 있는 특수한 키워드이다.
  

• super 호출: super를 호출하면 수퍼클래스의 컨스트럭터를 호출한다.

//수퍼 클래스
class Base {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

//서브 클래스
class Derived extends Base {
  constructor(a, b, c) {
    //서브 클래스에서 컨스트럭터를 생략하지 않는 경우, 반드시 super를 호출해야 한다.
    //super 키워드는 반드시 서브클래스 컨스트럭터 안에서만 호출해야 한다.
    super(a, b);
    //super를 호출하기 전에는 this 키워드를 사용할 수 없다.
    this.c = c;
  }
}

const derived = new Derived(1, 2, 3);
console.log(derived) //Derived {a: 1, b: 2, c: 3}

• super 참조: super 클래스를 참조하면 서브 클래스 메서드 내에서 수퍼 클래스 머서드를 호출할 수 있다. 주의할 것은 메서드 축약 표현으로 정의된 함수만이 HomeObject를 가지며, 이로 인해 super를 참조할 수 있다는 것이다.

출처: 모던 자바 스크립트 Deep Dive-이웅모