In den technischen Artikeln von Alibaba wird die Implementierung des Javascript-Vererbungsmechanismus beschrieben. Javascript-Fähigkeiten

Als Skriptsprache wurde Javascript nicht im Hinblick auf objektorientierte Funktionen entwickelt. Selbst im Zeitalter moderner Browser und verschiedener Javascript-Frameworks/-Bibliotheken, die nach einem Regen wie Pilze aus dem Boden schießen, gibt es in Javascript nicht einmal ein Klassenschlüsselwort. Wenn Sie eine Klasse schreiben möchten, müssen Sie Funktionen verwenden, was Vererbung, Überladung usw. betrifft.

Aber wie können wir ohne Erbschaft leben? Sollten wir die gesamte gemeinsame Logik kopieren, um die niedrigste Ebene der Code-Wiederverwendung zu erreichen?

Die Antwort lautet natürlich: NEIN, also müssen wir die Vererbung selbst umsetzen!

Ziel

Das wichtigste Ziel ist natürlich die Vererbung – die Unterklasse verfügt automatisch über alle öffentlichen Eigenschaften und Methoden der übergeordneten Klasse.

Unterstützen Sie die Instanz von C. Wenn beispielsweise c eine Instanz einer Unterklasse und P eine übergeordnete Klasse ist, sollte die Instanz von P „true“ zurückgeben.

Zweitens sollten Sie in der Lage sein, die Methoden der übergeordneten Klasse zu überschreiben (Override), und in den Methoden der Unterklasse können Sie problemlos die gleichnamige Methode der übergeordneten Klasse aufrufen.

Was die Überladung betrifft, kann sie aufgrund der Spracheigenschaften von Javascript (es können keine Methoden mit demselben Namen verwendet werden, auch wenn ihre Parameterlisten unterschiedlich sind) nicht implementiert werden.

Design und Implementierung

Javascript-Objekte haben ein sehr wichtiges Attribut – __proto__, das der Prototyp ist. Ein Prototyp ist im Wesentlichen ein Objekt, daher kann er auch einen eigenen Prototyp haben und so eine Prototypenkette bilden. Wenn Sie eine Methode eines Objekts aufrufen oder eine Eigenschaft des Objekts lesen, führt der Javascript-Executor Folgendes aus:

1. Suchen Sie zunächst nach der entsprechenden Methode oder dem entsprechenden Attribut im Objekt. Wenn es nicht gefunden werden kann,
2. Suchen Sie den Prototyp des Objekts. Wenn Sie ihn immer noch nicht finden können,
3. Suchen Sie
im Prototyp des Prototyps 4....
5. Bis der Prototyp von Object endlich gefunden ist, falls noch nicht vorhanden, undefiniert zurückgeben
Wie unten gezeigt:

Diese Funktion der Prototypkette ist der Vererbung sehr ähnlich, daher können wir sie natürlich zur Implementierung des Vererbungsmechanismus verwenden. Die Unterstützung der Prototypenkette für „instanceof“ macht sie zu einer guten Wahl.

Wir definieren die Erweiterungsfunktion. Diese Funktion akzeptiert zwei Parameter, der erste ist die übergeordnete Klasse und der zweite ist die Unterklasse, wie unten gezeigt:

function extend(ParentClass, ChildClass) {
  ...
  return ChildClass;
}

Diese Funktion verarbeitet die Unterklasse und gibt die Unterklasse zurück. Die Verarbeitungslogik lautet wie folgt:

Etablieren Sie eine Prototypenkette

Durch die Verbindung der Prototypenkette der Unterklasse mit der Prototypenkette der übergeordneten Klasse kann die Unterklasse automatisch über die Methoden und Eigenschaften der übergeordneten Klasse verfügen:

var pp = ParentClass.prototype,
  cp = ChildClass.prototype;
function T() {};
T.prototype = pp;
ChildClass.prototype = new T();

Um die Prototypkette zu verbinden, müssen Sie eine Instanz der übergeordneten Klasse erstellen und diese der Prototypeigenschaft der untergeordneten Klasse zuweisen. Da wir die übergeordnete Klasse jedoch nicht in der Erweiterungsmethode instanziieren möchten, führen wir eine Zwischenklasse T ein, um dieses Problem zu lösen.

Rewriting implementieren

Nachdem die Prototypenkette eingerichtet ist, müssen wir auch die Methoden und Attribute des ursprünglichen Unterklassenprototyps beibehalten:

Methode

Wenn die übergeordnete Klasse eine Methode mit demselben Namen hat, verwenden wir einen Abschluss, um Verweise auf die Methode der übergeordneten Klasse und die Methode der untergeordneten Klasse beizubehalten. Ändern Sie dann den Verweis auf die Methode im neuen Prototyp so, dass er auf eine neue Funktion verweist. In dieser Funktion erstellen wir ein temporäres Attribut super, verweisen es auf die Methode der übergeordneten Klasse und rufen die Methode der untergeordneten Klasse auf, sodass in der Methode der untergeordneten Klasse die Methode der übergeordneten Klasse über this.super aufgerufen werden kann:

ChildClass.prototype[name] = (function(pm, cm) {
  return function() {
    var _super = this.super;
    this.super = pm;
    var result = cm.apply(this, arguments);
    this.super = _super;
    return result;
  };
})(pp[name], cp[name]);

Attribute

Bei Attributen gibt es kein Problem des Überschreibens. Fügen Sie daher einfach die Attribute im ursprünglichen Prototyp der Unterklasse zum neuen Prototyp hinzu:

ChildClass.prototype[name] = cp[name];

Konstrukteur

Um der Unterklasse den Zugriff auf den Konstruktor der übergeordneten Klasse zu ermöglichen, weisen wir die übergeordnete Klasse dem Superattribut der Unterklasse zu:

ChildClass.super = ParentClass;

Anwendung

Angenommen, wir möchten ein Managementsystem entwerfen, das Kunden, Mitarbeiter, Manager usw. einbezieht. Indem wir die Gemeinsamkeiten zwischen Kunden und Mitarbeitern abstrahieren, erhalten wir Menschen; indem wir die Gemeinsamkeiten zwischen Arbeitern und Managern abstrahieren, erhalten wir Mitarbeiter. Auf diese Weise erhalten wir die dreistufige Klassenstruktur:

Der Code zur Implementierung dieses Designs lautet wie folgt:

function People(firstname, lastname) {
  this.firstname = firstname;
  this.lastname = lastname;
}

function Employee(firstname, lastname, company) {
  Employee.super.apply(this, arguments);
  this.company = company;
}

function Manager(firstname, lastname, company, title) {
  Manager.super.apply(this, arguments);
  this.title = title;
}

Wir möchten, dass für jede Person der Name des Mitarbeiters steht und der Name des Unternehmens hinter dem Namen des Managers steht. Der Code lautet wie folgt:

People.prototype.summary = function() {
  return this.firstname + " " + this.lastname;
};

Employee.prototype.summary = function() {
  return this.super.call(this) + ", " + this.company;
};

Manager.prototype.summary = function() {
  return this.super.call(this) + ", " + this.title;
};

Nachdem alle Mitgliedsmethoden definiert wurden, deklarieren Sie die Vererbung der Klasse (Sie müssen zuerst die Methode definieren und dann die Vererbung der Klasse deklarieren, andernfalls können Sie this.super nicht in der Methode verwenden, um die Methode der übergeordneten Klasse aufzurufen !):

extend(People, Employee);
extend(Employee, Manager);

Die Verwendung dieser Klassen ist relativ einfach. Verwenden Sie einfach new:

var people = new People("Alice", "Dickens");
var employee = new Employee("Bob", "Ray", "Alibaba");
var manager = new Manager("Calvin", "Klein", "Alibaba", "Senior Manager");
console.log( people.summary() ); //Alice Dickens
console.log( employee.summary() ); //Bob Ray, Alibaba
console.log( manager.summary() ); //Calvin Klein, Alibaba, Senior Manager

Dieser Artikel ist gut, also gib ihm ein „Gefällt mir“!