Maison > interface Web > js tutoriel > ghostwu promotion de variables javascript simple et facile à comprendre

ghostwu promotion de variables javascript simple et facile à comprendre

巴扎黑
Libérer: 2017-08-05 13:29:10
original
1336 Les gens l'ont consulté


1 a = 'ghostwu';2 var a;3 console.log( a );
Copier après la connexion

Pour l'exemple ci-dessus, vous pensez peut-être que le résultat de sortie de la troisième ligne de code devrait être indéfini, car la deuxième ligne est var a; sans attribuer de valeur. Donc la valeur de a n'est pas définie, mais le résultat correct est ghostwu. Quant à savoir pourquoi, continuez à lire !


1 console.log( a );2 var a = 'ghostwu';
Copier après la connexion

Pour l'exemple ci-dessus. , la première ligne de code, vous pouvez penser qu'une erreur est signalée parce que 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.

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 Dans la phase de compilation, a = 'ghostwu ' se produit dans la phase d'exécution. Ensuite, var a sera promu au premier plan de la portée actuelle, a = 'ghostwu' reste en place en attendant la phase d'exécution, donc :


1 a = 'ghostwu';2 var a;3 console.log( a );4 5 //上面这段代码经过编译之后,变成下面这样6 7 var a;  //被提升到当前作用域的最前面8 a = 'ghostwu'; //留在原地,等待执行9 console.log( a );
Copier après la connexion


1 console.log( a ); 
2 var a = 'ghostwu';3 4 //上面这段代码,经过编译之后,变成下面这样5 6 var a;7 console.log( a );8 a = 'ghostwu';
Copier après la connexion

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

Avant de passer à ce qui suit, clarifions d'abord les deux manières courantes de définir les fonctions :


1         //函数声明, 形如:2         function show(){3             console.log( '函数声明方式' );4         }5 6         //函数表达式, 形如:7         var show = function(){8             console.log( '表达式方式' );9         }
Copier après la connexion

Parce que les expressions et les déclarations de fonctions sont compilées pendant les étapes de compilation, produiront différents effets d’interprétation.


1         show();2         function show(){3             console.log( a );4             var a = 'ghostwu';5         }
Copier après la connexion

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

La déclaration de fonction sera promue

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


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

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

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


 1 show(); //报错,show is not a function 2 var show = function(){ 3  console.log( 'ghostwu' ); 4 } 5 //对于上面这段表达式代码,经过编译之后: 6 var show; 7 show();  //执行之后就是 undefined(), 所以在表达式定义之前,调用函数报错了 8 show = function(){ 9   console.log( 'ghostwu' );  
10 }
Copier après la connexion


1         show(); //你好2         var show;3         function show(){4             console.log( '你好' );5         }6         show = function(){7             console.log( 'hello' );8         }
Copier après la connexion

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

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


1         function show(){2             console.log( '你好' );3         }4         show(); //你好5         show = function(){6             console.log( 'hello' );7         }8         show();//如果这里在调用一次,就是hello, 因为show函数体在执行阶段 被 重新赋值了
Copier après la connexion

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


         show();                                console.log( 'hello'          show =              console.log( '你好'                       console.log( 'how are you!'                        console.log( 'how are you!'          show();          show =              console.log( '你好'          show();
Copier après la connexion


 1 //思考题: 请问下面的结果是什么? 为什么? 写下你的答案 2          show(); 3           var a = true; 4           if( a ){ 5               function show(){ 6                   console.log( 1 ); 7               } 8           }else { 9               function show(){10                  console.log( 2 );11             }12          }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal