25장 클래스 (모던 자바스크립트 Deep Dive)

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780

---

call, apply

getPrototypeof // 프로토타입 체인상에 있는 바로 처음 만나는 프로토타입

 

this instanceof 클래스 // 체인

 

new 클래스() 이지만, 클래스는 생성자 함수와 같다

'클래스'를 작성하긴 하지만, 모든것은 prototype체인상에 존재한다. (정적 프로퍼티 ?)

 

this를 고려할 때, 클래스이지만 클래스.prototype를 동시에 생각해야 한다. (또, 클래스.prototype.메서드)

기본적으로 클래스의 프로토타입이 동시에 생성된다.

Base와 Base.prototype

Derived와 Derived.prototype

어떤 메서드가 어떤 객체(클래스.prototype)에 바인딩 되어있는지 확인

 

 

클래스는 생성자 함수이다. 

생성자함수.prototype

인스턴스 생성 과정

★★★반드시 super 호출을 전제로 한다★★★

 

수퍼 클래스에서 constructor가 인스턴스를 생성하기 때문.
서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유!

 

인스턴스의 프로토타입은 new.target인데, 이것은 서브클래스의 prototype 프로퍼티가 가리키는 객체

 

super가 인스턴스 반환, 
서브클래스의 constructor에서 this에 바인딩

 

Base 클래스		Base.prototype
↑ [[Prototype]] ↑		↑ [[Prototype]] ↑
Derived 클래스		Derived.prototype
		↑ [[Prototype]] ↑
		인스턴스

수퍼클래스의 constructor에서 초기화된 이후 서브클래스의 constructor에서 다시 초기화 되나?

 

수퍼클래스가 있고 서브클래스가 있을 때, 서브클래스의 메서드로 반환된 인스턴스는 서브클래스 타입. (수퍼클래스.prototype.메서드에 의해 생성되었다고 하더라도)

=> 서브클래스는 수퍼클래스의 모든 프로퍼티와 메서드를 상속받기 때문에, 서브클래스에서 생성된 인스턴스 역시 수퍼클래스에서 생성된 인스턴스와 동일한 프로퍼티와 메서드를 가지고 있기 때문?

---

25.8 상속에 의한 클래스 확장

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

프로토타입 기반 상속	클래스
프로토타입 체인을 통해 상속	상속에 의한 클래스 확장 기존 클래스를 상속 → 새로운 클래스 확장

extends 키워드

생성자 함수 → 클래스 흉내 (X)

클래스 상속 → 상속에 의한 클래스 확장 흉내 (X)

 

25.8.2 extends 키워드

=> 수퍼 클래스와 서브 클래스간의 상속 관계를 설정하는 것: 프로토타입을 통해 상속관계 구현

수퍼 클래스(상속된 클래스) == 베이스 클래스, 부모 클래스

서브 클래스(확장된 클래스) == 파생 클래스, 자식 클래스

class Base {}

class Derived extends Base {}

 

Base 클래스		Base.prototype
↑ [[Prototype]] ↑		↑ [[Prototype]] ↑
Derived 클래스		Derived.prototype

클래스의 프로토타입 체인

인스턴스의 프로토타입 체인

프로토타입 메서드 뿐만 아니라,

정적 메서드도 상속이 가능

 

25.8.3 동적 상속

extends 키워드: 생성자 함수를 상속받아 클래스를 확장 가능

class 서브클래스 extends 생성자 함수 형태로 사용

function Base1() {}

class Base2 {}

let condition = true;

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

25.8.4 서브클래스의 constructor

클래스에서 constructor 생략시 비어있는 constructor() {} 가 암묵적으로 정의

 

args: new 연산자와 함께 호출할 때 전달할 인수의 리스트

 

25.8.5 super 키워드

● 수퍼클래스의 constructor 호출

● 수퍼클래스 메서드 호출 가능

 

super 호출시 주의사항

1. 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super호출!

=> 서브클래스에서 constructor를 사용하는 경우, 서브클래스의 constructor에서는 반드시 super호출!

 

2. 서브클래스의 constructor에서 super를 호출해야만, 그 이후에 this를 참조 가능!

class Base {}

class Derived extends Base {
    constructor(){
        super();
        this.a = 1;
    }
}

3. super는 반드시 서브클래스의 constructor에서만 호출.

super 참조

super.메서드 : 수퍼클래스의 프로토타입 메서드를 가리킴

 

 

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

(1) 서브클래스의 super 호출

서브클래스가 인스턴스를 생성하지 않는다

=> 수퍼클래스가 인스턴스를 생성한다. (서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유!)

 

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

수퍼클래스의 constructor 내부 코드 실행 전에, 암묵적으로 빈 객체 생성==인스턴스

인스턴스는 this에 바인딩

수퍼클래스의 constructor 코드 내부의 this는 인스턴스를 가리킴
new.target은 서브클래스를 가리킨다

 

인스턴스의 프로토타입은 new.target인데, 이것은 서브클래스의 prototype 프로퍼티가 가리키는 객체

Base 클래스		Base.prototype
↑ [[Prototype]] ↑		↑ [[Prototype]] ↑
Derived 클래스		Derived.prototype
		↑ [[Prototype]] ↑
		인스턴스

 

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

수퍼클래스의 constructor 실행, this에 바인딩된 인스턴스를 초기화.

this에 바인딩된 인스턴스에

(1) 프로퍼티를 추가

(2) 프로퍼티를 초기화(전달받은 인수로)

 

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

super호출 종료, 서브클래스의 constructor로 제어 흐름이 돌아옴

super가 반환한 인스턴스가 this에 바인딩.

서브클래스는 별도의 인스턴스를 생성하지 않고 super에서 반환된 인스턴스를 this에 바인딩

 

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

인스턴스에 프로퍼티 추가, 전달받은 인수로 프로퍼티를 초기화

 

6. 인스턴스 반환

this을 암묵적 반환 (인스턴스)

 

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