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

Code-Wiederverwendung und ihre Prinzipien

代码复用 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 继承性 ein. Das Prinzip der Code-Wiederverwendung lautet:

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

Nach dem Login kopieren

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 js können wir Konstruktoren und new-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>

Nach dem Login kopieren

js scheint eine Klasse zu sein, wenn der Konstruktor Person 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 class. Wir gehen davon aus, dass der obige Klassenvererbungsmodus 现代继承模式 ist, ein Modus, der nicht in Bezug auf Klassen berücksichtigt werden muss.

Klassenvererbungsmuster

Sehen Sie sich die folgenden Beispiele für zwei Konstruktoren Parent() und Child() 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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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 new Parent()-Anweisung zum Erstellen eines Objekts verwenden, wird ein Block wie der auf der linken Seite der Abbildung unten erstellt. Dieser Block speichert die name-Attribute. Wenn wir auf die say()-Methode zugreifen möchten kann das Parent() Der implizite Link prototype des Attributs 🎜> (Prototyp) kann auf den Block auf der rechten Seite zugreifen __proto__. Parent.prototype

Was passiert also, wenn Sie mit

ein neues Objekt erstellen? Wie unten gezeigt: var kid = new Child()

Das mit der

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

Da das Blockobjekt in der unteren linken Ecke keine

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

ist nicht fertig, wenn es hier in der

-Methode referenziert wird. Dies zeigt auf das vom Konstruktor erstellte Objekt say() verfügt nicht über das Attribut this.name. Aus diesem Grund wird der mittlere Block abgefragt, und der mittlere Block verfügt zufällig über das Attribut new Child(). An diesem Punkt ist die Abfrage der Prototypenkette abgeschlossen. new Child() nameFür eine ausführlichere Diskussion lesen Sie bitte meinen Artikel: nameJavascript 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>

Nach dem Login kopieren

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

原型继承

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

<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>

Nach dem Login kopieren

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

<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>

Nach dem Login kopieren

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

<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>

Nach dem Login kopieren

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