Heim > Web-Frontend > js-Tutorial > JavaScript Advanced Series – Prototyp

JavaScript Advanced Series – Prototyp

黄舟
Freigeben: 2017-02-07 17:20:08
Original
1105 Leute haben es durchsucht
  • Eigenschaftssuche

  • Prototypeigenschaften

  • Leistung

  • Prototypen, die integrierte Typen erweitern

  • Zusammenfassung

JavaScript enthält nicht das traditionelle Klassenvererbungsmodell, sondern verwendet das Prototyp-Prototypmodell.

wird oft als Manko von JavaScript erwähnt. Tatsächlich ist das prototypbasierte Vererbungsmodell leistungsfähiger als die herkömmliche Klassenvererbung. Die Implementierung des traditionellen Klassenvererbungsmodells ist einfach, die Implementierung der prototypischen Vererbung in JavaScript ist jedoch viel schwieriger. (Es ist zum Beispiel ziemlich trivial, ein klassisches Modell darauf aufzubauen, während es umgekehrt eine weitaus schwierigere Aufgabe ist.)

JavaScript ist die einzige weit verbreitete Sprache, die auf prototypischer Vererbung basiert Es dauert einige Zeit, den Unterschied zwischen den beiden Vererbungsmodellen zu verstehen.

Der Unterschied besteht in der Art und Weise, wie JavaScript die Vererbung der Prototypenkette verwendet.

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};
Nach dem Login kopieren

Im obigen Beispiel erbt das Testobjekt von Bar.prototype und Foo.prototype und kann daher auf die Prototyp-Methode von Foo zugreifen. Gleichzeitig kann es auch auf den im Prototyp definierten Foo-Instanzeigenschaftswert zugreifen. Beachten Sie, dass new Bar() keine neue Foo-Instanz erstellt, sondern die Instanz in ihrem Prototyp wiederverwendet. Daher haben alle Bar-Instanzen dieselbe Werteigenschaft.

Eigenschaftssuche

Bei der Suche nach einer Eigenschaft für ein Objekt durchläuft JavaScript die Prototypenkette nach oben, bis es eine Eigenschaft mit einem bestimmten Namen findet.

erreicht die Spitze der Prototypenkette – also Object.prototype –, aber die angegebene Eigenschaft wird immer noch nicht gefunden und undefiniert wird zurückgegeben.

Hinweis: Verwenden Sie nicht Bar.prototype = Foo, da dies nicht den Prototyp von Foo ausführt, sondern auf die Funktion Foo verweist. Die Prototypenkette kehrt also zu Function.prototype anstelle von Foo.prototype zurück, sodass sich die Methode nicht in der Prototypenkette von Bar befindet.

Prototyp-Attribut

Wenn das Attribut zum Erstellen einer Prototypenkette verwendet wird, kann ihm jede Art von Wert zugewiesen werden (Prototyp). Die Zuweisung atomarer Typen zum Prototyp wird jedoch ignoriert.

function Foo() {}
Foo.prototype = 1; // 无效
Nach dem Login kopieren

Durch die Zuweisung des Objekts zum Prototyp, wie im obigen Beispiel gezeigt, wird die Prototypenkette dynamisch erstellt.

Leistung

Befindet sich eine Eigenschaft am oberen Ende der Prototypenkette, wirkt sich dies negativ auf die Suchzeit aus. Insbesondere der Versuch, auf eine nicht vorhandene Eigenschaft zuzugreifen, durchläuft die gesamte Prototypenkette.

Und wenn Sie eine for-in-Schleife verwenden, um die Eigenschaften eines Objekts zu durchlaufen, wird auf alle Eigenschaften in der Prototypenkette zugegriffen.

Erweitern Sie den Prototyp eines integrierten Typs

Eine häufig verwendete falsche Funktion besteht darin, Object.prototype oder andere Prototypobjekte des integrierten Typs zu erweitern.

Diese Technik wird Monkey Patching genannt und unterbricht die Kapselung. Obwohl es in einigen JavaScript-Bibliotheken wie Prototype weit verbreitet ist, halte ich es immer noch nicht für eine gute Idee, den integrierten Typen einige nicht standardmäßige Funktionen hinzuzufügen.

Der einzige Grund, integrierte Typen zu erweitern, besteht darin, mit neuem JavaScript wie Array.forEach konsistent zu sein.

Zusammenfassung

Bevor Sie komplexe JavaScript-Anwendungen schreiben, ist es für jeden JavaScript-Programmierer ein Muss, vollständig zu verstehen, wie die Vererbung von Prototypketten funktioniert. Hüten Sie sich vor Leistungsproblemen, die durch lange Prototypenketten verursacht werden, und erfahren Sie, wie Sie die Leistung durch Verkürzung der Prototypenkette verbessern können. Erweitern Sie außerdem niemals Prototypen integrierter Typen, außer um die Kompatibilität mit neuen JavaScript-Engines zu gewährleisten.

Hinweis: Dies ist eine im Programmierbereich häufig verwendete Methode namens Backport, bei der es sich um das Hinzufügen neuer Patches zur alten Version handelt.

Das Obige ist der Inhalt der JavaScript Advanced Series – Prototype. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).


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