Variable ascension

Variables: in the current context (global/private/block level), js code from top to bottom before execution, the browser will handle some things in advance (can be understood as a link in the lexical analysis, lexical analysis must occur before the code execution) : will bring all the current context var/function key to declare or define in advance.

  • Declare: var a;
  • Defined: for example, a = 10.
  • Var is only declared in advance, not defined
  • Those with function are declared and defined in advance
  • Variables with var in the global context are promoted before code execution
console.log(a);
var a = 12;
a = 13;
console.log(a);
Copy the code

In the above code, the execution steps are:

  • Declare variable a var a; The default value is undefined
  • Perform the console. The log (a); Output is undefined
  • Create a value of 12 and associate the variable a with 12; A = 12;
  • Create a value of 13 and associate the variable a with 13; A = 13;
  • Finally, run console.log(a); The output of 13
  • The variable with function in the global context is promoted before code execution

The function func is declared and defined before it is called

func();
function func(){
	console.log('Variable lift');
}
Copy the code
  • The variable == in the global context == judgment (if) is promoted

Note that conditions with function in them are declared but not defined in new browsers, whereas in older browsers they are both declared and defined

  • Older versions, such as IE10 below:
    • Var a declaring an A in the global context is also equivalent to adding an a attribute to the window
    • Fn = function (declaration + definition)
  • The new version
    • Var a declaring an A in the global context is also equivalent to adding an a attribute to the window
    • fn; Only declaration does not define
console.log(a);//undefined
if(! ('a' in window)) {var a = 1;
	function func(){}}console.log(a);//undefined
//'a' in window checks if a is a property of window, if a is a property of window, if a is a property of window, if a is a property of window, if a is a property of window
Copy the code
  • Exercises on variable promotion
fn();
function fn(){console.log(1)}
fn();
function fn(){console.log(2)}
fn();
var fn = function {console.log(3)}
fn();
function fn(){console.log(4)}
fn();
function fn(){console.log(5)}
fn();
Copy the code

The final output in the above code is 5, 5, 5, 3, 3

  • Step analysis:
    • Start by promoting variables with var and function
      • fn => 1;
      • fn => 2;
      • Var fn; I’m not going to do it here, because I already had the variable fn when I was doing function promotion, so I’m not going to do it here
      • fn => 4;
      • fn => 5;
      • The value of fn after the variable is promoted is output 5
    • Then the code starts executing
      • The first time fn() is called; The output is 5
      • Call fn() the second time; The output is 5
      • Call fn() the third time; The output is 5
      • Run var fn… Since this code was not processed in the variable promotion phase, fn becomes output 3
      • The last few calls are output 3
var foo = 1;
function bar(){
	if(! foo){var foo = 10;
	}
	console.log(foo);
}
bar();
Copy the code

Step analysis:

  • First, global variables are promoted
    • var foo
    • function bar(){ … }
  • After the global variable is promoted, the code execution starts and the bar function is called
  • Bar function execution forms a private execution context
  • In the function private context, the initialization step
    • Initializes the scope chain
    • Initialize this
    • To initialize the arguments
    • Parameter value
    • Variable promotion: var foo; Regardless of whether the true or false condition is true, the variable is increased first
  • Then the code in the function executes, and finds out that foo is a private variable of the function, and only declares no value, so the condition holds
  • Assign a value of 10 to the variable foo
  • So the output is 10