JavaScript de levage expliqué

Le petit conseil vidéo d'aujourd'hui répond à une question sur Twitter concernant le «levage» par JavaScript. De quoi s'agit-il? Comment ça marche? Que devez-vous savoir à ce sujet? Tout cela sera traité dans cette leçon sur les principes fondamentaux axée sur les débutants..


Screencast complet



Le levage expliqué

Considérons le code suivant:

 var myvar = 'ma valeur'; alerte (myvar); // ma valeur

Bien sûr, l'alerte affichera «ma valeur». C'est évident. Cependant, restez avec moi. Créons ensuite une fonction immédiate, qui alerte la même valeur.

 var myvar = 'ma valeur'; (function () alert (myvar); // ma valeur) ();

D'accord, d'accord. Toujours évident, je sais. Maintenant, jetons une clé dans le mélange et créons une variable locale dans cette fonction anonyme du même nom..

 var myvar = 'ma valeur'; (function () alert (myvar); // undefined var myvar = 'valeur locale';) ();

Hein? Pourquoi l'alerte est-elle affichée? indéfini? Même si nous avons déclaré une nouvelle variable, elle est toujours en dessous de l'alerte; donc il ne devrait pas avoir d'effet, à droite? Faux.


Déclarations variables levées

Dans sa portée actuelle, quel que soit le lieu où une variable est déclarée, elle sera, en coulisse, hissée au sommet. Cependant, seuls les déclaration sera hissé. Si la variable est aussi initialisé, la valeur actuelle, en haut de la portée, sera initialement définie sur indéfini.

Bon, déchiffrons la différence entre les termes, déclaration et initialisation. Supposons la ligne suivante: var joe = 'plombier';

Déclaration
 var joe; // la déclaration
Initialisation
 joe = 'plombier'; // l'initialisation

Maintenant que nous comprenons la terminologie, nous pouvons plus facilement comprendre ce qui se passe sous le capot. Considérons la fonction fausse suivante.

 (function () var a = 'a'; // lignes de code var b = 'b'; // plus de lignes de code var c = 'c'; // antipattern // dernières lignes de script) () ;

Déclarer toutes les variables en haut.

Notez que ce qui est illustré ci-dessus est considéré comme une mauvaise pratique. Néanmoins, en coulisse, toutes ces déclarations de variables - quel que soit leur emplacement dans la portée de la fonction - seront placées au sommet, comme suit:

 (function () var a, b, c; // variables déclarées a = 'a'; // lignes de code b = 'b' // // initialisées // plus de lignes de code c = 'c'; // initialisé // dernières lignes de script) ();

Aha Moment

Si nous revenons maintenant à l'original déroutant indéfini morceau de code, d'en haut:

 var myvar = 'ma valeur'; (function () alert (myvar); // undefined var myvar = 'valeur locale';) ();

Il devrait maintenant avoir un sens parfait pourquoi myvar est en alerte indéfini. Comme nous l’avons appris, dès que la variable locale, myvar, a été déclaré, il a été automatiquement placé en haut de la portée de la fonction… au-dessus de l'alerte. En conséquence, la variable avait déjà été déclarée au moment de l'alerte; Cependant, comme les initialisations ne sont pas levées également, la valeur de la variable est: indéfini.