🪁react/바닐라 js 실습

자식 클래스 안에서 부모 클래스의 메소드 호출은 자식 클래스의 메소드 안에서

하얀성 2024. 4. 5. 14:12

 

 

  super 키워드를 사용하여 부모 클래스의 메소드를 호출하려면, 반드시 자식 클래스의 메소드 내에서 이를 수행해야 합니다.

 

자바스크립트에서 super 키워드는 오직 두 곳에서만 사용될 수 있습니다:

  1. 생성자 내부에서, 부모 클래스의 생성자를 호출하기 위해.
  2. 메소드 내부에서, 부모 클래스의 메소드를 호출하기 위해.

 

자바스크립트에서 클래스의 메소드를 정의할 때, 해당 메소드 내부에서만 super를 사용할 수 있습니다. 

 


 

 

호출이 어떤 메소드의 내부나 생성자 내부에서 이루어지지 않고, 클래스의 메소드 정의 영역에서 직접적으로 이루어지려고 하고 있습니다 자바스크립트에서는 이러한 방식으로 부모 클래스의 메소드를 직접 호출할 수 없습니다.

따라서 super.show(); 호출은 유효한 문법이 아니며, 이로 인해 코드가 실행되지 않습니다. 

 

틀린 예시.

import { qs } from "../helpers.js";
import View from "./View.js";

class SearchResultView extends View {
  constructor() {
    super(qs("search-result-view"));

    this.template = new Template();
  }

    super.show(); /// 에러 원인
 
}

class Template {}

올바른 예시.

import { qs } from "../helpers.js";
import View from "./View.js";

class SearchResultView extends View {
  constructor() {
    super(qs("search-result-view"));

    this.template = new Template();
  }
  show() {
    super.show();
  }
}

class Template {}