Hoisting de JavaScript

El lifting (Hoisting) es el comportamiento predeterminado de JavaScript que mueve las declaraciones al principio.

Las declaraciones de JavaScript se elevan

En JavaScript, se puede declarar una variable después de usarla.

En otras palabras, se puede usar antes de declarar la variable.

Ejemplo 1 ConEjemplo 2 Los resultados son los mismos:

Ejemplo 1

x = 5; // Asignar 5 a x
elem = document.getElementById("demo"); // Buscar elemento
elem.innerHTML = x;                     // Mostrar x en el elemento
var x; // Declarar x

¡Pruebe personalmente!

Ejemplo 2

var x; // Declarar x
x = 5; // Asignar 5 a x
elem = document.getElementById("demo"); // Buscar elemento
elem.innerHTML = x;                     // Mostrar x en el elemento

¡Pruebe personalmente!

Para entender esto, debes entender el término "lifting".

El lifting es el comportamiento predeterminado de JavaScript que eleva todas las declaraciones al nivel superior del ámbito actual (al nivel superior del script o de la función actual).

las palabras clave let y const

usar let o const Las variables declaradas y las constantes no se elevan!

Por favor, en JS Let / Const Lea más sobre let y const en.

La inicialización de JavaScript no se eleva

JavaScript solo eleva las declaraciones, no la inicialización.

Ejemplo 1 ConEjemplo 2 Los resultados son diferentes:

Ejemplo 1

var x = 5; // Inicializar x
var y = 7; // Inicialización de y
elem = document.getElementById("demo"); // Buscar elemento
elem.innerHTML = x + " " + y;           // Mostrar x y

¡Pruebe personalmente!

Ejemplo 2

var x = 5; // Inicializar x
elem = document.getElementById("demo"); // Buscar elemento
elem.innerHTML = x + " " + y;           // Mostrar x y
var y = 7; // Inicialización de y

¡Pruebe personalmente!

¿Es razonable que el y en el último ejemplo aún esté sin definir?

Porque solo la declaración (var y) y no la inicialización (=7) se elevan al nivel superior.

Debido al hoisting, y se ha declarado antes de su uso, pero debido a que no se ha elevado la inicialización, el valor de y sigue siendo undefined.

El ejemplo 2 también es así:

Ejemplo

var x = 5; // Inicializar x
var y;     // Declarar y
elem = document.getElementById("demo"); // Buscar elemento
elem.innerHTML = x + " " + y;           // Mostrar x y
y = 7;    // Asignar 7 a y

¡Pruebe personalmente!

¡Declarar sus variables en la parte superior!

El hoisting (para muchos desarrolladores) es un comportamiento desconocido o ignorado de JavaScript.

Si el desarrollador no entiende el hoisting, el programa podría contener errores (errores).

Para evitar errores, declare siempre todas las variables al principio de cada ámbito.

Dado que así es como JavaScript interpreta el código, mantenga este buen hábito.

El modo estricto de JavaScript no permite el uso de variables sin declarar.

Aprenda más en el siguiente capítulo:use strict。”