JavaScript Voranalyse, Objektdetails

JavaScript Voranalyse, Objektdetails

1. Voranalyse

1. Vorabanalyse von Variablen und Funktionen

JavaScript-Code wird vom JavaScript-Parser im Browser ausgeführt. Der JavaScript-Parser führt JavaScript-Code in zwei Schritten aus: Vorparsing und Codeausführung.

  • Vorabanalyse: Im aktuellen Umfang deklariert oder definiert der Browser standardmäßig vorab Variablen mit Var- und Funktionsdeklarationen im Speicher, bevor der JS-Code ausgeführt wird.
  • Codeausführung: Führen Sie JS-Anweisungen von oben nach unten aus.

Die Vorbereitung erfolgt nur für Variablen und Funktionen, die mit var definiert sind. Durch das Erlernen einer Voranalyse können wir besser verstehen, warum der Wert einer Variablen undefiniert ist, wenn auf sie zugegriffen wird, bevor sie deklariert wurde, und warum eine Funktion aufgerufen werden kann, bevor sie deklariert wurde. Vorbereiten wird auch als Variablen- und Funktionspromotion bezeichnet.

1. Vorabanalyse der Variablen

Vorabanalyse von Variablen: Variablendeklarationen werden an den Anfang des aktuellen Bereichs verschoben, Variablenzuweisungen werden nicht verschoben.

Zum Beispiel:

  /* Analysieren Sie zuerst die var-Variable num
  Führen Sie dann die Konsolenausgabe aus und weisen Sie schließlich num*/ 10 zu.
console.log(num); // Was ist das Ergebnis?
var num = 10; // ?

2. Funktionsvoranalyse

Voranalyse der Funktion : Die Funktionsdeklaration wird an den Anfang des aktuellen Bereichs verschoben, die Funktion wird jedoch nicht aufgerufen.

/*Analysieren Sie zuerst die Definition der fn-Funktion und führen Sie dann die Konsolenanweisung aus*/
Konsole.log("1+2+3+...+100=",fn());
		Funktion fn(){
			var s = 0;
			für(var i=1;i<=100;i++){
				= ich;
			}
			Rückgabe s;
		}

2. Fall vor der Analyse

Lassen Sie uns eine kleine Übung machen und sehen, was dabei herauskommt.

konsole.log((a));
var a = 1;
 konsole.log((a));
 Funktion a(){
    gib a zurück;
 }

Das Ergebnis ist:

Bildbeschreibung hier einfügen

2. Ziel

In JavaScript ist ein Objekt eine ungeordnete Sammlung verwandter Eigenschaften und Methoden. Alles ist ein Objekt, z. B. Zeichenfolgen, Zahlen, Arrays, Funktionen usw.
Objekte bestehen aus Eigenschaften und Methoden.

  • Attribut : eine Eigenschaft von etwas, dargestellt durch ein Attribut in einem Objekt (allgemeiner Substantiv)
  • Methode : Das Verhalten von etwas, ausgedrückt in einem Objekt mithilfe einer Methode (allgemeines Verb)

1. Drei Möglichkeiten zum Erstellen von Objekten

1. Objekte mit Literalen erstellen

Objektliteral: Die geschweiften Klammern { } enthalten die Eigenschaften und Methoden, die dieses bestimmte Ding (Objekt) ausdrücken. { } wird in Form von Schlüssel-Wert-Paaren ausgedrückt.

  • Schlüssel: Entspricht dem Attributnamen
  • Wert: Entspricht dem Attributwert, der ein beliebiger Wertetyp sein kann (numerischer Typ, Zeichenfolgentyp, Boolescher Typ, Funktionstyp usw.).
var Stern = {
    Name: "xl",
    Alter: 18,
    Geschlecht: weiblich,
    sageStudie : function(){
        console.log('Lerne fleißig');
    }
};

Der Eigenschaftsaufruf im Objekt lautet: Objekt.Eigenschaftsname, der Punkt . wird als „von“ verstanden. Beispiel: star.name

Eine andere Möglichkeit, die Attribute in einem Objekt aufzurufen: Objekt['Attributname']. Beachten Sie, dass die Attribute in den eckigen Klammern in Anführungszeichen gesetzt werden müssen. Zum Beispiel: star['age']

2. Erstellen Sie ein Objekt mit new Object

Dies entspricht dem Prinzip der Array-Erstellung mit new Array(), das wir zuvor kennengelernt haben.

var andy = neues Objekt();
andy.name = "xl";
andy.alter = 18;
andy.sex = "weiblich";
andy.sayStudy = Funktion(){
   console.log('Lerne fleißig');
}
  • Object() : Der erste Buchstabe wird groß geschrieben
  • new Object(): erfordert das neue Schlüsselwort
  • Das verwendete Format ist: Objekt.Eigenschaft = Wert;

3. Erstellen Sie Objekte mit Konstruktoren

Konstruktor: Eine spezielle Funktion, die hauptsächlich zum Initialisieren von Objekten verwendet wird, d. h. zum Zuweisen von Anfangswerten zu Objektelementvariablen. Sie wird immer mit dem neuen Operator verwendet. Wir können einige allgemeine Eigenschaften und Methoden aus dem Objekt extrahieren und sie in diese Funktion kapseln.

Beachten Sie bei der Verwendung von Konstruktoren in js die folgenden zwei Punkte:

  • Konstruktoren werden zum Erstellen von Objekten eines bestimmten Typs verwendet und ihr erster Buchstabe sollte groß geschrieben werden.
  • Konstruktoren sind nur sinnvoll, wenn sie mit neuen

Zum Beispiel:

Funktion MeinName(Name,Alter,Geschlecht){
    dieser.name = Name;
    dieses.Alter = Alter;
    dies.Geschlecht = Geschlecht;
}
var xl = new MyName('Name','18','18');
var huan = new MyName('Name','16','Name');
Konsole.log('xl.name='+xl.name);
console.log('huan:');
Konsole.log(huan);

Das Druckergebnis ist:

Bildbeschreibung hier einfügen

Beachten

  • Konstruktoren werden normalerweise großgeschrieben.
  • Dies muss vor den Eigenschaften und Methoden innerhalb der Funktion hinzugefügt werden, um die Eigenschaften und Methoden des aktuellen Objekts anzugeben.
  • Es ist nicht erforderlich, das Ergebnis im Konstruktor zurückzugeben.
  • Wenn wir ein Objekt erstellen, müssen wir new verwenden, um den Konstruktor aufzurufen.

4. Konstruktoren und Objekte

  • Konstruktor, abstrahiert die gemeinsamen Teile des Objekts und kapselt sie in eine Funktion. Er verweist auf eine allgemeine Klasse.
  • Das Erstellen eines Objekts, insbesondere eines, durch das Schlüsselwort new nennen wir auch den Vorgang der Objekterstellung Instanziierung.

2. Neues Schlüsselwort

Bei der Ausführung von new werden vier Dinge ausgeführt:

1. Erstellen Sie ein neues leeres Objekt im Speicher.

2. Lassen Sie dies auf das neue Objekt zeigen.

3. Führen Sie den Code im Konstruktor aus, um dem neuen Objekt Eigenschaften und Methoden hinzuzufügen.

4. Geben Sie dieses neue Objekt zurück (damit im Konstruktor keine Rückgabe erforderlich ist).

3. Objekteigenschaften durchlaufen

Mit der for...in-Anweisung können Sie die Eigenschaften eines Arrays oder Objekts durchlaufen.

Die Syntax lautet wie folgt:

für (Variable im Objektnamen) {
    // Code hier ausführen }

Die Variablen in der Syntax sind benutzerdefiniert und müssen Namenskonventionen entsprechen. Normalerweise schreiben wir diese Variable als k oder key.

für (var k in obj) {
    console.log(k); // hier ist k der Eigenschaftsname console.log(obj[k]); // hier ist obj[k] der Eigenschaftswert}

Beispielsweise wird das folgende Objekt konstruiert

Funktion Held(Name,Typ,Blut,Angriff){
    dieser.name = Name;
    dieser.Typ = Typ;
    dieses.Blut = Blut;
    dieser.angriff = Angriff;
}
var lianpo = neuer Held('Lian Po', 'Kraft', '500 HP', 'Nahkampf');
var houyi = neuer Held('Houyi','Shooter-Typ','100 Gesundheit','große Reichweite');

Beim Ausführen der Anweisung for..in führt das Drucken von k und obj[k] jeweils zu den folgenden Ergebnissen:

Funktion Held(Name,Typ,Blut,Angriff){
    dieser.name = Name;
    dieser.Typ = Typ;
    dieses.Blut = Blut;
    dieser.angriff = Angriff;
}
var lianpo = neuer Held('Lian Po', 'Kraft', '500 HP', 'Nahkampf');
var houyi = neuer Held('Houyi','Shooter-Typ','100 Gesundheit','große Reichweite');

Bildbeschreibung hier einfügen

für (k in lianpo) {
    Konsole.log(lianpo[k]);
}

Bildbeschreibung hier einfügen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung des JS-Umfangs und des Voranalysemechanismus
  • Analyse von 4 Implementierungsmethoden der JavaScript-Vorabanalyse
  • Verstehen des JavaScript-Pre-Parsings anhand von Beispielen

<<:  Webdesign-Tutorial (6): Behalte deine Leidenschaft für Design

>>:  Das Bildelement img hat in IE6 zusätzlichen Leerraum

Artikel empfehlen

Besprechen Sie die Anwendung von Mixin in Vue

Mixins bieten eine sehr flexible Möglichkeit, wie...

Erläuterung, ob im interaktiven Design Paging oder Laden gewählt werden soll

Der Autor dieses Artikels @子木yoyo hat ihn in seine...

Beispielcode zum Generieren eines QR-Codes mit js

Vor einiger Zeit musste das Projekt die Funktion ...

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Durch die Verwendung von Abkürzungen können Sie di...

Details zur Ereignisbindung reagieren

Inhaltsverzeichnis Ereignisbindung von Klassenkom...

Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)

1. Voraussetzungen 1. Das Projekt wurde bereitges...

Die Rolle und Öffnung des MySQL-Protokolls für langsame Abfragen

Vorwort Das MySQL Slow Query Log ist ein Protokol...

Dieser Artikel entführt Sie in die Welt der js-Datentypen und Datenstrukturen

Inhaltsverzeichnis 1. Was ist dynamische Typisier...

Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

Auf Mobilgeräten sehe ich häufig kreisförmige Wel...

JS implementiert die Drag- und Platzhalterfunktionen von Elementen

In diesem Blogbeitrag geht es um eine Schwierigke...