Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Prototypeigenschaften und Methodeninstanzen der JavaScript-Prototypkette

伊谢尔伦
Freigeben: 2017-07-25 16:04:39
Original
1859 Leute haben es durchsucht

Alle Eigenschaften und Methoden des Prototypobjekts werden an alle Instanzen dieser Klasse übergeben. Die Prototypkette verwendet diese Funktion, um den Vererbungsmechanismus zu implementieren. Wenn Sie die Klassen in den vorherigen Beispielen mithilfe von Prototypmethoden neu definieren, werden sie zu den folgenden Formen:

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
Nach dem Login kopieren

Die Magie von die Prototyp-Methode befindet sich in der letzten Codezeile. Legen Sie hier die Prototypeigenschaft von ClassB auf eine Instanz von ClassA fest. Das ist interessant, weil Sie alle Eigenschaften und Methoden von ClassA benötigen, diese aber nicht einzeln zur Prototypeigenschaft von ClassB hinzufügen möchten. Gibt es eine bessere Möglichkeit, als der Prototypeigenschaft eine Instanz von ClassA zuzuweisen?

Hinweis: Rufen Sie den Konstruktor von ClassA auf, ohne ihm Parameter zu übergeben. Dies ist in Prototypenketten gängige Praxis. Stellen Sie sicher, dass der Konstruktor keine Parameter hat.

Ähnlich wie beim Objektidentitätswechsel müssen alle Eigenschaften und Methoden der Unterklasse nach der Zuweisung der Prototypeigenschaft angezeigt werden, da alle zuvor zugewiesenen Methoden gelöscht werden. Warum? Da die Prototypeigenschaft durch das neue Objekt ersetzt wird, wird das ursprüngliche Objekt mit der hinzugefügten neuen Methode zerstört. Der Code zum Hinzufügen des Namensattributs und der Methode sayName() zur Klasse ClassB lautet also wie folgt:

function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};
Nach dem Login kopieren

Sie können diesen Code testen, indem Sie das folgende Beispiel ausführen:

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();
Nach dem Login kopieren

Darüber hinaus arbeitet im Prototyp innerhalb der Kette auch der Instanzoperator auf einzigartige Weise. „instanceof“ gibt „true“ sowohl für ClassA als auch für ClassB für alle Instanzen von ClassB zurück. Zum Beispiel:

var objB = new ClassB();
alert(objB instanceof ClassA);    //输出 "true"
alert(objB instanceof ClassB);    //输出 "true"
Nach dem Login kopieren

In der schwach typisierten Welt von ECMAScript ist dies ein äußerst nützliches Werkzeug, kann jedoch nicht verwendet werden, wenn Objektidentität verwendet wird. Da jedoch der Prototyp der Unterklasse direkt neu zugewiesen wird, tritt die folgende Situation auf:

console.log(objB.__proto__===objB.constructor.prototype)   //false
Nach dem Login kopieren

Weil die Prototypeigenschaft der Prototypenkette von ClassB durch ein Objekt einer anderen Klasse überschrieben wurde. Die Ausgabeergebnisse zeigen, dass objB.__proto__ immer noch auf ClassB.prototype verweist, nicht auf objB.constructor.prototype. Dies ist auch leicht zu verstehen. Was Person.prototype zugewiesen wird, ist eine neue ClassA()-Instanz. Der Konstruktor (Konstruktor) eines mit der Objektliteralmethode definierten Objekts ist ein Leere Objekte {}, {} unterscheiden sich natürlich von ClassB.prototype.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Prototypeigenschaften und Methodeninstanzen der JavaScript-Prototypkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!