Home > Web Front-end > JS Tutorial > body text

ghostwu simple and easy to understand javascript variable promotion

巴扎黑
Release: 2017-08-05 13:29:10
Original
1283 people have browsed it


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

For the above example, you may think that the output result of the third line of code should be undefined, because the second line is var a; which declares the variable but does not assign a value, so a The value is undefined, but the correct result is ghostwu. As for why, please continue reading!


1 console.log( a );2 var a = 'ghostwu';
Copy after login

For the above example, the first line of code, you may think An error is reported because the a variable is not defined before a is output, but the correct result is undefined. Well, it seems a bit inexplicable.

To understand why, we must first clarify the following two points:

  • javascript code is not executed line by line.

  • javascript execution is divided into 2 steps:

    • Compilation (lexical interpretation/pre-interpretation)

    • Execution

Secondly, when we encounter var a = "ghostwu" to define a variable, js actually regards this sentence as a two-stage thing, var a occurs in In the compilation phase, a = 'ghostwu' occurs in the execution phase. Then var a will be promoted to the front of the current scope, a = 'ghostwu' stays in place waiting for the execution phase, so:


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


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

After reading the compiled code, do you understand?

Before going on to the following, let us first clarify the two common ways of defining functions:


1         //函数声明, 形如:2         function show(){3             console.log( '函数声明方式' );4         }5 6         //函数表达式, 形如:7         var show = function(){8             console.log( '表达式方式' );9         }
Copy after login

Because expressions and function declarations, during the compilation phase, will produce different interpretation effects.


1         show();2         function show(){3             console.log( a );4             var a = 'ghostwu';5         }
Copy after login

How to explain the above code during the compilation phase? Just remember the following sentence:

The function declaration will be promoted

So, after the above code is compiled, it becomes the following:


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

So, the above result is undefined;

For function expressions, they will not be promoted. See the following example:


 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 }
Copy after login


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

Why is the result of the above code "Hello"?

Because: When a function declaration with the same name appears, When variables are declared, function declarations will be promoted first and variable declarations will be ignored. So after compilation, it becomes:


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

If there is a function declaration with the same name, the later one will overwrite the previous one, as follows:


         show();                                console.log( 'hello'          show =              console.log( '你好'                       console.log( 'how are you!'                        console.log( 'how are you!'          show();          show =              console.log( '你好'          show();
Copy after login


 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          }
Copy after login

The above is the detailed content of ghostwu simple and easy to understand javascript variable promotion. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!