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

ghostwu promotion de variables javascript simple et facile à comprendre

巴扎黑
巴扎黑original
2017-08-05 13:29:101243parcourir


1 a = 'ghostwu';2 var a;3 console.log( a );

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';

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 );


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

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         }

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         }

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();

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 }


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

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函数体在执行阶段 被 重新赋值了

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();


 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          }

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!

Déclaration:
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