Detaillierte Erläuterung des Musters zur Wiederverwendung von JavaScript-Code_Grundkenntnisse

Code-Wiederverwendung und ihre Prinzipien

<font face="NSimsun">代码复用</font> besteht, wie der Name schon sagt, darin, einen Teil oder sogar den gesamten zuvor geschriebenen Code wiederzuverwenden, um ein neues Programm zu erstellen. Wenn wir über die Wiederverwendung von Code sprechen, fällt uns als Erstes <font face="NSimsun">继承性</font> ein. Das Prinzip der Code-Wiederverwendung lautet:

<code>优先使用对象组合，而不是类继承</code>

Da es in js kein Klassenkonzept gibt, macht das Konzept der Instanz nicht viel Sinn. Objekte in js sind einfache Schlüssel-Wert-Paare und können dynamisch erstellt und geändert werden.

Aber in <font face="NSimsun">js</font> können wir Konstruktoren und <font face="NSimsun">new</font>-Operatoren verwenden, um ein Objekt zu instanziieren, das syntaktische Ähnlichkeiten mit anderen Programmiersprachen aufweist, die Klassen verwenden.

Zum Beispiel:

<code>var trigkit4 = new Person();</code>

<font face="NSimsun">js</font> scheint eine Klasse zu sein, wenn der Konstruktor <font face="NSimsun">Person</font> aufgerufen wird, aber es ist tatsächlich immer noch eine Funktion. Dies gibt uns einige Entwicklungsideen und Vererbungsmuster, von denen wir annehmen, dass sie aufgerufen werden können das „Klassenvererbungsmuster“.

Der traditionelle Vererbungsmodus erfordert das Schlüsselwort <font face="NSimsun">class</font>. Wir gehen davon aus, dass der obige Klassenvererbungsmodus <font face="NSimsun">现代继承模式</font> ist, ein Modus, der nicht in Bezug auf Klassen berücksichtigt werden muss.

Klassenvererbungsmuster

Sehen Sie sich die folgenden Beispiele für zwei Konstruktoren <font face="NSimsun">Parent()</font> und <font face="NSimsun">Child()</font> an:

<code><script type="text/javascript"><br>    function Parent(name){<br>        this.name = name || 'Allen';<br>    }<br>    Parent.prototype.say = function(){<br>        return this.name;<br>    }<br>    function Child(name){}<br>    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br>    function inherit(C,P){<br>        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br>    }<br>    //调用声明的继承函数<br>    inherit(Child,Parent);<br></script></code>

Wenn Sie ein Objekt mit der <font face="NSimsun">new Child()</font>-Anweisung erstellen, erhält es seine Funktionalität von der <font face="NSimsun">Parent()</font>-Instanz über den Prototyp, wie zum Beispiel:

<code>var kid = new Child();
kid.say();
//Allen</code>

Prototypenkette

Besprechen Sie, wie die Prototypenkette im Klassenvererbungsmodell funktioniert. Wir stellen uns ein Objekt als einen Block irgendwo im Speicher vor. Dieser Speicherblock enthält Daten und Verweise auf andere Blöcke. Wenn Sie die <font face="NSimsun">new Parent()</font>-Anweisung zum Erstellen eines Objekts verwenden, wird ein Block wie der auf der linken Seite der Abbildung unten erstellt. Dieser Block speichert die <font face="NSimsun">name</font>-Attribute. Wenn wir auf die <font face="NSimsun">say()</font>-Methode zugreifen möchten kann das <font face="NSimsun">Parent()</font> Der implizite Link <font face="NSimsun">prototype</font> des Attributs 🎜> (Prototyp) kann auf den Block auf der rechten Seite zugreifen <font face="NSimsun">__proto__</font>. <font face="NSimsun">Parent.prototype</font>

Was passiert also, wenn Sie mit

ein neues Objekt erstellen? Wie unten gezeigt: <font face="NSimsun">var kid = new Child()</font>

Das mit der

-Anweisung erstellte Objekt ist bis auf den impliziten Link <font face="NSimsun">new Child()</font> fast leer. In diesem Fall zeigt <font face="NSimsun">__proto__</font> auf das Objekt <font face="NSimsun">__proto__</font>, das mit der <font face="NSimsun">inherit()</font>-Anweisung in der Funktion <font face="NSimsun">new Parent()</font> erstellt wurde.

Da das Blockobjekt in der unteren linken Ecke keine

-Methode hat, wird beim Ausführen von <font face="NSimsun">kid.say()</font> das mittlere Blockobjekt über die Prototypenkette abgefragt. Das mittlere Blockobjekt verfügt jedoch nicht über eine <font face="NSimsun">say()</font>-Methode, also folgte er der Prototypenkette, um das Blockobjekt ganz rechts abzufragen, und dieses Objekt hatte zufällig die <font face="NSimsun">say()</font>-Methode. Ist es vorbei? <font face="NSimsun">say()</font>

ist nicht fertig, wenn es hier in der

-Methode referenziert wird. Dies zeigt auf das vom Konstruktor erstellte Objekt <font face="NSimsun">say()</font> verfügt nicht über das Attribut <font face="NSimsun">this.name</font>. Aus diesem Grund wird der mittlere Block abgefragt, und der mittlere Block verfügt zufällig über das Attribut <font face="NSimsun">new Child()</font>. An diesem Punkt ist die Abfrage der Prototypenkette abgeschlossen. <font face="NSimsun">new Child()</font> <font face="NSimsun">name</font>Für eine ausführlichere Diskussion lesen Sie bitte meinen Artikel: <font face="NSimsun">name</font>Javascript Study Notes (5) Detaillierte Erläuterung des Prototyps und der Prototypenkette

Prototypen teilen

Die Regel dieses Musters lautet: Wiederverwendbare Elemente sollten in den Prototyp übertragen und nicht in diesem platziert werden. Aus Vererbungsgründen sollte daher alles, was es wert ist, vererbt zu werden, in einem Prototyp implementiert werden. Daher können Sie den Prototyp des untergeordneten Objekts so festlegen, dass er mit dem Prototyp des übergeordneten Objekts übereinstimmt, wie im folgenden Beispiel gezeigt:

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

子对象和父对象共享同一个原型，并且可以同等的访问<font face="NSimsun">say()</font>方法。然而，子对象并没有继承<font face="NSimsun">name</font>属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br>    //要继承的对象<br>    var parent = {<br>        name : "Jack"  //这里不能有分号哦<br>    };</code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></script></code>

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(obj);<br>    alert(kid.getName());//trigkit4<br></script></code>

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(Person.prototype);<br>    console.log(typeof kid.getName);//function，因为它在原型中<br>    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br></script></code>