Explication détaillée d'exemples de promotion de variables en JavaScript

L'éditeur suivant vous apportera l'explication détaillée la plus facile à comprendre de la promotion des variables JavaScript. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour jeter un oeil

comme suit :

a = 'ghostwu';
var a;
console.log( a );

Dans mon Avant de parler de ce qu'est la promotion de variable et des règles de promotion de variable, ou si vous n'avez pas appris la promotion de variable, si vous la comprenez selon le javascript existant, pour l'exemple ci-dessus, vous pourriez penser que le résultat de la troisième ligne de le code ne doit pas être défini. Parce que la deuxième ligne est var a; qui déclare la variable mais n'attribue pas de valeur, la valeur de a n'est pas définie, mais le résultat correct est ghostwu. Quant à savoir pourquoi, veuillez continuer à lire ! 🎜>

Pour l'exemple ci-dessus, dans la première ligne de code, vous pouvez penser qu'une erreur est signalée car la variable a n'est pas définie avant la sortie de a, mais le résultat correct n'est pas défini. Eh bien, cela semble un peu inexplicable, javascript est trop buggé.

console.log( a );
var a = 'ghostwu';

Pour comprendre pourquoi, il faut d'abord clarifier les deux points suivants : Le code Javascript n'est pas exécuté ligne par ligne.

L'exécution de Javascript est divisée en 2 étapes :

Compilation (interprétation/pré-interprétation lexicale)

Exécution

Deuxièmement, lorsque nous rencontrons var a = "ghostwu" définissant une variable, js considère en fait cette phrase comme deux étapes var a se produit dans la phase de compilation, et a = 'ghostwu' se produit. dans la phase d'exécution. Ensuite, var a will est promu au premier plan de la portée actuelle, a = 'ghostwu' reste en place en attendant la phase d'exécution, donc :

a = 'ghostwu';
var a;
console.log( a );

//上面这段代码经过编译之后，变成下面这样

var a; //被提升到当前作用域的最前面
a = 'ghostwu'; //留在原地，等待执行
console.log( a );

console.log( a );
var a = 'ghostwu';

//上面这段代码,经过编译之后，变成下面这样

var a;
console.log( a );
a = 'ghostwu';

Après avoir lu le code compilé, comprenez-vous ?

Avant de continuer, clarifions les deux manières courantes de définir des fonctions :

Parce que les expressions et les déclarations de fonctions, lors de la phase de compilation , différents effets d’interprétation seront produits.

//函数声明, 形如:
  function show(){
   console.log( '函数声明方式' );
  }

  //函数表达式, 形如:
  var show = function(){
   console.log( '表达式方式' );
  }

Comment expliquer le code ci-dessus lors de la phase de compilation ? Retenez simplement la phrase suivante :

show();
  function show(){
   console.log( a );
   var a = 'ghostwu';
  }

La déclaration de fonction sera promue

Ainsi, après compilation, le code ci-dessus devient le suivant :

Ainsi, le résultat ci-dessus n'est pas défini ;

function show(){ //函数声明被提升到 当前作用域的最前面
   var a; //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
   console.log( a );
   a = 'ghostwu';
  }
  show();

ne sera pas promu pour les expressions de fonction, voir l'exemple suivant :

show(); //报错,show is not a function
var show = function(){
 console.log( 'ghostwu' );
}
//对于上面这段表达式代码，经过编译之后:
var show;
show(); //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
show = function(){
 console.log( 'ghostwu' );
}

show(); //你好
  var show;
  function show(){
   console.log( '你好' );
  }
  show = function(){
   console.log( 'hello' );
  }

Pourquoi le résultat du code ci-dessus est-il 'Bonjour' ?

Parce que : Lorsqu'une déclaration de fonction ou une déclaration de variable avec le même nom apparaît, la déclaration de fonction sera promue en premier et la déclaration de variable sera ignorée. Ainsi après compilation, cela devient :

S'il existe une déclaration de fonction du même nom, cette dernière écrasera la précédente, comme suit :

function show(){
   console.log( '你好' );
  }
  show(); //你好
  show = function(){
   console.log( 'hello' );
  }
  show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段 被 重新赋值了

show(); //how are you
  var show;
  function show(){
   console.log( 'hello' );
  }
  show = function(){
   console.log( '你好' );
  }
  function show(){
   console.log( 'how are you!' );
  }
//上面的代码经过编译之后，变成如下形式:
  function show(){
   console.log( 'how are you!' );
  }
  show(); //how are you
  show = function(){
   console.log( '你好' );
  }
  show(); //如果在这里再执行一次，结果：你好

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!