Problème de promotion d'identifiant dans les astuces JavaScript_javascript

JS a une promotion variable. Cette conception est en fait médiocre, ou c'est un effet secondaire de l'implémentation du langage. Il permet d'accéder aux variables sans déclaration, ou de les déclarer plus tard et de les utiliser en premier. Les débutants sont confus par cela, et même de nombreux vétérans qui utilisent JS depuis de nombreuses années sont confus. Mais après que ES6 ait ajouté let/const, la variable Hoisting n'existe plus.

1. La variable n'est pas déclarée, utilisez-la directement

function test() {
  alert(notDefined);
}
test(); // ?

Il est naturel de signaler les erreurs

2. Déclaration des variables à la fin

function test() {
  alert(declaredButNotAssigned); // undefined
  var declaredButNotAssigned;
}
test();

Sortie non définie, le résultat est amélioré par rapport à l'exemple ci-dessus, aucune erreur n'est signalée, le code peut s'exécuter, mais la valeur de la variable peut ne pas être celle attendue par le programmeur.

3. Déclarez la variable à la fin et attribuez une valeur à la variable en même temps

function test() {
  alert(declaredAndAssigned); // undefined
  var declaredAndAssigned = 1;
}
test();

Le résultat est le même que deux. Évidemment, 1 ne sera pas affiché uniquement à cause de l'affectation.

Les deux et trois ont un levage variable (Hoisting), défini simplement

Promotion des variables : dans la portée spécifiée, en termes d'ordre du code, les variables sont d'abord utilisées puis déclarées, mais "l'accessibilité" de la variable au moment de l'exécution est promue en haut de la portée actuelle et sa valeur n'est pas définie. , et il n'y a pas de "disponibilité"".

L'accent est mis ici sur « l'ordre du code » et « l'ordre d'exécution » car la plupart du temps, le code que nous écrivons est exécuté séquentiellement, c'est-à-dire que « l'ordre du code » et « l'ordre d'exécution » sont cohérents. Ceci est également cohérent avec le processus de réflexion du cerveau humain. Par exemple, les programmeurs ayant une expérience en langage C

#include <stdio.h>
int main() {
  int x = 1;
  printf("%d, ", x); // 1
}

Deux lignes de code, déclarez d'abord le type entier x, puis affichez-le. La séquence de code et la séquence d'exécution sont cohérentes, c'est-à-dire un fonctionnement normal.

Si la commande est inversée

#include <stdio.h>
int main() {
  printf("%d, ", x); // error
  int x = 1;
}

À ce stade, la compilation ne peut pas passer. Mais cela peut être écrit à l’envers en JS, voir 2 et 3.

Par conséquent, les programmeurs expérimentés dans les langages de type C savent que les variables doivent d'abord être déclarées puis utilisées, sinon une erreur sera signalée. En JS, il existe un phénomène de promotion variable, qui peut être utilisée d'abord puis déclarée. L'expérience du C est utilisée en JS, et une confusion surgit.

4. Les expressions de fonction ont également une promotion variable

function test() {
  alert(func); // undefined
  var func = function() {};
}
test();

Mais si vous souhaitez utiliser cette fonction, ce n'est pas possible

function test() {
  alert(func); // undefined
  func(); // 报异常
  var func = function() {};
}
test();

La fonction résultat n'est pas définie et l'appel de func signalera une exception. L'accessibilité et la disponibilité sont mentionnées dans la définition ci-dessus et correspondent aux énoncés suivants.

Accessibilité : alert(func), sortie non définie, peut être exécutée, func accessible.

Disponibilité : func() signale une exception et func ne peut pas être appelé normalement, indiquant une absence de disponibilité.

Les deuxième, troisième et quatrième sont toutes des variables déclarées à l'aide de var. Les déclarations de fonctions dans JS seront également améliorées, mais cette "variable" est spéciale. C'est un type de fonction (peut être utilisée comme fonction, méthode ou constructeur). . Son nom (identifiant) est également hissé en haut du périmètre actuel.

5. Le nom de la déclaration de fonction sera également promu en haut de la portée actuelle

function test() {
  alert(f1); // function
  f1(); // "called"
  function f1() {
    alert('called');
  }
}
test();

Nous voyons que f1 est déclaré à la fin du code et que f1 est utilisé en premier. alert(f1) et f1() sont exécutés normalement, indiquant que l'accessibilité et la convivialité sont toutes deux présentes.

Comme mentionné précédemment, le levage de variables ne sert à rien. C'est une mauvaise conception du langage. La bonne habitude est de "déclarer d'abord puis d'utiliser". Cette fonctionnalité apparaîtra également dans de nombreuses questions d'entretien de grandes entreprises

Question 1 :

// 写出以下代码的运行结果
var a = 1;
function fn() {
  if (!a) {
    var a = 2;
  }
  alert(a); // ?
}
fn();

Question 2 :

// 写出以下代码的运行结果
var a = 1;
function fn() {
  a = 2;
  return;
  function a() {}
}
fn();
alert(a); // ?

Mais tout cela s'est terminé avec l'arrivée de let/const dans ES6. À l'exception des variables globales, tout le reste dans ES utilise let/const. Après avoir remplacé var par let, la promotion des variables n'existe plus.

function test() {
  alert(declaredButNotAssigned1); // 报异常
  alert(declaredButNotAssigned2); // 报异常
  alert(func); // 报异常

  let declaredButNotAssigned1;
  let declaredButNotAssigned2 = true;
  let func = function() {};
}
test();

Cela oblige les programmeurs à développer de bonnes habitudes. Les variables doivent être "déclarées d'abord puis utilisées", sinon une erreur sera signalée.

Ce qui suit est extrait de la description par MDN de la promotion variable lorsque let ne se produit pas

Copier le code Le code est le suivant :

Dans ECMAScript 6, let ne hisse pas la variable en haut du bloc. Si vous référencez une variable dans un bloc avant que la déclaration let pour cette variable ne soit rencontrée, cela entraîne une ReferenceError, car la variable est dans un état « mort temporel ». zone" depuis le début du bloc jusqu'à ce que la déclaration soit traitée.

Après avoir utilisé let pour déclarer des variables, typeof n'est plus sûr

if (condition) {
  alert(typeof num); // Error!
  let num = 100;
}

Dans le passé, vous pouviez utiliser typeof == 'undefined' pour déterminer si une certaine bibliothèque a été introduite, comme jQuery

// 判断jQuery是否引入了
if (typeof $ !== 'undefined') {
  // do something
}...

jQuery n'est pas introduit et $ n'est pas déclaré. Cette phrase ne signalera pas d'erreur et affectera l'exécution du code suivant, mais si elle est déclarée par let, une erreur sera signalée.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.