Detailed explanation of JavaScript variable promotion

The following editor will bring you the most easy-to-understand detailed explanation of JavaScript variable promotion. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

is as follows:

##

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

I didn’t say What is variable promotion and the rules of variable promotion? Or you have not learned variable promotion. If you understand it according to the existing javascript, for the above example, you may think that the output result of the third line of code should be undefined, because the output of the third line of code should be undefined. The second line is var a; the variable is declared, but no value is assigned, so the value of a is undefined, but the correct result is ghostwu. As for why, please continue reading!

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

For the above example, the first line of code, you may think that an error is reported, because before outputting a, the a variable is not defined, but the correct result is undefined. Well, it seems a bit inexplicable, javascript is too buggy.

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" When defining a variable, js actually regards this sentence as two stages. var a occurs in the compilation stage, and a = 'ghostwu' occurs in the execution stage. Then var a will be promoted to the current At the front of the scope, a = 'ghostwu' stays in place waiting for the execution phase, so:

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

Look Do you understand the compiled code?

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

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

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

Because expressions and function declarations, in During the compilation stage, different interpretation effects will be produced.

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

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

So, the above result is undefined;

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

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

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

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

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

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

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(); //如果在这里再执行一次，结果：你好

//思考题： 请问下面的结果是什么？ 为什么？ 写下你的答案
   show();
   var a = true;
   if( a ){
    function show(){
     console.log( 1 );
    }
   }else {
    function show(){
     console.log( 2 );
   }
   }

The above is the detailed content of Detailed explanation of JavaScript variable promotion. For more information, please follow other related articles on the PHP Chinese website!