Erlernen Sie objektorientierte Javascript-Programmierung, Kapselung_Javascript-Kenntnisse

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 dem Prototypobjekt generieren möchten?
1. Ursprünglicher Modus zum Generieren von Objekten
Nehmen wir an, 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 der Spezifikation (Schema) dieses Prototypobjekts generieren.

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

Okay, das ist die einfachste Kapselung, bei der zwei Eigenschaften in einem Objekt gekapselt werden. Diese Schreibweise hat jedoch zwei Nachteile: Wenn mehr Instanzen generiert werden, ist das Schreiben zweitens nicht möglich.
2. Verbesserungen am 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 sie nicht widerspiegeln kann, 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 (Konstruktormuster) bereit.
Der sogenannte „Konstruktor“ ist eigentlich eine gewöhnliche Funktion, diese Variable wird jedoch intern verwendet. Durch die Verwendung des new-Operators im Konstruktor wird eine Instanz generiert, und die Variable this wird an das Instanzobjekt gebunden.
Das Prototypobjekt von cat kann nun beispielsweise 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 alle Instanzen auf diese Speicheradresse verweisen? Die Antwort ist ja.
5. Prototypenmodus
Javascript schreibt vor, dass jeder Konstruktor über ein Prototypattribut verfügt, 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 am 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. Verifizierungsmethode des Prototypenmodus
Um mit dem Prototypattribut zusammenzuarbeiten, definiert Javascript einige Hilfsmethoden, die uns bei der Verwendung helfen. ,
6.1 isPrototypeOf()
Diese Methode wird verwendet, um die Beziehung zwischen einem bestimmten Proptotypobjekt und einer Instanz zu bestimmen.

　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 im Betreiber
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.

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

Der

in-Operator kann auch zum Durchlaufen aller Eigenschaften eines Objekts verwendet werden.

　for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

Das Obige dreht sich alles um die Javascript-Kapselung. Ich hoffe, es wird für das Lernen aller hilfreich sein.