[모던 자바스크립트 Deep Dive] 25장 : 클래스 - JS

클래스

자바스크립트에서 클래스를 한 문장으로 종결시키겠다. 클래스는 함수이다.

---

 

자바스크립트에서 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다.

 

• 클래스를 new 연산자 없이 호출하면 에러가 발생한다.
• 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
• 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.
• 클래스 내의 모든 코드는 암묵적으로 strict mode가 실행된다.
• 클래스는 열거되지 않는다.

생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다.

하지만 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다.

 

따라서 클래스를 새로운 객체 생성 메커니즘으로 보면 된다.

 

 

🎢 클래스는 함수로 평가되어 호이스팅이 발생한다.

🎢 클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다.

🎢 클래스 몸체에서 메서드를 정의할 수 있다.

 

 

---

프로퍼티

1️⃣ 인스턴스 프로퍼티: constructor 내부에서 정의해야 한다.

 

2️⃣ 접근자 프로퍼티: 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 사용하는                             접근자 함수로 구성된 프로퍼티다.

 

3️⃣ 클래스 필드 정의 제안

     클래스 필드란 클래스 기반의 객체 지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어를 말한다. 클래스 몸체에서 클래스 필드를 정의하는 경우 this에 클래스 필드를 바인딩해서는 안 된다.

 

4️⃣ private 필드 정의 제안

     private 필드의 선두에는 #을 붙여주고 참조할 때도 붙여준다.

class Person {
  // private 필드 정의
  #name = '';

  constructor(name) {
    // private 필드 참조
    this.#name = name;
  }
}

const me = new Person('Lee');

// private 필드 #name은 클래스 외부에서 참조할 수 없다.
console.log(me.#name);
// SyntaxError: Private field '#name' must be declared in an enclosing class

 

5️⃣ static 필드 정의 제안

     static 키워드를 사용하여 정적 필드를 정의할 수는 없었지만, 가능하도록 현재 제안 중에 있다.

class MyMath {
  // static public 프로퍼티 정의
  static PI = 22 / 7;

  // static pirvate 프로퍼티 정의
  static #num = 10;
  
  // static 메서드
  static increment() {
    return ++MyMath.#num;
  }
}

console.log(MyMath.PI); // 3.142857142857143
console.log(MyMath.increment()); // 11

 

---

상속에 의한 클래스 확장

상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다.

 

🎈 extends 키워드

extends 키워드를 사용하여 상속받을 클래스를 정의한다. extends 키워드의 역할은 수퍼클래스와 서브클래스 간의 상속 관계를 설정하는 것이다.

 

🎈 동적 상속

extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다. 단, extends 키워드 앞에는 반드시 클래스가 와야 한다. 또한 동적으로 상속받을 대상을 결정할 수도 있다.

 

🎈 super 키워드

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

 

• super를 호출하면 수퍼클래스의 constructor를 호출한다.
• super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.

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

// 서브클래스
class Derived extends Base {
  constructor(a, b, c) { // ②
    super(a, b); // ③
    this.c = c;
  }
}

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

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!