Entrevistador front-end: hable sobre el alcance en JavaScript, ¿no es así? Próximo

Prefacio

Aprender cualquier lenguaje de programación requiere conocimiento del alcance. Porque el alcance afectará la definición y el ciclo de vida del identificador. ~~No me siento convincente, es demasiado pálido para~~ decir mucho, estudiemos juntos ~

El papel del alcance en la programación

Considero el alcance como un 'objeto', este objeto tiene su propio temperamento (ps: el temperamento es la regla) pero no podemos acceder al objeto de forma codificada. Existe dentro del motor de JavaScript y se usa para administrarlo de acuerdo con a las reglas. Cómo funciona el motor en el ámbito actual. Una comprensión profunda del alcance nos permite identificar mejor el rango válido de identificadores y la búsqueda de identificadores durante el proceso de codificación.

Clasificación de alcance

En el lenguaje de JavaScript, se usa el alcance léxico; es decir, donde escribe variables y alcances a nivel de bloque cuando escribe código. (Ps: puede entenderse como alcance estático).

Lo opuesto al alcance estático es el alcance dinámico. Por supuesto, JavaScript también tiene algunos casos especiales que usan alcance dinámico. Como eval (...) y con. (PD: teniendo en cuenta los problemas de rendimiento, generalmente no se recomienda).

Cuando estamos codificando y definiendo variables, ya hemos determinado el alcance de estas variables.Cómo analizar el alcance efectivo de estas variables, primero debemos entender la clasificación del alcance de JavaScript. Los ámbitos de JavaScript son:

Alcance global
Alcance de la función
Alcance del bloque

Alcance global

El alcance global puede entenderse como el alcance efectivo de la variable al que se puede acceder en cualquier ubicación del código.

La ventana es un objeto global, por lo que las propiedades del objeto de la ventana tienen un alcance global

Luego, las funciones declaradas por función en la capa más externa del código, las variables declaradas por var fuera de la función más externa y las operaciones directas de asignación de consultas LHS sin declaración de palabras clave se montarán en el objeto de ventana. Como se muestra en el siguiente código:

 function foo(){
    innerValueB=4	//会先在window对象上创建一个innerValueB属性再赋值
    console.log('foo')
}
    foo();
    var outValueB=3;
    console.log('window:',this,this.foo,this.outValueB,this.innerValueB)

En la capa más externa de la función a través de la declaración let y const

Las variables declaradas por let o las constantes declaradas por const no están vinculadas al objeto de ventana, pero si declaras en el nivel más externo de la función, también pertenecen al ámbito global.

let a=3;
console.log(this.a,this)	//undefined window

Para definir y declarar variables de la forma descrita anteriormente, todas son variables globales. El motor del navegador no lo reciclará (ps: a menos que se establezca manualmente como nulo). Luego, con el aumento de variables globales en el proyecto, no solo causará conflictos de nombres de variables, sino que también puede causar pérdidas de memoria.

Visible: las variables globales deben usarse lo menos posible en el proceso de codificación.

Alcance de la función

El alcance de la función es la variable declarada dentro de la función (ps: se puede llamar variable local), entonces el alcance efectivo de la variable es generalmente accesible dentro de la función. Por supuesto que hay casos especiales (excepto ps: cierres).

El alcance de la función se genera automáticamente mediante declaraciones de función y expresiones de función, por ejemplo:

function foo1(){...}			//通过function声明 foo1
(function foo2(){...})();	//立即执行函数 foo2

La función foo1 está declarada en el alcance global, por lo que se puede acceder a foo1 desde cualquier ubicación, pero solo se puede acceder a sus variables internas en {...}, y la función foo2 significa que solo se puede acceder a foo2 en {...}, otros La ubicación es inaccesible y solo se puede acceder a sus variables internas en {...}.

El alcance de la función se puede considerar como una burbuja, no importa si la función se ejecuta o no, no se puede acceder a las variables internas fuera de la función (ps: excepto para los cierres). Por ejemplo, el siguiente código informaráReferenceError: a is not defined

function bar(){
    var a=2;
}
bar();	//无论bar有没执行,a变量都无法在外部获取
console.log(a)

Cuando se encuentra una función anidada, el motor buscará capa por capa desde adentro hacia afuera, como por ejemplo:

function bar(){
	var a=2;	//局部变量 a
    function next(){
    	var b=a;
        console.log(b);
    }
}
bar();	//执行bar最终输出b的值为2

El alcance de la función ocultará la implementación interna. Cuando se ejecuta la función, el ciclo de vida de las variables internas también terminará (ps: excepto cierres) sin contaminar el alcance externo.

Alcance del bloque

El alcance a nivel de bloque no tiene tal concepto en ES5, pero alguna sintaxis de ES6 agrega color a js. El alcance a nivel de bloque también se puede considerar como una burbuja, y la variable declarada no puede salir de la burbuja. Con el alcance a nivel de bloque, se puede acceder al rango efectivo de la variable dentro del rango de {...}.

Las variables declaradas con let y las constantes declaradas con const secuestrarán automáticamente el alcance a nivel de bloque, como por ejemplo:

if(true){
	let a=3
}
console.log(a)	//ReferenceError: a is not defined

for(let b=0;b<3;b++){
	console.log(b)
}
console.log(b) //ReferenceError: b is not defined

Como el código anterior convierte letpalabras clave en varpalabras clave, la situación de salida es otra situación. La razón es que las variables declaradas por let generarán automáticamente un alcance a nivel de bloque. Cuando se ejecuta la instrucción if o el bucle for, las variables también se destruyen. , El final del ciclo de vida.

Lo anterior es el alcance de JavaScript, entonces, ¿cómo realiza el motor js la consulta de alcance para las variables gratuitas?

** Todos hablaremos de la consulta de alcance a través de la consulta de adentro hacia afuera, ¡sí! Pero preste atención a un requisito previo: la consulta es desde adentro hacia afuera en el alcance cuando se crea el identificador de definición. **

Por ejemplo:

var a = 100
function F1() {
    var b = 200
    function F2() {
        var c = 300
        console.log(a) // a的查询顺序F2=>F1=>window
        console.log(b) // a的查询顺序F2=>F1
        console.log(c) // c的查询顺序F2=>F1=>window,没找到报（ReferenceError）
    }
    F2()
}
F1()

El siguiente código fn se define en el ámbito global, por lo que el valor de x es 10. ** El valor de x no tiene nada que ver con donde se llama a fn, está relacionado con donde se define y se crea fn **.

var x = 10
function fn() {
  console.log(x)	//x的查询顺序fn=>window
}
function show(f) {
  var x = 20;
  (function() {
    f() //10，而不是20
  })()
}
show(fn)

Suplemento : La búsqueda de alcance consiste en realizar consultas desde el interior hacia el exterior, recuerde que sus reglas de consulta se especifican cuando se crea la definición. Esto también verifica el concepto de que js es un alcance estático. El y el contexto de ejecución son dos conceptos diferentes. (Ps: no confundas)

El contexto de ejecución se basa en dónde se llama la ejecución para determinar la ejecución de lo anterior, es dinámico. ¡Recuerda recordar! !

para resumir

Después de volver a aprender el alcance de JavaScript, tengo una nueva comprensión del conocimiento. Grabar y compartir es un gran proceso. Nos vemos en la sección de comentarios si tiene nuevas ideas y preguntas. La próxima vez compartiré una estructura especial como el cierre del alcance ~~

Además, hice una serie de preguntas de la entrevista inicial en mi tiempo libre. Los amigos que lo necesiten pueden hacer clic en las letras azules a continuación para leer: