Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten

JS Drei Berge

Synchron Asynchron

Es gibt nur zwei Vorgänge im Frontend, die asynchron sind:

• Timer werden asynchron ausgeführt;
• Ajax asynchrone Anfrage

Prinzip der Compiler-Analyse + Code-Ausführung:

1. Der Compiler analysiert den Code nacheinander von oben nach unten

2. Bestimmen Sie, ob der Code synchron oder asynchron ist

• Synchron: Sofort ausführen
• Asynchron: Wird nicht ausgeführt. In den Ereigniswarteschlangenpool einfügen

3. Warten Sie, bis alle synchronen Ausführungen abgeschlossen sind, bevor Sie mit der asynchronen Ausführung beginnen

Der Unterschied zwischen synchron und asynchron

API: asynchron mit Rückruf, synchron ohne Rückruf

Leistung: Asynchrone Leistung ist gut (blockiert keine Threads). Synchrone Leistung blockiert Threads.

Reihenfolge: synchrone In-Order-Ausführung, asynchrone Out-of-Order-Ausführung

Ein weiteres Beispiel: Callback-Funktion: Wenn der Parameter einer Funktion eine Funktion ist, dann wird dieser Parameter als Callback-Funktion bezeichnet.

Geltungsbereich, Abschluss

Funktionsumfangskette

1. Nur mit var deklarierte Variablen werden als Funktionsbereiche erkannt.
2. Nur Funktionen können neue Funktionsräume eröffnen
3. Der globale Standardbereich wird als Geltungsbereich der Ebene 0 bezeichnet. Auf Ebene 0 deklarierte Funktionen öffnen einen neuen Geltungsbereich, den wir Geltungsbereich der Ebene 1 nennen.
4. Die in Ebene 1 deklarierte Funktion erstellt einen Bereich, und wir haben einen Bereich der Ebene 2 und so weiter.
5. Wie eine Kette wird es als Scope-Kette bezeichnet.

Blockumfang

1. Ein {} ist ein Blockebenenbereich, let erkennt den Blockebenenbereich

2. Für let wird der standardmäßige globale Gültigkeitsbereich auch als Blockbereich der Ebene 0 bezeichnet. Dann öffnen geschweifte Klammern zusätzlich zu Objekten neue Blockbereiche. Ebene 0 öffnet Ebene 1, Ebene 1 öffnet Ebene 2 und so weiter.

3. Es ist dasselbe wie die zuvor gelernte Funktionsumfangskette, außer dass der Funktionsumfang nur die Funktion ist, die den Funktionsumfang öffnet, der Blockumfang die geschweiften Klammern sind, die den Blockumfang öffnen, var den Funktionsumfang erkennt und let den Blockumfang erkennt

Verschlüsse

Ein Abschluss ist eine Funktion. Funktionen, die Variablen innerhalb anderer Funktionen lesen können

Codebeispiel:

    Funktion foo () {
      // foos interne Variable let num = 10
      // Dieses Innere wird als Closure-Funktion bezeichnet inner() {
        console.log(Nummer)
      }
    }

Wozu dienen Verschlüsse?

• Ein Abschluss ist wie eine Brücke zwischen der Außenwelt und dem Inneren einer Funktion.
• Das heißt, durch die Verwendung von Closures kann die Außenwelt auf die Variablen innerhalb der Funktion zugreifen.
  

Es gibt einen Unterschied zwischen Abschlüssen und direkten Rückgabewerten

Die direkte Rückgabe eines Wertes gibt eigentlich nur die Daten dieses Wertes zurück. Nachfolgende Änderungen haben nichts mit den Variablen innerhalb der Funktion zu tun.

Daher kann die Außenwelt mithilfe von Closures indirekt auf die Variablen innerhalb der Funktion zugreifen.

Mehrere Möglichkeiten zum Schreiben von Closures

Einfach ausgedrückt: Alles, was die Verschlusseigenschaften erfüllt, wird als Verschluss betrachtet

Closure: ist eine Funktion, die es der Außenwelt ermöglicht, auf die internen Variablen der Funktion zuzugreifen

Abschlusseffekt 1: Verlängerung des Lebenszyklus von Variablen

Lebenszyklus: bezieht sich auf den Zyklus von der Deklaration bis zur Vernichtung

Der Lebenszyklus einer globalen Variable beginnt mit dem Öffnen einer Webseite und endet mit dem Ende der Webseite

Der Lebenszyklus einer lokalen Variable beginnt und endet in dem Bereich, in dem sie sich befindet.

Da Closures den Lebenszyklus von Variablen verlängern können, kann die Außenwelt weiterhin auf lokale Variablen zugreifen.

Daher kann die übermäßige Verwendung von Closures zu Speicherlecks führen

Speicherleck: Ein Datenelement wird nicht mehr benötigt, belegt jedoch weiterhin Speicherplatz und wurde nicht wiederverwendet.

Lösung:

• Weisen Sie den Abschlusswert einfach auf null zu
• Die Zuweisung des Werts Null bedeutet, dass niemand auf die Daten verwiesen hat. Wenn niemand auf sie verwiesen hat, werden sie als „Müll“ markiert und zum entsprechenden Zeitpunkt von GC wiederverwendet.
• GC: Garbage Collection-Mechanismus
• Der Chrome-Browser verwendet diesen Mechanismus
  

Schließungseffekt 2: Zugangsbeschränkung

Machen Sie die Variable zu einer lokalen Variable, sodass von außen nicht direkt darauf zugegriffen werden kann

Der Zugriff ist nur indirekt über den von uns geschriebenen Abschluss (die Brücke) möglich, sodass wir im Abschluss einige Einschränkungen vornehmen und so den Zweck der Zugriffsbeschränkung erreichen können.

Vorsichtsmaßnahmen bei Abschluss des Anrufs

Beachten:

Die Häufigkeit, mit der die äußere Funktion, die den Abschluss generiert, aufgerufen wird, führt zur Generierung der gleichen Anzahl von Abschlüssen, und es werden zu diesem Zeitpunkt unterschiedliche Daten verarbeitet.

Wenn die äußere Funktion, die den Abschluss generiert, einmal aufgerufen wird, wird nur ein Abschluss generiert und die verarbeiteten Daten bleiben dieselben.

Closure löst das Problem von Indexfehlern, die durch die Verwendung von var verursacht werden

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <Stil>
    ul {
      Listenstil: keiner;
      Polsterung: 0;
      Rand: 0;
    }
    li {
      Breite: 30px;
      Höhe: 30px;
      Hintergrundfarbe: gelb;
      Zeilenhöhe: 30px;
      Textausrichtung: zentriert;
      schweben: links;
      Rand rechts: 10px;
    }
  </Stil>
</Kopf>
<Text>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <Skript>
    // Gab es vorher „let“? Nein, also schauen wir mal, wie man das Indexproblem mit var löst // Finde alle li
    var lis = document.getElementsByTagName('li')
    für (var i = 0; i < lis.length; i++) {
      // Jetzt gibt es nur noch eine Variable in i, sodass beim letzten Klicken jeder ein i besucht
      // Der Endwert von i ist 5, also egal, wen Sie anklicken, es wird 5 sein
      // Lösung: Wenn ich 5 li habe, brauche ich 5 Variablen und die Werte der Variablen sind jeweils 0, 1, 2, 3, 4
      // Wie können wir 5 verschiedene Variablen generieren? Wir müssen einen Funktionsumfang erstellen (function () {
        // Weil diese Schleife 5 selbstausführende Funktionen generiert // Das bedeutet, dass es 5 verschiedene Indexvariablen gibt // und ihre Werte müssen jeweils 0, 1, 2, 3, 4 sein, und die Werte von i sind genau 0, 1, 2, 3, 4
        // Weisen Sie also einfach i dem Index zu var index = i
        // Füge jedem li ein Klickereignis hinzu lis[i].onclick = function () {
          Alarm (Index)
        }
      })()
    }
  </Skript>
</body>

</html>

Wahlmaschine

    // Um ​​eine Funktion zu erstellen, die abstimmen und die aktuelle Stimmenzahl abrufen kann, function votor() {
      // Es gibt eine Variable zum Speichern der Ticketanzahl let ticket = 0
      zurückkehren {
        getTicket: Funktion () {
          console.log('Die aktuelle Anzahl der Tickets beträgt: ' + Ticket)
        },
        // Abstimmung hinzufügen: Funktion () {
          Ticket++
        }
      }
    }
    let tp = votor()
    tp.add()
    tp.add()
    tp.add()
    tp.add()
    tp.getTicket()

Zwei Interviewfragen zu Closures

		// Frage 1:
        window.name = "Das Fenster"; 
        let Objekt = {
            Name: "Mein Objekt",  
            getNameFunc: Funktion () { 
                Rückgabefunktion () {
                    gib diesen Namen zurück;
                };
            }
        };
        Konsole.log(Objekt.getNameFunc()());  
                 // Frage 2:
        window.name = "Das Fenster";
        let Objekt = {
            Name: "Mein Objekt",  
            getNameFunc: Funktion () { 
                lass das = dies; 
                Rückgabefunktion () {
                    gib diesen Namen zurück;
                };
            }
        };
        Konsole.log(Objekt.getNameFunc() ());

Prototyp, Prototypenkette

Prototyp-Objekt

Wirkung:

Durch das Hinzufügen gemeinsamer Eigenschaften und Methoden im Konstruktor zum Prototypobjekt kann Speicher gespart werden

Prototypenkette

Unabhängig davon, von welchem ​​Objekt Sie ausgehen, können Sie Object.prototype finden, indem Sie nach oben nach proto suchen. Diese Kette von Objekten, die mit __proto__ in Reihe verbunden sind, wird als Prototypenkette bezeichnet.

Vollständiges Prototyp-Kettendiagramm

Voraussetzungen für die schematische Darstellung:

Jedes Objekt hat ein __proto__ Attribut, das auf das Prototypobjekt der Konstruktorfunktion verweist.

Jedes Objekt hat eine prototype Eigenschaft, die ein Objekt ist;

Funktionen sind auch Objekte;

Wenn ein Objekt keinen genauen Konstruktor zum Instanziieren hat, betrachten wir es als integrierten Konstruktor.

Eine Instanz von Object; Der Prototyp von Object ist das Prototypobjekt der obersten Ebene und sein __protype__ zeigt auf null ;

Funktion ist ein Konstruktor der obersten Ebene. Sie ist ihr eigener Konstruktor und ihr eigenes Instanzobjekt (in Laiensprache ausgedrückt: sie erstellt sich selbst).

Schematische Darstellung des kompletten Prototyps:

Oben finden Sie ausführliche Erläuterungen zum schwierigen synchronen und asynchronen Bereich, zum Closure-Prototyp und zur Prototypenkette von JS. Weitere Informationen zum synchronen und asynchronen Bereich, zum Closure-Prototyp und zur Prototypenkette von JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!