[javascript] 상속, class, extends키워드

javascript에서는 calss와 extends를 이용하여 상속을 구현할 수 있다.

class B{
}

class A extends B{
}

이때 extends뒤에 오는 것은 [[construct]] 내부 슬롯이 있는 constructor만 가능하다.

따라서 아래와 같은 코드도 가능하다.

function B(){
}

class A extends B(){
}

 

내부슬롯 [[construct]]에 대한 설명은 아래를 참고

2022.04.05 - [javascript] - [javascript] 생성자 함수, 내부 슬롯 [[Construct]]

[javascript] 생성자 함수, 내부 슬롯 [[Construct]]

 

extends를 하는 순간 아래와 같이 prototype끼리의 [[prototype]] 연결이 생성된다.

 

class A의 프로토타입 객체는 class B를 가리키고

A.prototype의 프로토타입객체는, 프로토타입 객체로 B.prototype의 프로토타입 객체를 가리킨다.

 

(A.prototype.constructor와 B.prototype.constructor는 class에서 명시적으로 constructor를 써주지 않으면, 자동으로 생성되기 때문에 존재하는 것이다.)

 

실제로 A의 [[prototype]]을 살펴보면 B객체가 들어가 있는 것을 볼 수 있다.

class B{

}

class A extends B{

}

console.dir(A);

마찬가지로 A.prototype의 [[prototype]]에는 B.prototype이 가리키는 객체가 있는 것을 볼 수 있다.

 

이제 new A로 인스턴스를 생성하면 A.prototype을 프로토타입으로 갖는 객체가 생성된다.

const a = new A();

a는 A.prototype, B.prototype에 모두 연결되었기 때문에, 이 체이닝에 의해 A와 B의 메소드를 모두 사용할 수 있다.

class B{
    sayB(){
        console.log("b");
    }
}

class A extends B{
    sayA(){
        console.log("A");
    }
}

const a = new A();
a.sayA(); //a
a.sayB(); //b

 

그런데 이렇게 상속받은 객체를 new로 생성하는 것의 과정과,

상속받지 않은 객체(B)를 new로 생성하는 것의 과정은 다르다.

여기에서 서브 클래스에서 constructor에 반드시 super()를 호출해주어야 하는 이유가 나온다.

 

이것에 대해서는 다음에 포스팅 하겠다.