Javascript erstellt Klassen und Objekte (grafisches Tutorial)

Es gibt viele Möglichkeiten, Klassen und Objekte mit Javascript zu erstellen. Lassen Sie uns sie jetzt auflisten: 1. Ursprüngliche Erstellungsmethode, 2. Fabrikmethodenmuster, 3. Konstruktormethodenmuster, 4. Dynamische Prototypmethode. Schauen wir uns Beispiele anhand von Beispielen genauer an

Jetzt fassen wir mehrere Möglichkeiten zum Erstellen von Klassen und Objekten in Javascript zusammen:

Ursprüngliche Erstellungsmethode:

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show(); 
</script>

Original Die Erstellung Für Leute, die mit der Objektorientierung vertraut sind, ist es schwierig, die Kapselung von Attributen und Methoden zu akzeptieren. Diese Kapselung erfolgt in der Form „Objektname“ + „.“ dass die Attribute und Methoden, denen der Objektname folgt, Folgendes sind: Was dieses Objekt besitzt, ist dieses Objekt (zum Beispiel: Person) das gekapselte Ergebnis. Sie können weiterhin Methoden und Attribute hinzufügen, zum Beispiel das Altersattribut hinzufügen: person.age= 23; Diese Erstellungsmethode wird dazu führen, dass sich Personen, die mit der Java-Programmierung vertraut sind, sehr unwohl fühlen. Wir können die ursprüngliche Erstellungsmethode weiter „kapseln“, siehe nächster Schritt:

2. Factory-Methodenmuster:

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

Das Factory-Methodenmuster ähnelt eher einer Klasse, personFactory ist das Original Die Erstellungsmethode ist gekapselt und gibt das erstellte Objekt an die Referenzvariable Person zurück. Person kann dann auf das erstellte Objekt verweisen, aber es ist nicht perfekt: Sie erstellen jedes Mal ein Objekt und verwenden das Objekt, um die Methode show() aufzurufen, eine neue show( ) Funktion wird erstellt. Sie können dieselbe Show-Methode aufrufen. Die Optimierungsmethode besteht darin, Show wie folgt außerhalb der Fabrik zu platzieren:

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

Funktional gesehen löst der obige Code das Problem der Funktionswiederverwendung. Die Präsentationsmethode ähnelt jedoch nicht dem Erstellen eines Objekts, und Menschen, die mit Java vertraut sind, fühlen sich immer noch unwohl. Bitte sehen Sie sich den nächsten Schritt an:

3. Konstruktormuster:

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

Die Erstellungsmethode des obigen Codes ist fast dieselbe wie die Erstellungsmethode von Java-Klassen und -Objekten. Sie kapselt die Attribute und Verwenden Sie dann das Schlüsselwort new, um ein Objekt zu erstellen und zurückzugeben. Ja, es ist dieser Prozess, aber er kann auch optimiert werden Der Weg wird sofort erstellt, wenn die Show-Methode aufgerufen wird. Können wir für eine Show-Funktion eine Methode erstellen, die allen Objekten gemeinsam ist? Genau wie statische Methoden in Java-Klassen verwenden alle Objekte dieselbe statische Methode, und die Antwort lautet „Ja“. Bitte sehen Sie sich den nächsten Schritt an:

4. Dynamische Prototypenmethode:

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

Hier wird ein kleiner Trick verwendet. Wenn ein Objekt mit new erstellt wird, wird die if-Beurteilungsanweisung im Person-Funktionsblock verwendet ausgeführt werden, und die Reihenfolge ist von Von oben nach unten, natürlich ist die Tag-Variable am Anfang nicht definiert, daher wird der Inhalt im if-Anweisungsblock ausgeführt:

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

Die Bedeutung dieses Inhalts ist zu Erstellen Sie eine Show-Methode, die zur Klasse Person gehört. Beachten Sie, dass es sich um eine Klassenmethode handelt, die der statischen modifizierten Methode in Java entspricht, und nicht um die Methode eines einzelnen Objekts, sodass alle Objekte dieselbe Methode aufrufen können Sie müssen jedes Mal eine eigene Show-Funktion erstellen, wenn ein anderes Objekt die Methode aufruft. Wäre diese Methode nicht besser, da sie Platz und Zeit spart? Lassen Sie mich hier erklären, dass die in der Methode „Klassenname.prototype.property/method“ erstellten Eigenschaften und Methoden den in Java mit Static geänderten Variablen oder Methoden entsprechen. Sie gehören zur gesamten Klasse und nicht zu einem einzelnen Objekt , alle Objekte werden gemeinsam genutzt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Welche Fehler und Fehler treten häufig in JS auf?

Zusammenfassung der gegenseitigen Eltern-Kind-Kommunikationsmethoden in VueJs-Komponenten

Detaillierte Erläuterung der JS-domänenübergreifenden POST-Implementierungsschritte

Das obige ist der detaillierte Inhalt vonJavascript erstellt Klassen und Objekte (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!