Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse des von Javascript geliehenen Konstruktors (mit Beispielen)

不言
Freigeben: 2018-10-23 15:49:06
nach vorne
2605 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Analyse von JavaScript-Ausleihkonstruktoren. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Konstruktordiebstahl

Um das Problem der Aufnahme von Referenztypwerten in Prototypen zu lösen, begannen Entwickler, eine Technik namens Konstruktordiebstahl zu verwenden.

Manchmal wird es auch Fake-Objekt oder klassische Vererbung genannt.

Die Grundidee dieser Technik ist sehr einfach, nämlich den Supertyp-Konstruktor innerhalb des Subtyp-Konstruktors aufzurufen.

Eine Funktion ist nichts anderes als ein Objekt, das Code in einer bestimmten Umgebung ausführt. Daher können Konstruktoren auch auf neu erstellten Objekten ausgeführt werden, indem die Methoden apply() und call() verwendet werden.

function SuperType() {
    this.colors = ["red","blue","green"];
}

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push("black");
console.log(instance1.colors); //["red","blue","green","black"]

var instance2 = new SubType();
console.log(instance2.colors); //["red","blue","green"]
Nach dem Login kopieren

Beachten Sie, dass dieser Code den Konstruktor des Supertyps „sekundiert“.

function SubType() {
    //继承了SuperType
    SuperType.call(this);
}
Nach dem Login kopieren

Durch die Verwendung der call()-Methode (oder auch der apply()-Methode) wird der SuperType-Konstruktor tatsächlich im Kontext des zu erstellenden SubType-Instanzobjekts aufgerufen.

Auf diese Weise wird der gesamte in der SuperType()-Funktion definierte Objektinitialisierungscode für das neue SubType-Objekt ausgeführt.

Jedes Instanzobjekt von SubType verfügt also über eine eigene Kopie der Farbeigenschaft

Übergabe von Parametern

relativ zum Prototyp Aufgrund der Verkettung besteht ein großer Vorteil von entlehnten Konstruktoren darin, dass Sie im Subtyp-Konstruktor Parameter an den Supertyp-Konstruktor übergeben können.

function SuperType(name) {
    this.name = name;
}

function SubType(){
    //继承了SuperType,同时还传递了参数
    SuperType.call(this, "Shaw");

    //实例属性
    this.age = 18;
}

var instance = new SubType();

console.log(instance.name); // "Shaw"
console.log(instance.age); // 18
Nach dem Login kopieren

SuperType im obigen Code akzeptiert nur einen Parameternamen, der direkt einem Attribut zugewiesen wird.

Wenn der SuperType-Konstruktor innerhalb des SubType-Konstruktors aufgerufen wird, wird das Namensattribut tatsächlich für das SubType-Instanzobjekt festgelegt (der Zeiger davon bezieht sich auf den Ausführungskontext).

Um sicherzustellen, dass der SuperType-Konstruktor die Eigenschaften des Subtyps nicht überschreibt, können Sie Eigenschaften hinzufügen, die im Subtyp definiert werden sollen, nachdem Sie den Konstruktor des Supertyps aufgerufen haben.

Das Problem des Ausleihens von Konstruktoren

Wenn Sie nur den Konstruktor ausleihen, können Sie die Probleme des Konstruktormusters nicht vermeiden.

Methoden sind alle im Konstruktor definiert und es gibt keine Möglichkeit, Funktionen wiederzuverwenden. Jedes Mal, wenn ein Objekt instanziiert wird, wird die Methode im Wesentlichen für jedes Instanzobjekt neu erstellt, was zu einem Speicher- und Ressourcenverlust führt . Abfall.

Darüber hinaus sind die im Prototyp des Supertyps definierten Methoden auch für den Subtyp unsichtbar (da es hier kein Prototypobjekt gibt, tatsächlich zeigt die Prototypkette des Subtyps auf Object). Das Ergebnis ist Folgendes alle Typen Sie können nur das Konstruktormuster verwenden.

Angesichts dieser Probleme wird die Technik des Ausleihens von Konstruktoren selten allein verwendet.

Das obige ist der detaillierte Inhalt vonAnalyse des von Javascript geliehenen Konstruktors (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage