[javascript] super의 역할

super의 역할 1 : 상위 객체의 프로토타입을 참조

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

class A extends B{
    sayA(){
        super.sayB();
    }
}

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

super는 자신을 참조한 메소드(sayHello)가 바인딩하는 객체(A.prototype)의 프로토타입(B.prototype)을 가리킨다.

(A.prototype의 프로토타입객체는 B.prototype이다.)

 

위의 문장이 이해가 안가면 아래를 보고 오자

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

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

 

super는 상위 객체를 찾기 위해 [[HomeObject]]라는 내부 슬롯을 갖는다.

 

[[HomeObject]]는 자신을 바인딩하고 있는 객체(A.prototype)을 가리킨다. => 그 객체의 프로토타입(B.prototype)을 찾을 수 있다. 이를 통해 sayA메소드 내부의 super가 B.prototype으로 결정된다.

 

super는 클래스의 전유물은 아니다. 객체 리터럴에서도, 메서드 축약표현으로 정의된 함수라면 가능하다.

 

메서드 축약표현은 ES6에서 아래와 같은 방법을 말한다. function을 쓰지 않고 축약하여 썼다. 

const obj = {
	sayA(){
    	console.log("a")
    }
}

obj.sayA(); //'a'

메서드 축약 표현으로 정의된 함수만이 [[HomeObject]]를 갖는다.

class에서는 기본적으로 메서드 축약 표현을 사용하여 프로토타입의 메서드를 쓴다. 따라서 super를 쓸 수 있는 것이다.

 

 

super의 역할 2 :  수퍼클래스의 constructor를 실행

class를 extends받아서 생성할 때 constructor에서는 반드시 super()를 호출해주어야 한다.

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

class A extends B{
   constructor(){
       suepr()
   }
    sayA(){
        console.dir(super.sayB);
    }
}

const a = new A();
a.sayA();

 

constructor를 쓰지 않으면 자동으로 생성된다.

class B{
    //constructor를 쓰지 않으면 자동으로 생성된다.
    // constructor() {
    // }
    sayB(){
        console.log("b");
    }
}

class A extends B{
    // constructor(args) {
    //     super(...args)
    // }
    sayA(){
        console.dir(super.sayB);
    }
}

const a = new A();
a.sayA();

 

super()를 호출해 주기 전에는 this를 사용할 수 없다.

class A extends B{
   constructor(){
       this.a = "hello" //에러
       suepr()
   }
    sayA(){
        console.dir(super.sayB);
    }
}