Heim > Artikel > Web-Frontend > Vertiefendes Verständnis der Ausführungsreihenfolge von Javascript_Grundkenntnisse

Vertiefendes Verständnis der Ausführungsreihenfolge von Javascript_Grundkenntnisse

WBOYOriginal: 2016-05-16 16:53:24988Durchsuche

Wenn Sie den Funktionsmechanismus der JavaScript-Sprache nicht verstehen oder einfach ausgedrückt die Ausführungssequenz von JavaScript nicht beherrschen können, dann sind Sie wie Bole, der ein Tausend-Meilen-Pferd nicht kontrollieren und das Tausend-Meilen-Pferd nicht freilassen kann und herumlaufen.

Wie analysiert JavaScript? Wie lautet die Ausführungsreihenfolge? Bevor wir diese verstehen, wollen wir zunächst einige wichtige Begriffe verstehen:

1. Codeblöcke
Codeblöcke in JavaScript beziehen sich auf Codesegmente, die durch <script>-Tags getrennt sind. Zum Beispiel: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50623" class="copybut" id="copybut50623" onclick="doCopy('code50623')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code50623"> <br><script type=" text/javascript" ><br> Alert("Dies ist Codeblock eins");<br></script>

JS wird gemäß Codeblöcken kompiliert und ausgeführt. Die Codeblöcke sind unabhängig voneinander, Variablen und Methoden werden jedoch gemeinsam genutzt. Was bedeutet das? Sie werden zum Beispiel verstehen:

Kopieren Sie den Code Der Code lautet wie folgt:

//js deklariert Variablen während der Vorverarbeitungsphase, initialisiert sie jedoch nicht und weist keine Werte zu, sodass die Variablen in Codeblock zwei undefiniert sind, während die Variablen in Code eins es sind existiert überhaupt nicht, daher meldet der Browser einen Fehler.

Nachdem ich die oben genannten Begriffe verstanden habe, glaube ich, dass jeder einen ungefähren Eindruck vom Funktionsmechanismus von JS hat. Schauen wir uns nun ein Beispiel an:

Code kopieren

Der Code lautet wie folgt:

Warum meldet der Browser einen Fehler, wenn er den obigen Code ausführt? Würde die deklarierte Funktion während der Vorverarbeitungsphase nicht verarbeitet? Warum kann die Fn()-Funktion nicht gefunden werden? Tatsächlich ist dies ein Missverständnis, dass die JS-Engine sequentiell gemäß Codeblöcken ausgeführt werden sollte, was bedeutet, dass nur der ausgeführte Code Funktionen vorverarbeitet und Variablen sowie noch nicht geladene Codeblöcke können nicht vorverarbeitet werden. Dies ist auch der Kern der Verarbeitung beim Kompilieren.

Lassen Sie uns nun zusammenfassen:

Kopieren Sie den Code

Der Code lautet wie folgt: Schritt 1. Lesen Sie den ersten Codeblock. Schritt 2. Führen Sie eine Syntaxanalyse durch. Wenn ein Fehler auftritt, wird ein Syntaxfehler gemeldet (z. B. nicht übereinstimmende Klammern usw.) und mit Schritt 5 fortgefahren. Schritt 3. Führen Sie eine „Vorkompilierungsverarbeitung“ für var-Variablen- und Funktionsdefinitionen durch (es werden niemals Fehler gemeldet, da nur korrekte Deklarationen analysiert werden). Schritt 4. Führen Sie das Codesegment aus und melden Sie einen Fehler, wenn ein Fehler vorliegt (z. B. wenn die Variable undefiniert ist).

Schritt 5. Wenn es ein weiteres Codesegment gibt, lesen Sie das nächste Codesegment und wiederholen Sie Schritt 2.

Schritt 6.

Entsprechend der Ausführungsreihenfolge des HTML-Dokumentflusses sollte der js-Code, der vor dem Rendern des Seitenelements ausgeführt werden muss, im <script>-Codeblock platziert werden. body>, und es muss sich im Seitenelement befinden. Das geladene js wird hinter dem </body>-Element platziert und das Onload-Ereignis des Body-Tags wird am Ende ausgeführt. <br><br><br><br> </div>Code kopieren<br><br><div class="codetitle"> Der Code lautet wie folgt:<span><a style="CURSOR: pointer" data="50219" class="copybut" id="copybut50219" onclick="doCopy('code50219')"><u><script type="text/javascript "> </u> warning("first");</a> function Fn(){</span> warning("third");</div> }<div class="codebody" id="code50219"></script>