Contenido principal:
1. Analizar el significado del alcance léxico de JavaScript.
2. Analizar la cadena de alcance de variables.
3. ¿Qué sucede cuando se promocionan nombres de variables?
Recientemente, estaba explicando cursos de JavaScript en Chuanzhi Podcast. Muchos amigos sintieron que JavaScript era muy simple, pero no sabían cómo usarlo, así que preparé contenido para compartir con ustedes.
Esta serie explica principalmente las partes avanzadas de JavaScript, incluidas cadenas de alcance, cierres, patrones de llamada de funciones, prototipos y cosas orientadas a objetos. La sintaxis básica de JavaScript no se incluye aquí. Si necesita conocer los conceptos básicos, los estudiantes pueden ir a http. : Vaya a //net.itcast.cn para descargar videos gratuitos para aprender. Bien, sin más preámbulos, vayamos directamente a nuestro tema.
1. Acerca del alcance a nivel de bloque
Hablando del alcance variable de JavaScript, es diferente del lenguaje tipo C que usamos habitualmente.
Por ejemplo, el siguiente código en C#:
Copie el código de código de la siguiente manera:
vacío estático principal (cadena [] argumentos)
{
si (verdadero)
{
número int = 10;
}
System.Console.WriteLine(núm);
}
Si este código se compila, no se aprobará porque "el nombre número no existe en el contexto actual".
El alcance de las variables está limitado por llaves y se denomina alcance a nivel de bloque.
En el alcance a nivel de bloque, todas las variables están dentro de las llaves de la definición, desde el principio de la definición hasta el final de las llaves.
Se puede utilizar dentro del alcance. No se puede acceder a él fuera de este alcance. En otras palabras, el código.
Copie el código de código de la siguiente manera:
si (verdadero)
{
número int = 10;
System.Console.WriteLine(núm);
}
Es accesible aquí porque la variable se define y se utiliza dentro de las mismas llaves.
Pero es diferente en JavaScript. No existe el concepto de alcance a nivel de bloque en JavaScript.
2. Alcance en JavaScript
En JavaScript, el siguiente código:
Copie el código de código de la siguiente manera:
si (verdadero) {
varnum = 10;
}
alerta(núm);
El resultado de la operación es una ventana emergente 10. Entonces, ¿cómo se limita el alcance de las variables en JavaScript?
2.1 La función limita el alcance de la variable
En JavaScript, sólo las funciones pueden limitar el alcance de una variable. ¿Qué significa eso?
Es decir, en JavaScript, se puede acceder a las variables definidas dentro de una función dentro de la función, pero fuera de la función.
No se puede acceder. Vea el siguiente código:
Copie el código de código de la siguiente manera:
var func = función() {
varnum = 10;
};
intentar {
alerta(núm);
} atrapar (e) {
alerta(e);
}
Cuando se ejecuta este código, se generará una excepción y la variable número no está definida. En otras palabras, la variable definida en la función no puede.
Usado fuera de la función, por supuesto, se puede usar libremente dentro de la función, incluso antes de la asignación. Consulte el siguiente código:
Copie el código de código de la siguiente manera:
var func = función() {
alerta(núm);
varnum = 10;
alerta(núm);
};
intentar {
función();
} atrapar (e) {
alerta(e);
}
Después de ejecutar este código, no se generará ningún error y la ventana emergente aparecerá dos veces, respectivamente, indefinida y 10 (en cuanto a por qué, lo explicaré a continuación).
Se puede ver desde aquí que solo se puede acceder a las variables dentro de una función. De manera similar, también se puede acceder a las funciones dentro de la función.
2.2 El subdominio accede al dominio principal
Como se mencionó anteriormente, una función puede limitar el alcance de una variable, por lo que la función en la función se convierte en un subdominio del alcance.
El código en puede acceder a variables en el dominio principal. Consulte el siguiente código:
Copie el código de código de la siguiente manera:
var func = función() {
varnum = 10;
var sub_func = función() {
alerta(núm);
};
sub_func();
};
función();
El resultado de ejecutar este código es 10. Puede ver el acceso a la variable mencionado anteriormente, pero al acceder al dominio principal en el dominio secundario.
El código también es condicional, como el siguiente código:
Copie el código de código de la siguiente manera:
var func = función() {
varnum = 10;
var sub_func = función() {
varnum = 20;
alerta(núm);
};
sub_func();
};
función();
Este código tiene un "var num = 20;" más que antes. Este código está en el subdominio, por lo que el subdominio accederá al dominio principal.
Ha habido un cambio, el resultado impreso por este código es 20. Es decir, el número al que accede el subdominio en este momento es una variable en el subdominio, no el dominio principal.
Se puede ver que existen ciertas reglas de acceso. Cuando se utilizan variables en JavaScript, el intérprete de JavaScript primero.
Busque en el dominio del usuario para ver si hay una definición de la variable. Si es así, utilice esta variable; si no, busque la variable en el dominio principal.
Por analogía, hasta que aún no se encuentre el alcance de nivel superior, se generará una excepción "la variable no está definida". Consulte el siguiente código:
Copie el código de código de la siguiente manera:
(función() {
varnum = 10;
(función() {
varnum = 20;
(función(){
alerta(núm);
})()
})();
})();
Después de ejecutar este código, se imprime 20. Si se elimina "var num = 20;", se imprime 10 de manera similar, si se elimina "var num = 20;".
"var num = 10", se producirá un error indefinido.
3. Cadena de alcance
Con la división de alcances de JavaScript, los alcances de acceso de JavaScript se pueden conectar en una estructura de árbol encadenada.
Una vez que se pueda entender claramente la cadena de alcance de JavaScript, las variables y cierres de JavaScript serán muy claros.
El siguiente método utiliza el dibujo para dibujar la cadena de alcance.
3.1 Reglas de dibujo:
1) La cadena de alcance es una matriz de objetos.
2) Todos los scripts son cadenas de nivel 0, cada objeto ocupa una posición
3) Siempre que vea una función que se extiende hasta formar una cadena, expándala nivel por nivel.
4) Al acceder, primero mire la función actual. Si no está definida, verifique la cadena.
5) Repita esto hasta el nivel 0 de cadena.
3.2 Ejemplos
Mira el código a continuación:
Copie el código de código de la siguiente manera:
varnum = 10;
var func1 = función() {
varnum = 20;
var func2 = función() {
varnum = 30;
alerta(núm);
};
func2();
};
var func2 = función() {
varnum = 20;
var func3 = función() {
alerta(núm);
};
func3();
};
func1();
func2();
Analicemos este código:
-> En primer lugar, todo el código es de alcance global y se puede marcar como una cadena de alcance de nivel 0. Luego hay una matriz.
var link_0 = [num, func1, func2];//Descrito aquí con pseudocódigo
-> Aquí func1 y func2 son funciones, por lo que se derivan dos cadenas de alcance de nivel 1, a saber
var link_1 = { func1: [ num, func2 ] } // Descrito aquí con pseudocódigo
var link_1 = { func2: [ num, func3 ] } // Descrito aquí con pseudocódigo
-> La primera cadena de nivel 1 deriva de la cadena de nivel 2
var link_2 = { func2: [ num ] } // Descrito aquí con pseudocódigo
-> La cadena del segundo nivel 1 no tiene variables definidas y es una cadena vacía, que se expresa como
var enlace_2 = {func3: [ ] };
-> Al integrar el código anterior, la cadena de alcance se puede expresar como:
Copie el código de código de la siguiente manera:
//Descrito aquí con pseudocódigo
var link = [ // cadena de nivel 0
número,
{ func1 : [ // La primera cadena de nivel 1
número,
{ func2 : [ // Cadena de nivel 2
número
] }
]},
{ func2 : [ // La cadena del segundo nivel 1
número,
{func3: []}
]}
];
-> Representado como una imagen como
Figura: 01_01 cadena de alcance.bmp
Nota: Utilice el código js para expresar el diagrama de cadena y quedará muy claro cuando se resalte.
Con este diagrama de cadena de alcance, puede comprender claramente cómo se realiza el acceso a las variables:
Cuando necesite utilizar una variable, primero busque la variable en la cadena actual. Si la encuentra, úsela directamente.
Busque hacia arriba; si no lo encuentra, busque en la cadena de alcance de un nivel hasta la cadena de alcance de nivel 0.
Si puede determinar muy claramente el nivel de la cadena de alcance al que pertenece una variable, entonces al analizar JavaScript
Es muy fácil cuando se trata de codificar y usar funciones avanzadas de JavaScript como cierres (al menos para mí).
3. Promoción de nombre de variable y promoción de nombre de función
Con las cadenas de alcance y las reglas de acceso variable, existe un problema muy espinoso. Veamos primero lo siguiente.
Código JavaScript:
Copie el código de código de la siguiente manera:
varnum = 10;
var func = función() {
alerta(núm);
varnum = 20;
alerta(núm);
};
función();
¿Cuál será el resultado de la ejecución? Puedes pensarlo, no revelaré la respuesta todavía.
Analicemos este código primero.
Hay una cadena de alcance de nivel 0 en este código, que contiene los miembros num y func. En func, hay una función de nivel 1.
Cadena de dominio, que contiene el número de miembro. Por lo tanto, al llamar a la función func, se detectará que está en el alcance actual.
La variable num ha sido definida, por lo que se utilizará esta variable. Sin embargo, a num no se le asigna un valor en este momento porque el código.
El código se ejecuta de arriba a abajo. Por lo tanto, la primera impresión no está definida y la segunda impresión es 20.
¿Lo hiciste bien?
También es común en JavaScript definir el código en la parte posterior y usarlo en el frente como este
Pregunta en este momento, es como si la variable estuviera definida al principio y el resultado es como el siguiente código:
Copie el código de código de la siguiente manera:
varnum = 10;
var func = función() {
var num;// Parece que se ha definido aquí, pero no hay ninguna asignación.
alerta(núm);
varnum = 20;
alerta(núm);
};
función();
Este fenómeno a menudo se denomina promoción de nombre de variable. También existe la promoción de nombre de función, por ejemplo, el siguiente código:
Copie el código de código de la siguiente manera:
var func = función() {
alert("Llamar función externa");
};
var foo = función() {
función();
var func = función() {
alert("Llamar función interna");
};
función();
};
Bien, ¿cómo se ve este código? O debería haber algo diferente, ¡no dejaré que los lectores piensen!
Daré la respuesta en el próximo artículo.
Debido a estas diferencias, durante el desarrollo real, se recomienda escribir todas las variables al principio.
Es decir, las variables se definen al comienzo de la función, similar a las disposiciones del lenguaje C. Esto también es cierto en las bibliotecas js.
Esto se hace, como jQuery, etc.
4. Resumen
Bien, este artículo explica principalmente de qué se trata el alcance léxico de JavaScript y su explicación.
¿Cómo analizar la cadena de alcance y el estado de acceso de las variables? ¡Terminemos con un ejercicio más! ! !
Vea cuál es el resultado de ejecutar el siguiente código:
Copie el código de código de la siguiente manera:
si (! "a" en la ventana) {
var a = "definir variable";
}
alerta(a);