Objektorientierte Javascript-Programmierung (1) Kapselung

Objektorientierte Javascript-Programmierung (1): Kapselung

Autor: Ruan Yifeng

Javascript ist eine objektbasierte Sprache und fast alles, was Ihnen begegnet, ist ein Objekt. Es handelt sich jedoch nicht um eine echte objektorientierte Programmiersprache (OOP), da ihre Syntax keine Klasse enthält.

Was sollen wir also tun, wenn wir „Eigenschaft“ und „Methode“ in ein Objekt einkapseln oder sogar ein Instanzobjekt aus einem Prototypobjekt generieren möchten?

1. Der ursprüngliche Modus zum Generieren von Objekten

Angenommen, wir betrachten die Katze als ein Objekt, das zwei Attribute hat: „Name“ und „Farbe“.

var Cat = { 
　　　　name : '', 
　　　　color : '' 
　　}

Jetzt müssen wir zwei Instanzobjekte basierend auf diesem Prototypobjekt generieren.

　　var cat1 = {}; // 创建一个空对象 
　　　　cat1.name = "大毛"; // 按照原型对象的属性赋值 
　　　　cat1.color = "黄色"; 
　　var cat2 = {}; 
　　　　cat2.name = "二毛"; 
　　　　cat2.color = "黑色";

Okay, das ist die einfachste Kapselung. Diese Schreibweise hat jedoch zwei Nachteile: Wenn mehr Instanzen generiert werden, ist das Schreiben zweitens nicht möglich.
2. Verbesserung des Originalmodus
Wir können eine Funktion schreiben, um das Problem der Codeduplizierung zu lösen.

　　function Cat(name,color){ 
　　　　return { 
　　　　　　name:name, 
　　　　　　color:color 
　　　　} 
　　}

Dann entspricht das Erzeugen eines Instanzobjekts dem Aufruf einer Funktion:

　　var cat1 = Cat("大毛","黄色"); 
　　var cat2 = Cat("二毛","黑色");

Das Problem bei dieser Methode besteht immer noch darin, dass zwischen cat1 und cat2 keine intrinsische Verbindung besteht und nicht reflektiert werden kann Zeigen Sie, dass es sich um Instanzen desselben Prototypobjekts handelt.
3. Konstruktormuster
Um das Problem der Generierung von Instanzen aus Prototypobjekten zu lösen, stellt Javascript ein Konstruktormuster bereit.
Der sogenannte „Konstruktor“ ist eigentlich eine gewöhnliche Funktion, aber diese Variable wird intern verwendet. Durch die Verwendung des new-Operators im Konstruktor wird eine Instanz generiert, und die Variable this wird an das Instanzobjekt gebunden.
Zum Beispiel kann das Prototypobjekt von cat jetzt so geschrieben werden:

　　function Cat(name,color){ 
　　　　this.name=name; 
　　　　this.color=color; 
　　}

Wir können jetzt Instanzobjekte generieren.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.name); // 大毛 
　　alert(cat1.color); // 黄色

Zu diesem Zeitpunkt enthalten cat1 und cat2 automatisch ein Konstruktorattribut, das auf ihren Konstruktor verweist.

　　alert(cat1.constructor == Cat); //true 
　　alert(cat2.constructor == Cat); //true

Javascript bietet außerdem einen Instanzoperator, um die Beziehung zwischen Prototypobjekten und Instanzobjekten zu überprüfen.

　　alert(cat1 instanceof Cat); //true 
　　alert(cat2 instanceof Cat); //true

4. Probleme mit dem Konstruktormuster
Die Konstruktormethode ist einfach zu verwenden, es besteht jedoch das Problem der Speicherverschwendung.
Bitte sehen Sie, wir fügen dem Cat-Objekt jetzt ein unveränderliches Attribut „type“ (Typ) hinzu und fügen dann eine Methode eat (Mäuse fressen) hinzu. Dann sieht das Prototypobjekt Cat wie folgt aus:

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　　　this.type = "猫科动物"; 
　　　　this.eat = function(){alert("吃老鼠");}; 
　　}

Verwenden Sie immer noch dieselbe Methode, um eine Instanz zu generieren:

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat ("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

Oberflächlich betrachtet scheint es kein Problem zu geben, aber Tatsächlich hat dies einen großen Nachteil. Das heißt, für jedes Instanzobjekt haben das Typattribut und die eat()-Methode genau den gleichen Inhalt. Jedes Mal, wenn eine Instanz generiert wird, muss sie mehr Speicher für wiederholten Inhalt belegen. Das ist weder umweltfreundlich noch effizient.
　alert(cat1.eat == cat2.eat); //false
Können das Typattribut und die eat()-Methode nur einmal im Speicher generiert werden und dann verweisen alle Instanzen auf diese Speicheradresse? Die Antwort ist ja.
5. Prototypmodus
Javascript schreibt vor, dass jeder Konstruktor ein Prototypattribut hat, das auf ein anderes Objekt verweist. Alle Eigenschaften und Methoden dieses Objekts werden von der Instanz des Konstruktors geerbt.
Das bedeutet, dass wir diese unveränderlichen Eigenschaften und Methoden direkt auf dem Prototypobjekt definieren können.

　　function Cat(name,color){ 
　　　　this.name = name; 
　　　　this.color = color; 
　　} 
　　Cat.prototype.type = "猫科动物"; 
　　Cat.prototype.eat = function(){alert("吃老鼠")};

Generieren Sie dann die Instanz.

　　var cat1 = new Cat("大毛","黄色"); 
　　var cat2 = new Cat("二毛","黑色"); 
　　alert(cat1.type); // 猫科动物 
　　cat1.eat(); // 吃老鼠

Zu diesem Zeitpunkt sind das Typattribut und die eat()-Methode aller Instanzen tatsächlich dieselbe Speicheradresse und verweisen auf das Prototypobjekt, wodurch die Betriebseffizienz verbessert wird.
　alert(cat1.eat == cat2.eat); //true
6. Prototyp-Modus-Überprüfungsmethode
6.1 isPrototypeOf()
Diese Methode wird verwendet, um zu bestimmen, ob ein bestimmtes Prototyp-Objekt und ein bestimmte Beziehung zwischen Instanzen.

　　alert(Cat.prototype.isPrototypeOf(cat1)); //true 
　　alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
Jedes Instanzobjekt verfügt über eine hasOwnProperty()-Methode, mit der ermittelt wird, ob eine bestimmte Eigenschaft eine lokale Eigenschaft oder eine vom Prototypobjekt geerbte Eigenschaft ist.

　　alert(cat1.hasOwnProperty("name")); // true 
　　alert(cat1.hasOwnProperty("type")); // false

6.3 in-Operator Mit dem
in-Operator kann ermittelt werden, ob eine Instanz ein bestimmtes Attribut enthält, ob es sich um ein lokales Attribut handelt oder nicht. Der

　　alert("name" in cat1); // true 
　　alert("type" in cat1); // true

in-Operator kann auch zum Durchlaufen aller Eigenschaften eines Objekts verwendet werden.
　for(var prop in cat1) { Alert("cat1["+prop+"]="+cat1[prop]); }

Mehr Javascript für Objekt Programmierung (1) Für Artikel zum Thema Kapselung beachten Sie bitte die chinesische PHP-Website!