> 웹 프론트엔드 > 프런트엔드 Q&A > ES6의 클래스 상속에서 super를 호출해야 하는 이유는 무엇입니까?

ES6의 클래스 상속에서 super를 호출해야 하는 이유는 무엇입니까?

青灯夜游
풀어 주다: 2022-10-20 17:36:43
원래의
1243명이 탐색했습니다.

이유: 파생 생성자는 새로운 this 개체를 생성하지 않습니다. 즉, 하위 클래스는 super()를 통해 기본 클래스(상위 클래스)에서 생성된 this 개체 후에만 자체 this 개체를 갖지 않습니다. 기본 클래스와 마찬가지로 클래스도 이를 사용하여 객체 속성을 생성합니다.

ES6의 클래스 상속에서 super를 호출해야 하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6 클래스 상속을 배울 때 자주 언급되는 핵심 포인트

하위 클래스 SubClass가 상위 클래스 SuperClass의 생성자 생성자를 상속할 때 두 가지 요구 사항이 있습니다.

  • 1) 생성자에서 Super()를 호출해야 합니다.

  • 2) super() 뒤에 써야 합니다.

첫 번째 포인트는 상위 클래스와 하위 클래스 간의 모호성을 해결하고,

"하위 클래스는 자신의 this>를 갖지 않습니다."this”这一概念

子类和父类是个相对的概念,因为一个类可以既是子类也是父类,所以ES6里用的是绝对的概念:基类和派生类。而且这个概念是针对所有构造函数说的,JS 里的构造函数要么是基的,要么就是派生的。

ES6中,我们随手写的构造函数(function)都是基类,基类可以直接用this来指向调用它所在方法的对象。

咱自己给this总结了一句话:谁调用了this,this就指向谁。

        function Super(name) {
            this.name = name;
            SuperFactory.prototype.sayHi = function () {
                console.log("Hi");
            }
        }
 
       let super = new Super("peter");//通过new创建了新的对象,Super()中的this即指向这个对象
로그인 후 복사

ES6中的派生类,就是extend的class。派生出的构造函数不会创造新的<span style="background-color:#ffd900;">this</span>对象<span style="background-color:#ffd900;">(或者说this指向的对象</span>(这里可以回顾一下new关键字做的事情),就是所说的"子类没有自己的this"。只有通过<span style="background-color:#ffd900;">super()</span>하위 클래스의 개념을 결정하는 것입니다. 상위 클래스는 상대적인 개념입니다. 클래스는 하위 클래스이자 상위 클래스일 수 있기 때문에 ES6에서는 기본 클래스와 파생 클래스라는 절대적인 개념을 사용합니다. 그리고 이 개념은 모든 생성자에 적용됩니다. JS의 생성자는 기본이거나 파생됩니다.

ES6에서 우리가 가볍게 작성하는 생성자(함수)는 모두 기본 클래스입니다. 기본 클래스는 이를 직접 사용하여 해당 메서드를 호출하는 객체를 가리킬 수 있습니다.

우리는 이것을 다음과 같이 요약했습니다: 누가 이것을 부르든 이것은 가리킬 것입니다.

 class SuperClass {                //基类 not父类
    constructor(name) {
        this.name = name;
        }
     sayHi() {
        console.log("Hi");
        }
    };
 
class SubClass extends SuperClass {//派生类 not子类
    constructor(name,age) {
                surpe(name);
                this.age = age;
            }
    sayNo() {
        console.log("NO");
        }
    };
        
let subinst = new subClass(&#39;tom&#39;,18);
subinst.sayHi();//Hi
subinst.sayNo();//NO
로그인 후 복사

ES6의 파생 클래스는 확장 클래스입니다.

파생 생성자는 new

<p>this</p>

object<span style="background-color:#ffd900;">(또는 this가 가리키는 객체</span>< / code></strong>(여기서 새로운 키워드가 <span style="color:#0d0016;"><code>)

의 역할을 검토할 수 있습니다. 이는 소위 "서브클래스에 자체 this가 없습니다"라는 것입니다.

기본 클래스에 의해 생성된 this 개체에 </a>super()<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">를 전달해야만 파생 클래스가 이를 사용하여 기본 클래스

class Person {
  constructor(name) {
    this.name = name;
  }
}
 
class PolitePerson extends Person {
  constructor(name) {
    this.greetColleagues(); // 这里不允许我们使用this,下面解释
    super(name);
  }
  greetColleagues() {
    alert(&#39;Good morning folks!&#39;);
  }
}
로그인 후 복사
🎜와 같은 개체의 속성을 생성할 수 있습니다. 그렇다면 코드 트랩을 피하기 위해 super() 뒤에 작성해야 하는 이유는 무엇입니까? 🎜
greetColleagues() {
    alert(&#39;Good morning folks!&#39;);
    alert(&#39;My name is &#39; + this.name + &#39;, nice to meet you!&#39;);
  }
로그인 후 복사
🎜위의 예에서는 super()를 호출하기 전에 이것이 허용된다고 가정합니다. 잠시 후 몇 가지 요구 사항을 충족하기 위해 다음을 추가합니다. 🎜그러나 super()가 호출되기 전에는 this.greetColleagues()가 전혀 정의되지 않았으며, 이와 같은 코드에서는 오류가 발생할지 생각하기 어려울 수 있습니다. 🎜🎜그래서 이를 방지하기 위해 🎜🎜JavaScript는 생성자에서 이것을 사용하기 전에 super를 호출하도록 강제합니다. 🎜🎜🎜🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜프로그래밍 비디오🎜]🎜

위 내용은 ES6의 클래스 상속에서 super를 호출해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿