[Group Study, 모던 자바스크립트 Deep Dive] - 25 클래스 Part2

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비나 novice인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

25.7 프로퍼티

25.7.1 인스턴스 프로퍼티

인스턴스 프로퍼티는 consstructor 내부에서 정의해야 한다.

25.7.2 접근자 프로퍼티

접근자 프로퍼티는 자벷적으로는 값([[Value]])을 갖기 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다. (getter, setter)

[예제 25-01]

// 클래스 선언문
class Person {
 firstName= "Daniel"
 lastName= "Park"
 
 
 get fullName(){ return this.firstName + this.lastName}
 
 set fullName(name) {
  [this.firstName, this.lastName] = name.split(' ')
 }
 
}

//인스턴스 생성
const me = new Person()

[그림 25-01]

25.7.3 클래스 필드 정의 제안

인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 있다면 constructor에서 인스턴스 프로퍼티를 정의하는 기존 방식을 사용하고, 그렇지 않다면 기존의 constructor에서 인스턴스 프로퍼티를 정의하는 방식과 클래스 필드 정의 제안 모두 사용할 수 있다.

[예제 25-02]

class Person {
 name = 'Daniel'
 
 getName = function() { return this.name }
}

const me = new Person()
console.log(me)
console.log(me.getName())

25.7.4 private 필드 정의 제안

[예제 25-03]

class Person {
 #name = ''
 
 constructor(name) {
  //private 필드 정의
  this.#name = name
 }
}


const me = new Person('Daniel')

console.log(me.#name) //불가

25.7.5 static 필드 정의 제안

[예제 25-04]

class MyMath {
 static PI = 22/7
 
 static #num = 10;
 
 static increment() { return ++MyMath.#num }
}

console.log(MyMath.PI)
console.log(MyMath.increment())

 

---

25.8 상속에 의한 클래스 확장

25.8.1 클래스 상속과 생성자 함수 상속

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

[그림 25-02]

[예제 25-05]

class Animal {
 constructor(age, weigt){
  this.age = age;
  this.weight = weight;
 }
 eat() {return 'eat' }
 move() {return 'move' }
}

class Bird extends Animal {
 fly() {return 'fly' }
}

const bir = new Bird(1,5)

[그림 25-03]

 

25.8.2 extends 키워드

상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의한다.

25.8.3 동적 상속

extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수 있다. 단, extends 키워드 앞에는 반드시 클래스가 와야 한다

25.8.4 서브클래스의 constructor

서브클래스에스 constructor를 생략하면 클래스에 아래와 같은 constructor가 암묵적으로 정의된다. args는 new 연산자와 함께 클래스를 호출할 때 전달한 인수의 리스트다.

constructor(...agrs) { super(...args) }

 

25.8.5 super 키워드

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

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

 

[예제 25-06]

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;
 }
}

 

super를 호출

super를 호출할 때 아래처럼 주의해야 한다.

1. 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에는 반드시 super를 호출해야 한다.
2. 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
3. super는 반드시 서브클래스의 constructor에서만 호출한다. 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다.

super를 참조

메서드내에서 super를 참조하여 수퍼클래스의 메서드를 호출할 수 있다.

1. 서브클래스의 프로토타입 메서드 내에서 super.sayHi는 수퍼클래스의 프로토타입 메서드 sayHi를 가리킨다.
2. 서브클래스의 정적 메서드 내에서 super.sayHi는 수퍼클래스의 정적 메서드 sayHi를 가리킨다.
   
   

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

[예제 25-07]

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}`}
 
}


class ColorRectangle extends Rectangle {
 constructor(width, height, color){
  super(width, height);
  this.color = color
 }
 
 toString() {return super.toString() + `color ${this.color}`}
}

[그림 25-04]

1. 서브클래스의 super 호출

 서브 클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스 생성을 위임한다. 이것이 바로 서브클래스의 constructor에서 반드시 super를 호출해야하는 이유다.

 서브 클래스가 new 연산자와 함꼐 호출되면 서브클래스 constructor 내부의 super 키워드가 함수처럼 호출된다. super가 호출되면 수퍼클래스의 constructor(super-constructor)가 호출된다.

2. 수퍼클래스의 인스턴스 생성과 this 바인딩

3. 수퍼클래스의 인스턴스 초기화

4. 서브클래스 consctructor로의 복귀와 this 바인딩

 super의 호출이 종료되고 제어 흐름이 서브클래스 constructor로 돌아온다. 이때 super가 반환한 인스턴스가 this에 바인딩된다. 서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩하여 그대로 사용한다.

5. 서브클래스의 인스턴스 초기화

6. 인스턴스 반환