Schwierigkeiten in JavaScript: Detaillierte Erläuterung von Beispielen für Prototypen- und Konstruktorbindungen

JavaScript-Objekte und Konstruktoren

Definieren Sie ein JavaScript-Objekt wie dieses

var a = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}

Auf diese Weise, Sie Definieren Sie eine Variable a. Zusätzlich zu den beiden öffentlichen Mitgliedern x und y verfügt diese Variable auch über zwei Funktionen (öffentliche Methoden): add und mul. Es gibt jedoch zwei Nachteile dieser Definitionsmethode:

1. Es ist sehr unpraktisch, Objekte in Stapeln zu generieren. Wenn Sie var b=a; wird aufgrund des Referenzmechanismus von JavaScript gleichzeitig geändert.

2 Wenn Sie bei jeder Objektgenerierung einige Mitglieder anpassen müssen, müssen Sie die entsprechende Zuweisungsoperation schreiben und die Anzahl der Zeilen erhöhen von Code.

Bevor wir also ein JavaScript-Objekt definieren, können wir zunächst einen Konstruktor definieren.

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

Dann definieren Sie ein Objekt

a = new A(1, 2);

Der obige Code sieht einfach aus, aber zur Unterscheidung Aus objektorientierten Sprachen wie C++ ist A nicht das Konzept einer „Klasse“ im engeren Sinne, da JavaScript keine Klassen hat, sondern nur den Konstruktor aufruft.

Nun stellt sich die Frage, wie setzen wir die Vererbung um? C++ implementiert klar die drei objektorientierten Merkmale Kapselung, Vererbung und Polymorphismus. Für eine relativ grobe Sprache wie JavaScript gibt es jedoch keinen strikten Vererbungsmechanismus. Stattdessen werden die folgenden Methoden verwendet, um ihn zu simulieren.

JavaScript-Prototyp

Um die spätere Apply- oder Call-Funktion erklären zu können, wird hier der Prototyp vorgestellt. Der Prototyp ist nur für die Funktion verfügbar.

Um die Vererbung gut nutzen zu können, müssen Sie zunächst verstehen, warum die Vererbung konzipiert ist. Es ist nichts weiter als „Extrahieren gemeinsamer Teile“, um eine Wiederverwendung des Codes zu erreichen.

In JavaScript werden die öffentlichen Teile also auch im Prototyp von Function platziert.

Vergleichen wir zwei Beispiele für die Verwendung von Prototypen zur Implementierung der Vererbung

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x,y){
	
}

B.prototype=new A(1,2);

console.log(new B(3,4).add());　　//3

In diesem Beispiel zeigt der Prototyp der Unterklasse auf ein Klasse-A-Objekt

Lassen Sie uns ein weiteres Beispiel für die Erbschaft von A durch B implementieren:

function A() {
	
}

A.prototype = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}
A.prototype.constructor=A;

function B(){
	
}

B.prototype=A.prototype;
B.prototype.constructor=B;

Das Prototypobjekt von B verweist auf das Prototypobjekt von A, da es sich um eine Referenz handelt, also wenn Wann Das Prototypobjekt von B wird geändert, und das Prototypobjekt von A wird ebenfalls geändert, da sie im Wesentlichen alle auf einen Speicherbereich verweisen. Daher müssen Sie jedes Mal, wenn Sie den Prototyp vom Typ B ändern, den Konstruktor manuell zurücksetzen, um Verwirrung zu vermeiden. Im Vergleich zu den beiden Beispielen tritt dieses Problem im vorherigen Beispiel nicht auf, da keine Referenz vorhanden ist.

Erstellen Sie ein Objekt vom Typ B

b=new B();

Das b-Objekt hat alle Mitglieder vom Typ A

console.log(b.add());  //3

Da jedes Prototypobjekt zwei wichtige Mitglieder hat: Konstruktor und _proto_, ist der Konstruktor im Wesentlichen ein Funktionszeiger. Nachdem B.prototype=A.prototype ausgeführt wurde, wird der Konstruktor überschrieben, sodass wir dies tun müssen Konstruktor-Repoint auf den Konstruktor vom Typ B.

JavaScript-Konstruktorbindung

Nachdem Sie einen Konstruktor vom Typ A definiert haben, definieren Sie einen Typ B und dann innerhalb des Konstruktors vom Typ B den Konstruktor „Eingebettete Ausführung“ vom Typ A .

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x, y, z) {
	A.apply(this, arguments);
	this.z = z;
}

console.log(new B(1,2,3));

Die Apply-Funktion ist grundsätzlich dieselbe wie die Call-Funktion, und der Konstruktor vom Typ A kann innerhalb des Konstruktors vom Typ B ausgeführt werden. Gleichzeitig können Sie auch alle Mitglieder von A erben.

Ergebnisse anzeigen:

Hier ist eine Formel: Schreiben Sie A.apply(this) in den B-Konstruktor, damit das von B konstruierte Objekt Has alle Mitglieder im A-Konstruktor.

Beim Bewerben und Aufrufen kann auch eine Mehrfachvererbung erreicht werden

function IA(){
	this.walk=function(){
		console.log("walk");
	}
}

function IB(){
	this.run=function(){
		console.log("run");
	}
}

function Person(){
	IA.apply(this);
	IB.apply(this);
}

var p=new Person();
p.walk();　　//walk    
p.run();　　//run

Das obige ist der detaillierte Inhalt vonSchwierigkeiten in JavaScript: Detaillierte Erläuterung von Beispielen für Prototypen- und Konstruktorbindungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!