자바스크립트 클래스 super 키워드 이해하기

 

 

super키워드는 클래스에서 빠질 수 없는 키워드이다.

자바스크립트를 공부하다보면서 느낀건 호출, 참조에 대해서 참 헷갈리게 정리되어있는거 같다.( 나만 이해 못하는거겠지만..)

이 부분만 이해하기 시작하면 어느정도의 동작원리나 코드 명령어의 이해도가 빠르게 높아진다.

객체부터 시작해서 이 사고가 어느정도 진행되는 순간 학습능력이 올라가는거 같다.

 

클래스를 사용하면서 필요한 super키워드를 빠르게 이해해보자.

 

 

super

- super 키워드는 함수처럼 호출할 수 있다.(constructor 내에서)

- this와 같이 식별자처럼 참조할 수 있는 특수한 키워드

* super를 호출하면 수퍼클래스(부모 클래스)의 constructor를 호출

* super를 참조하면 수퍼클래스(부모 클래스)의 메서드를 호출

 

---

super 호출

- 호출을 하게 되면 수퍼클래스의 constructor(super-constructor)를 호출

class Kwak {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

class Tube extends Kwak {
  // 암묵적으로 정의
  // constructor(...args) {
  //   super(...args);
  // }
}

const traveler = new Tube(1, 2);
console.log(traveler);

- new연산자와 함께 서브클래스를 호출하면서 전달한 인수는 모두 서브클래스에 암묵적으로 정의되고 정의된 constructor의 super 호출을 통해서 수퍼클래스의 constructor에 전달

* new연산자 호출(인수 전달) -> 서브클래스 -> 수퍼클래스

 

class Kwak {
  constructor(a, b) { // 4
    this.a = a;
    this.b = b;
  }
}

class Tube extends Kwak {
  constructor(a, b, c) { // 2
    super(a, b); // 3
    this.c = c;
  }
}

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

- 위 순서대로 new연산자로 생성하게 되면 서브클래스 constructor로 접근하고 super키워드를 통해서 슈퍼클래스로 접근한다.

 

- 이와 같이 수퍼클래스에서 추가한 프로퍼티와 서브클래스에서 추가한 프로퍼티를 갖는 인스턴스를 생성한다면 서브클래스에서는 constructor를 생략할 수 없다.

- 수퍼클래스에 전달할 필요가 있는 인수는 super키워드로 전달하게 된다.

 

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

* 서브클래스에서 super를 호출하기 전에는 this를 참조할 수 없다.

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

- 서브클래스가 아닌 클래스의 constructor나 함수에 super를 호출하게 되면 에러 발생

 

 

---

super 참조

- 메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출

class Kwak {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    return `Hi ${this.name}`;
  }
}

class Tube extends Kwak {
  sayHi() {
    return `${super.sayHi()}. how are you"?`;
  }
}

const traveler = new Tube("곽튜브");
console.log(traveler.sayHi()); // Hi 곽튜브. how are you"?

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

- 그 외에도 static(정적 메서드) 내에서 super는 수퍼클래스의 정적 메서드를 가리킨다.

 

---

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

 

서브클래스의 super 호출

- 서브클래스는 자신이 직접 인스턴스를 생성하지 않고, 수퍼클래스에게 인스턴스 생성을 위임

- 서브클래스의 constructor에서 반드시 super를 호출해야하는 이유

 

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

- 수퍼클래스의 constructor 내부의 코드가 실행되기 이전에 암묵적으로 빈 객체를 생성

- 이 빈 객체가 바로 클래스가 생성한 인스턴스

- 수퍼클래스의 constructor 내부의 this는 생성된 인스턴스를 가리킨다.

- 인스턴스를 new.target이 가리키는 서브클래스가 생성한 것으로 처리

 

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

- this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티를 초기화

 

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

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

- 서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩하여 그대로 사용

- super가 호출되지 않으면 인스턴스가 생성되지 않으며, this바인딩도 할 수 없다.

- 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없는 이유