Introduction détaillée au mécanisme de promotion des variables dans js

Promotion de variable

Il existe deux types de promotion de variable en JavaScript, les variables déclarées avec var et les variables déclarées avec fonction.

Variables déclarées avec var

Regardons d'abord le code suivant, quelle est la valeur d'un

Code 1

console.log(a);

var a;

Follow From du point de vue de la pensée du langage de programmation passé, le code s'exécute de haut en bas, une erreur sera signalée car lorsque l'exécution atteint la deuxième ligne, la variable a n'a pas été définie, donc l'erreur a est. non défini

sera signalé Cependant, en fait la réponse est indéfinie

D'accord, avec des doutes, regardons le code suivant

var a;
console.log(a);

On constate que ces deux pièces du code sont les mêmes, donc il y a une nouvelle question, qui est : Peu importe qu'il y ait var a ou non. Sa réponse est toujours indéfinie, ce qui crée l'illusion que la variable sera améliorée, j'ai donc écrit le code 3.

Code 3

console.log(a);

D'accord, enfin une erreur a été signalée, cela prouve donc que le code javaScript n'est pas exécuté de haut en bas, du moins en apparence, cela ressemble à ça.

Regardons donc le code 4

Code 4

console.log(a);
var a = 2;

Parce que la variable est promue, la réponse est 2, mais en fait, elle est toujours indéfinie, pourquoi ?

À ce stade, nous devons demander au compilateur, qui est responsable du sale boulot tel que l'analyse syntaxique et la génération de code.

Lorsque le compilateur verra var a = 2;, il le traitera comme deux déclarations, var a; et a = 2. La première déclaration sera faite pendant la phase de compilation, et la deuxième déclaration sera en attente. en place pour la phase d'exécution.

En d'autres termes, le code ci-dessus deviendra le code suivant

var a;
console.log(a);
a = 2;

Donc il finira par être indéfini

D'accord, je vais être verbeux, regarde ce code 5

Code 5

a = 2;
var a;
console.log(a);

Je pense que tout le monde devrait déjà connaître le véritable ordre d'exécution de ce code et sa réponse Oui, la réponse est 2, mais ce que je veux dire c'est. pour changer la 2ème ligne est commentée, la réponse est toujours 2, mais cela n'a rien à voir avec la promotion des variables. Il s'agit de mode strict et de mode non strict. En mode non strict, les développeurs sont autorisés à ne pas utiliser. des mots-clés pour déclarer des variables, mais en mode strict Ce n'est pas possible en mode, il signalera une erreur.

Variables déclarées avec fonction

Comme var, les variables déclarées avec fonction seront toujours promues.

log(5);

function log(mes){
  console.log(mes)
}

D'après la compréhension précédente de la promotion variable, la vraie séquence de ce code est la suivante,

function log(mes){
  console.log(mes)
}

log(5);

Très bien, très correct, alors regardez le morceau de code suivant

log(5);

var log = function(mes){
  console.log(mes)
}

Il a signalé une erreur, log n'est pas une fonction. De là, nous pouvons voir que ce type d'expression de fonction ne sera pas promu. Essayez d'ajouter une ligne de code console.log au début. (log), undefined sera affiché en premier.

Donc, le véritable ordre ici est

var log;
log(); //这时候只是声明了log这个变量，并不是函数，却用函数的方法调用它，所以会报错，说这不是一个函数。
log = function(mes){
  console.log(mes)
}

Utiliser var pour déclarer les variables dans la fonction

Bien que nous sachions que les variables déclarées avec var seront promues, nous ne le faisons pas Je ne sais pas Dans quelle mesure cela sera-t-il amélioré ?

Avant cela, regardons un morceau de code

var a = 4;

function foo(){
  var a = 5;
  console.log(a);

}
foo();

console.log(a)

La réponse est 5,4, sortie 5 d'abord, puis sortie 4.

Les variables déclarées avec var ont une portée de fonction, donc un in foo n'a aucune relation avec un foo extérieur. Cette situation est exactement ce que je veux.

Changez à nouveau le code

function foo(){
  a = 5
  console.log(a);
  var a;
}
foo();

console.log(a)

La réponse est 5, a n'est pas défini

La 4ème ligne de code génère 5 et la 9ème ligne signale une erreur.

Dans ce cas, la promotion de la variable ne sera promue qu'en haut de la portée où se trouve la variable, et ne sera pas promue vers la portée parent.

Nous pouvons donc tirer une conclusion : la promotion d'une variable ne fera que promouvoir la variable au sommet de sa propre portée

Priorité de la fonction

Depuis l'utilisation de var et de la fonction les variables ont la fonction de promotion, alors que se passera-t-il si la même variable est déclarée avec les deux ? Eh bien, il suffit de regarder le titre et vous saurez que la fonction est prioritaire.

Regardez le code en détail

foo();

var foo;

function foo(){
  console.log(1)
}

foo = function(){
  console.log(2)
}

La réponse est 1

Ce code ressemble en fait à ceci

function foo(){
  console.log(1)
}

foo();// 1

foo = function(){
  console.log(2)
}

Regardez attentivement, var foo a disparu ; , Oui, il a été ignoré par le moteur, qui l'a considéré comme une déclaration en double et l'a jeté.

D'accord, puisque les variables déclarées avec var ne sont pas aussi bonnes que les déclarations de fonction, utilisez les déclarations de fonction pour déclarer la même variable plusieurs fois.

foo()
function foo(){
  console.log(1);
}
foo()
function foo(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

foo est déclaré trois fois et appelé quatre fois. Le résultat de chaque appel est 3, donc la déclaration de fonction finale écrasera la déclaration de fonction précédente

Mais var veut toujours lutter, je je pense toujours qu'il est nécessaire de prouver mon sens de l'existence.

foo()
function foo(){
  console.log(1);
}
var foo;
foo()
foo = function(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

Regardez attentivement, la partie centrale du code a été modifiée, produisant 3,3,2,2 dans l'ordre

Bien que var foo soit ignoré, la fonction suivante est toujours utile, ceci code Cela peut être vu comme ceci :

function foo(){
  console.log(3);
}

foo();//3
foo();//3
foo = function(){
  console.log(2);
}
foo();//2
foo();//2

Déclarez la fonction à l'intérieur du bloc ordinaire

Avant, la fonction était déclarée dans le scope, maintenant déclarez la fonction dans le bloc

function foo(){

  console.log(b); // undefined
  b(); //TypeError: b is not a function

  var a = true;

  if(a){
    function b(){
      console.log(2)
    }
    //下面这段代码和上面的结果一样
    // var b = function(){
 //      console.log(2)
 //    }
  }
  //b() --> 这里会被执行

}

foo()

De ce qui précède, b n'est pas défini, ce qui prouve que cette variable existe toujours, mais ce n'est pas une fonction. Cette situation est similaire à l'utilisation d'une expression de fonction.

Résumé

1. La promotion est divisée en promotion de déclaration de fonction et promotion de déclaration de variable

Utilisez var pour déclarer des variables et fonction pour déclarer des fonctions

.

3. La promotion de variable promeut la variable au sommet de sa propre portée

4 Il n'y a pas de mécanisme de promotion pour les expressions de fonction

5. identifiant en même temps. symbole, la déclaration de la fonction est prioritaire

6. Lorsque plusieurs fonctions déclarent le même identifiant, la dernière déclaration écrase la déclaration précédente

Tutoriel recommandé : Tutoriel js

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!