Hablando de mi comprensión del alcance en JavaScript

¿Qué es el alcance?

Ámbito: El ámbito en el que una variable puede tener efecto. Las variables no están disponibles en todas partes, y el ámbito de uso de esta variable es el ámbito del que estamos hablando.

Nota: En JavaScript, el alcance también se divide entre llaves, pero las llaves que pueden limitar efectivamente el alcance en JS son solo llaves funcionales.

Clasificación del alcance

- Alcance global (no dentro de ninguna función)

El alcance global es el alcance más grande.
Las variables definidas en el alcance global se pueden usar en cualquier lugar
Cuando se abre la página, el navegador generará automáticamente una ventana de alcance global para nosotros
Este alcance siempre existirá hasta que la página se cierre y se destruya.

Por favor, vea el código de muestra a continuación

var a = 10;
console.log(a);  //输出结果为  10
function fn(){
    console.log(a);   // 输出结果也是10
}
fn()

Cuando la variable a se declara usando var, no hay llaves de función envueltas en este momento, entonces esta variable se llama variable global

Se puede acceder a esta variable global desde cualquier lugar.

- Ámbito local (dentro de una función)

El ámbito local es un ámbito relativamente pequeño abierto bajo el ámbito global.
Las variables definidas en un ámbito local solo se pueden usar dentro de este ámbito local
En JS solo las funciones pueden generar un alcance local, nada más
Cada función es un ámbito local.

Por favor, vea el código de muestra a continuación

// 下面这个 num 是一个全局作用域下的变量  在任何地方都可以使用
var num = 100;

function fn(){
//    下面这个 num 变量就是一个 fn 局部作用域内部的变量 
//    只能在  fn  函数内部使用   
    var num = 200
    console.log(num)   // 输出结果：200
}
fn()
console.log(num)   // 输出结果：100

Como se puede ver en el código anterior:

Las variables declaradas en función de llaves se llaman variables locales

Una variable local solo se puede utilizar dentro del ámbito en el que se declara.

Estamos acostumbrados a ver el caso general, ahora mira un caso especial:

Las variables se declaran sin la palabra clave var:

¡Aviso! ¡Esta es una forma irregular de declararlo! ¡No utilice! ¡No utilice! ¡No utilice!

El resultado después del uso es: ¡también se puede acceder globalmente a una declaración de una variable local! (Tales declaraciones se llaman variables pseudo-globales)

Por favor, vea el código de ejemplo a continuación:

function fn(){
    a = 100;  //此时声明变量 a  没有使用  var  关键字进行声明
    console.log(a);   输出结果为 100
}
console.log(fn())   //输出结果为  100   竟然不会报错！！！

Después de leer el código de muestra anterior, de repente siento que esto no es muy bueno. , la variable a se puede usar casualmente, y no se reportará ningún error. Aquí, ¿debe tener dudas en su mente? ¿porqué es eso? ? ?

Entonces, sigue leyendo, ¡esta forma de escribir es muy peligrosa! ! !

Al convertir una variable local en una variable pseudo-global:

Usted encontrará:

El ciclo de vida se ha alargado, provocando ciertos efectos negativos;
Ocupa el espacio de nombres global, lo que provoca errores impredecibles

Aquí para explicar, ¿ qué es el ciclo de vida ? ? ¿ Qué es un espacio de nombres ? ? ? por favor sigue leyendo

Lifetime (cuánto tiempo vive esta variable en la memoria)

Es decir, ¡puedes acceder a esta variable en cualquier momento!

La diferencia entre la vida útil de las variables globales y las variables locales

- Variables globales: el ciclo de vida está sincronizado con el programa, y la variable siempre existirá hasta que se cierre el programa; ¡

el resultado es que el programa se volverá más pesado! ¡Si es posible, creo que es mejor configurar variables un poco menos globales! bueno para los desarrolladores

- Variables locales: el ciclo de vida se sincroniza con la ejecución de la función, y la variable se elimina cuando finaliza la ejecución de la función;

Este es el llamado ciclo de vida. Si hay demasiadas variables globales, realmente puede afectar la eficiencia de ejecución de nuestro programa. Esta es la razón de las variables pseudo-globales mencionadas anteriormente.

Después de entender el ciclo de vida, ¡echemos un vistazo al espacio de nombres!

Espacio de nombres (exclusividad de la denominación de nombres de variables)

- Variables globales: el espacio de nombres es único y solo hay uno por página

Echa un vistazo al código de ejemplo a continuación:

var a = 100;
function fn(){
    // 程序的懒惰原则：函数的大括号之中如果已经有了 var 查找结果，那么就不会计息再查找了
    // 这是就近原则
    var a = 0;
    console.log(a)   //  输出结果：0
}
console.log(fn())   // 输出结果：100

Para resolver el problema de que el espacio de nombres en el global es el único, podemos poner esta variable localmente, de modo que el espacio de nombres global no esté ocupado.

- Variables locales: solo hay un espacio de nombres por ámbito

Las funciones anónimas se pueden usar para resolver el problema del espacio de nombres

Aquí hay un problema: voy a escribir mucho código ahora y necesito cooperar con el código de otras personas. ¿Qué debo escribir en este momento? ? ?

Permita que la función anónima se someta a una operación: si ocurre una operación específica en la función, entonces esta función se considerará como una dirección;

// fn(); //报错 ：fn is not a function;
// var fn = function(){
//     console.log("hi");
// }
// fn();



// 用声明的方式 定义函数，会有声明的提升
fn();
function fn(){
    console.log("hi");
}
fn();

Finalmente llegar a un resumen!

1. Lo global no puede acceder a lo local
2. Lo local puede obtener lo global