Implementierungsprinzipien von ES6-Klassen und Vererbung (Codebeispiele)

In diesem Artikel geht es um die Implementierungsprinzipien (Codebeispiele) von ES6-Klassen und um die Vererbung. Freunde in Not können sich darauf beziehen.

1. Es6-Klasse verwendet

Javascript verwendet die Prototypenvererbung.
es6 ist eine syntaktische Vererbung wie objektorientierte Vererbung.

class Parent {
  constructor(a){
    this.filed1 = a;
  }
  filed2 = 2;
  func1 = function(){}
}

class Child extends Parent {
    constructor(a,b) {
      super(a);
      this.filed3 = b;
    }
  
  filed4 = 1;
  func2 = function(){}
}

Lassen Sie uns Babel verwenden, um die Implementierungsprinzipien von es6-Klassen und der Vererbung zu erkunden.

1. Klassenimplementierung

Vor der Konvertierung:

class Parent {
  constructor(a){
    this.filed1 = a;
  }
  filed2 = 2;
  func1 = function(){}
}

Nach der Konvertierung:

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Parent = function Parent(a) {
  _classCallCheck(this, Parent);

  this.filed2 = 2;

  this.func1 = function () { };

  this.filed1 = a;
};

Es ist ersichtlich, dass die unterste Ebene der Klasse immer noch der Konstruktor ist :

1. Rufen Sie die Methode _classCallCheck auf, um festzustellen, ob vor dem aktuellen Funktionsaufruf ein neues Schlüsselwort vorhanden ist.

Mit dem neuen Schlüsselwort vor der Ausführung des Konstruktors wird ein leeres Objekt innerhalb des Konstruktors erstellt, der Proptype des Konstruktors zeigt auf das _Proto_ dieses leeren Objekts und dieses zeigt auf dieses leeres Objekt. Wie oben gibt in _classCallCheck: diese Instanz von Parent „true“ zurück.

Wenn vor dem Konstruktor kein new steht, erscheint der Proptype des Konstruktors nicht in der Prototypenkette davon und es wird false zurückgegeben.

2. Weisen Sie diesem die Variablen und Funktionen innerhalb der Klasse zu.

3. Führen Sie die Logik innerhalb des Konstruktors aus .

4.Gib dies zurück (der Konstruktor wird standardmäßig am Ende ausgeführt).

2. Vererbungsimplementierung

Vor der Konvertierung:

class Child extends Parent {
    constructor(a,b) {
      super(a);
      this.filed3 = b;
    }
  
  filed4 = 1;
  func2 = function(){}
}

Nach der Konvertierung:

Schauen wir uns zuerst die interne Implementierung von Child an und dann Sehen Sie sich die internen Aufrufe an. So implementieren Sie die Funktion:

var Child = function (_Parent) {
  _inherits(Child, _Parent);

  function Child(a, b) {
    _classCallCheck(this, Child);

    var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, a));

    _this.filed4 = 1;

    _this.func2 = function () {};

    _this.filed3 = b;
    return _this;
  }

  return Child;
}(Parent);

1. Rufen Sie die Funktion _inherits auf, um den Proptype der übergeordneten Klasse zu erben.

_inherits interne Implementierung:

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { value: subClass, enumerable: false, writable: true, configurable: true }
  });
  if (superClass)
    Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

(1) Überprüfen Sie den übergeordneten Konstruktor.

(2) Typische parasitäre Vererbung: Erstellen Sie ein leeres Objekt mit dem Proptype des Konstruktors der übergeordneten Klasse und verweisen Sie dieses Objekt auf den Proptype des Konstruktors der Unterklasse.

(3) Richten Sie den übergeordneten Konstruktor auf das _Proto_ des untergeordneten Konstruktors (es ist nicht klar, was dieser Schritt bewirkt, und er fühlt sich bedeutungslos an.)

2 Das Paket speichert die Referenz der übergeordneten Klasse und führt die Konstruktionslogik der Unterklasse innerhalb des Abschlusses aus.

3.neuer Scheck.

4. Verwenden Sie das aktuelle this, um den Konstruktor der übergeordneten Klasse aufzurufen.

var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, a));

Der Child.__proto__ hier ||. Object.getPrototypeOf(Child) ist eigentlich der übergeordnete Konstruktor (die letzte Operation von _inherits) und ändert dann seinen Aufrufer in den aktuellen Parameter this through call and past . (Ich habe das Gefühl, dass Sie die hier direkt übergebene übergeordnete Klasse verwenden können.)

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

Überprüfen Sie, ob dies initialisiert wurde, ob super aufgerufen wurde, und geben Sie dies zurück, das von der übergeordneten Klasse zugewiesen wurde.

5. Weisen Sie dieser die Variablen und Funktionen innerhalb der Zeilenunterklasse zu.

6. Führen Sie die Logik innerhalb des Unterklassenkonstruktors aus.

Es ist ersichtlich, dass es6 uns tatsächlich eine einfache Möglichkeit bietet, „kombinierte parasitäre Vererbung“ zu schreiben.

3. super

super repräsentiert den Konstruktor der übergeordneten Klasse.

super.fun1() entspricht Parent.fun1() oder Parent.prototype.fun1().

super() entspricht Parent.prototype.construtor()

Wenn wir keinen Unterklassenkonstruktor schreiben:

var Child = function (_Parent) {
  _inherits(Child, _Parent);

  function Child() {
    _classCallCheck(this, Child);

    return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).apply(this, arguments));
  }

  return Child;
}(Parent);

Es ist ersichtlich, dass der Standardkonstruktor dies tut aktiv aufgerufen werden Der Konstruktor der übergeordneten Klasse, und standardmäßig werden die vom aktuellen Konstruktor übergebenen Parameter an die übergeordnete Klasse übergeben.

Wenn wir also den Konstruktor deklarieren, müssen wir super() aktiv aufrufen, sonst kann der übergeordnete Konstruktor nicht aufgerufen werden und die Vererbung kann nicht abgeschlossen werden.

Ein typisches Beispiel ist die Komponente von Reatc. Wir müssen super(props) aufrufen, nachdem wir den Konstruktor deklariert haben, da die übergeordnete Klasse einige Initialisierungsoperationen für Requisiten im Konstruktor durchführen muss.

Das obige ist der detaillierte Inhalt vonImplementierungsprinzipien von ES6-Klassen und Vererbung (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!