js 검색폼 만들기(1)[super는 속성 초기화 , this는 자기자신을 의미]

 

 

class View {
  constructor(element) {
    // ... 부모 클래스 생성자의 코드
  }
}

class SearchFormView extends View {
  constructor() {
    super(qs("#search-form-view")); // View 클래스의 생성자 호출
    // ... 자식 클래스 생성자의 추가 코드
  }
}

 

super는 상속받은 부모 클래스의 생성자를 호출한다.

그것을 통해 자식에서 부른 요소를 부모를 통해 가공해서 저장한 뒤, 부모에서 정의한 변수나 함수를

사용할 수 있도록 해준다.

 

export default class View {

  constructor(element) {

    console.log(tag, "constructor");

    if (!element) throw "no element";

    this.element = element;

    this.originalDisplay = this.element.style.dispaly || "";

    return this;

  }

element 요소를 받아서 초기화.

ㅡ> 이 this는 자기 자신 즉, View를 의미한다.

 

export default class SearchFormView extends View {

  constructor() {

    console.log(tag, "constructor");

    super(qs("#search-form-view"));

    this.inputElement = qs("[type=text]", this.element);

    this.resetElement = qs("[type=reset]", this.element);

    this.showResetButton(false);

    this.bindEvent()

  }

 

SearchFormView 클래스에서 this.element를 사용할 때, this는 SearchFormView 클래스의 인스턴스를 가리킵니다. JavaScript에서 클래스 상속 구조를 이해할 때 중요한 점은, 

 

자식 클래스의 인스턴스가 부모 클래스의 '속성'과 '메서드'를 상속받는다는 것입니다. 

JavaScript에서 클래스 상속 구조에서 언급되는 "속성"은 부모 클래스에서 정의된 변수들을 말합니다. 이러한 속성들은 자식 클래스에서 상속받아 사용할 수 있습니다.

---

<소스 코드 순서대로 설명. >

SearchFormView의 생성자에서 super(qs("#search-form-view"));를 호출함으로써, View 클래스의 생성자가 실행됩니다. 이 때, View의 생성자에 qs("#search-form-view")의 결과 (즉, 특정 DOM 요소)가 전달되어 this.element에 할당됩니다.

 

이후 SearchFormView 클래스의 인스턴스에서 this.element에 접근하면, 실제로 접근하는 것은 View 클래스의 생성자에서 설정된 element 속성입니다.

즉, SearchFormView 인스턴스의 this는 자기 자신을 가리키지만, this.element는 상속받은 View 클래스의 element 속성에 접근하는 것입니다.

 

결론적으로, SearchFormView의 this.element에서 this는 SearchFormView 인스턴스를 의미하며, element는 상속받은 View 클래스에서 정의되고 초기화된 속성을 참조합니다.

 

 

---

<요약>

 

this들은 모두 그 클래스 안의 자기자신을 말하지만.

1.extends 통해 부모 속성값을 쓸수 있게 되며

2.이후 element는 super를 통해 값을 초기화해서 원하는 모양으로 사용.

 

이를 통해 그 부모의 초기화된 속성을 자식 클래스에서 그대로 선언없이 사용할 수 있게됨.