Si no puede entender el mecanismo de ejecución del lenguaje JavaScript, o simplemente no puede dominar la orden de ejecución de JavaScript, entonces es como un Bole que no puede controlar un caballo de mil millas, lo que permite que el caballo de mil millas escape y corra alrededor.
Entonces, ¿cómo analiza JavaScript? ¿Cuál es su orden de ejecución? Antes de entender estos, primero entendamos algunos términos importantes:
1. Bloque de código
Un bloque de código en JavaScript se refiere a un segmento de código dividido por la etiqueta <script>. Por ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
alerta ("Este es el bloque de código uno");
</script>
<script type = "text/javaScript">
alerta ("Este es bloque de código dos");
</script>
JS se compila y ejecuta de acuerdo con los bloques de código. ¿Qué significa?
La copia del código es la siguiente:
<script type = "text/javaScript">
alerta (str); // Debido a que STR no está definido, el navegador tendrá un error y el siguiente no se puede ejecutar
alerta ("Soy un bloque de código uno"); // no ejecutar aquí
var test = "Soy una variable de bloque de código";
</script>
<script type = "text/javaScript">
alerta ("Soy un bloque de código dos");
alerta (prueba); /Popt "Soy una variable de bloque de código"
</script>
En el código anterior, se informa un error en el bloque de código uno, pero no afecta la ejecución del bloque de código dos. -Cambruando el bloque.
2. Funciones declarativas y funciones de asignación
Las definiciones de funciones en JS se dividen en dos tipos: funciones declarativas y funciones de asignación.
La copia del código es la siguiente:
<script type = "text/javaScript">
función fn () {// función declarativa
}
var fn = function {// Función de asignación
}
</script>
La diferencia entre una función declarativa y una función de asignación es que durante el período de precompilación de JS, la función declarativa se extraerá primero, y luego el código JS se ejecutará en orden.
3. Período de precompilación y período de ejecución
De hecho, el proceso de análisis de JS se divide en dos etapas: período de precompilación (preprocesamiento) y período de ejecución.
Durante el período de precompilación, JS procesará todas las variables y funciones declaradas en este bloque de código (similar a la compilación de C), pero debe tenerse en cuenta que en este momento, lo único que maneja las funciones es declarativa, y las variables son solo declarado.
La copia del código es la siguiente:
<script type = "text/javaScript">
Fn () ;/
función fn () {// función 1
alerta ("La función 1 fue ejecutada");
}
función fn () {// función 2
alerta ("La función 2 fue ejecutada");
}
</script>
<script type = "text/javaScript">
Fn () ;/
función fn () {// función declarativa
alerta ("función declarada ejecutada");
}
var fn = function () {// Función de asignación
alerta ("Ejecutar la función de asignación");
}
</script>
// Bloque de código uno
<script type = "text/javaScript">
alerta (str); // El error del navegador informó, pero la ventana de información no apareció
</script>
// bloque de código dos
<script type = "text/javaScript">
alerta (str);
var str = "aaa";
</script>
// JS declara la variable durante el período de preprocesamiento, pero no inicializa y asigna valores, por lo que la variable en el bloque de código 2 no se produce, mientras que la variable en el código uno no existe en absoluto, por lo que el navegador informa un error.
Después de comprender los términos anteriores, creo que tiene una impresión aproximada del mecanismo de carrera de JS.
La copia del código es la siguiente:
<script type = "text/javaScript">
FN ();
</script>
<script type = "text/javaScript">
función fn () {// función 1
alerta ("La función 1 fue ejecutada");
}
</script>
¿Por qué el navegador informa un error al ejecutar el código anterior? ¿No se procesa la función de declaración durante el período de preprocesamiento? De hecho, este es un punto de malentendido. Código.
Ahora, resumamos y organizemos:
La copia del código es la siguiente:
Paso 1. Lea el primer bloque de código.
Paso 2. Haga análisis de sintaxis.
Paso 3. Haga el "procesamiento de precompilación" de las variables VAR y las definiciones de funciones (nunca se informará el error porque solo se analiza la declaración correcta).
Paso 4. Ejecute el segmento de código, y si hay algún error, se informará un error (como la variable no está definida).
Paso 5. Si hay otro segmento de código, lea el siguiente segmento de código y repita el paso 2.
Paso 6.
De acuerdo con la orden de ejecución de las secuencias de documentos HTML, el código JS que debe ejecutarse antes de la representación de los elementos de la página debe colocarse en el bloque de código <script> antes de <body>, y el JS después de que se carguen los elementos de la página se deben colocar En el </body> después del elemento, el evento de entrada de la etiqueta del cuerpo se ejecuta al final.
La copia del código es la siguiente:
<script type = "text/javaScript">
alerta ("primero");
función fn () {
alerta ("tercero");
}
</script>
<Body onload = "fn ()">
</body>
<script type = "text/javaScript">
alerta ("segundo");
</script>