Before ES6, we usually used var to declare variables, and promotion simply means that we write something like var a = 123; Such code, the declaration is promoted to the top of its scope to execute, to the location of our code to assign.

function showName () {
    console.log(myName);  //undefined
    var myName = 'xzp'; 
};
showName();
Copy the code

The result of the above code is undefined. My abstract understanding of the above code is as follows:

function showName () {
    var myName;
    console.log(myName);
    myName = xzp;
}
showName();
Copy the code

Another example

money = 1;
var money;
console.log(money); / / 1
Copy the code

The output here is not undipay, because the variables will move up to the top of the scope

Here’s a classic interview question:

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);
Copy the code

Output results:

//undefined
//undefined
/ / 200
/ / 100
Copy the code

2. Function promotion

It is not only variable declarations that are promoted in javascript, but also function declarations; A named function can be declared in two ways:

2. Function literalsCopy the code
// function declaration
function bar () {}
// function literals
var foo = function () {}
Copy the code

The declaration of a function literal is the same as the result of a variable promotion; the function is just a concrete value; However, the phenomenon of function declarative promotion is different from that of variable promotion

Let’s start with an example

console.log(bar);
function bar () {
  console.log(1);
}
ƒ bar () {
// console.log(1);
/ /}
Copy the code

The execution order is equivalent to:

function bar () {
  console.log(1);
}
console.log(bar);
Copy the code

Function promotion is the initial execution of the entire block of code promoted to its scope. Consider the following code

shoWName()   / / 1
var shoWName = function () {
    console.log(2)}function shoWName() {
    console.log(1)
}
shoWName()   / / 2
Copy the code
  • Compilation stage :(performed by the compiler)
  1. Variable and function declarations are promoted to the top of the global execution context: data inside scope objects: (The summary explains what scope objects are)
{
    shoWName                        undifined   // var shoWName
    shoWName(){console.log(1)}      function (A block-level scope is also declared)}Copy the code
  • Execution phase :(executed by the engine, as I understand it)
  • On the first shoWName() execution: The engine will ask the compiler if it has seen the shoWName() function, since at this time the shoWName in line 2 has no value (undipay), so the compiler will return the function declared on 5 lines of code, and output 1 (function takes precedence)
  • {shoWName:function () {console.log(2)}} The variable showName is assigned (the second showName () appears after the assignment code), receives a function expression, and overwrites the previously declared function expression of the same name

Calling shoWName() will override the shoWName() function declared by the function literal to execute console.log(2), printing 2.

Summary:

  1. Only the declaration itself is promoted, not the assignment operation.
  2. Function declarations are promoted, but function expressions are not.
  3. Scope object that holds references to all variables in the current code execution context
  4. The code must run line by line
  5. It is divided into compilation stage and execution stage
  6. After the variable is promoted, it sets the default value undefined