Heim > Web-Frontend > js-Tutorial > Sammlung von Methoden zum Erstellen und Aufrufen von JavaScript-Objekten_Javascript-Fähigkeiten

Sammlung von Methoden zum Erstellen und Aufrufen von JavaScript-Objekten_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:24:48
Original
1062 Leute haben es durchsucht

Als ich heute an einem Projekt arbeitete, stieß ich auf eine Situation, in der ich ein JavaScript-Objekt erstellen musste. Also habe ich einen von einem Ausländer geschriebenen Artikel über drei Möglichkeiten zum Erstellen von JavaScript-Objekten gelesen und nach dem Lesen den Code eingegeben. Ich finde die Methode ziemlich gut, daher möchte ich sie hier mit Ihnen teilen.

1. Verwenden Sie Funktionen, um Objekte zu erstellen:

Code kopieren Der Code lautet wie folgt:

//Objekt definieren
Funktion Tier(Typ)
{
This.name="";
This.type=type;
This.introduction=function(){
            return „Mein Name ist: „ this.name „, ich gehöre zu „ this.type;
}
}
var animal=new Animal("Poultry"); //Instanziieren Sie das oben erstellte Objekt
animal.name="小红";
Alert(animal.introduction()); // Rufen Sie die Einführungsfunktion auf (zu diesem Zeitpunkt wird die Seite angezeigt: Mein Name ist Xiaohong, ich gehöre zu Geflügel);

Jeder muss mit dieser Methode vertraut sein. Allerdings führt die Verwendung dieser Methode zu Leistungseinbußen. Hier instanziieren wir das Objekt über den neuen Schlüssel. Tatsächlich bewirkt der neue Schlüssel zwei Dinge. Zunächst wird eine anonyme Methode (Animal) definiert. 2. Rufen Sie es an. Dies ist nicht so effizient wie die Methode, die wir als nächstes vorstellen werden.

2. Verwenden Sie Objektliterale:

Ich weiß nicht, ob die Übersetzung korrekt ist. Ich werde Ihnen später die Originaladresse mitteilen. Wenn Sie interessiert sind, können Sie den Originaltext lesen.

Code kopieren Der Code lautet wie folgt:

//Objekt definieren
var Book=
{
                Name: „A Dream of Red Mansions“,
          Typ: „Literarische Werke“,
           getAuthor:function()
{
            return: „Ich bin Cao Xueqins Kind!“;
}
}
​​​ Alert(Book.GetAuthor()); // Rufen Sie die Objektmethode auf und die Seite wird angezeigt: Ich bin Cao Xueqins Kind.
        Book.name="Slam Dunk";                                                                                                                                                                                          ="Slam Dunk";                          // Objekteigenschaften ändern
Alert(Book.name); //Zu diesem Zeitpunkt wird die Seite angezeigt: Slam Dunk

Ich glaube, jeder wird verstehen, warum diese Methode effizienter ist, nachdem er den Code gesehen hat. Weil es der Definition einer globalen JavaScript-Variablen entspricht. Wir können es direkt verwenden, ohne es zu instanziieren. Das sieht jedoch seltsam aus. Nun, hier kommt die Lösung. Werfen wir einen Blick auf die dritte Methode.

3. Singleton-Modus (Singleton mit einer Funktion):

Es ist möglicherweise nicht angemessen, es in den Singleton-Modus zu übersetzen. Schauen wir uns zuerst den Code an:

Code kopieren Der Code lautet wie folgt:

//Objekt definieren
var Geschlecht=neue Funktion()
{
This.type="girl";
This.looking=function()
{
         return „I am“ this.type;
}
}
Alert(Gender.spoke();) //Objekt verwenden Zu diesem Zeitpunkt wird die Seite angezeigt: Ich bin ein Mädchen.

Schauen Sie sich diesen Code an. Ist er unserer Methode eins sehr ähnlich? Es funktioniert jedoch wie Methode eins. Methode 1: Verwenden Sie das Objekt einmal und erstellen Sie das Objekt einmal. Diese Methode erstellt ein Objekt einmal und kann es dauerhaft verwenden. Daher ist dieser Ansatz dem Singleton-Muster in Entwurfsmustern sehr ähnlich.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage