In JavaScript, declarations of functions and variables are promoted to the top of functions.
In JavaScript, variables can be declared after they are used, that is, variables can be used before they are declared.
Example 1
var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();
Within the self-running function, there is var name ='jack', so the name is raised to the front of the current scope, so the name is undefined. When a program runs to a variable, it first looks for the variable in the current scope. If it cannot be found, it looks for the parent scope. If it still cannot be found, it will report an error.
Example 2
var x = 1; // Initialize x console.log(x + " " + y); // '1 undefined' var y = 2; //Amount to: var x = 1; // Initialize x var y; // Declare y console.log(x + " " + y); // '1 undefined' y = 2; // Initialize y
Example 3
(function(){ a = 4; console.log(a); console.log(window.a); var a = 3; console.log(a); })() //output 4 undefined 3
Variables are elevated to the current scope. There is no definition of a in the window scope, so undefined
Example 4 Variables and Function Lifting
console.log(foo); function foo(){}; var foo = '12'; console.log(foo); //Output twins foo(){} and 12; console.log(foo); var foo = function(){}; var foo = '12'; //Output undefined
The original function lifting can be divided into two cases:
One is function declaration. That's the form A, function foo(){} above.
Another kind: function expression. That's B, var foo=function() {} above.
The second form is actually the declarative definition of the var variable, so the output of B above is undefined, which should be understandable.
The first form of function declaration, when promoted, will be upgraded as a whole, including the part of function definition.
Example 5
var sayHello; console.log(typeof (sayHey));//=>function console.log(typeof (sayHo));//=>undefined if (true) { function sayHey() { console.log("sayHey"); } sayHello = function sayHo() { console.log("sayHello"); } } else { function sayHey() { console.log("sayHey2"); } sayHello = function sayHo() { console.log("sayHello2"); } } sayHey();// => sayHey2 sayHello();// => sayHello
Function declarations are raised as a whole, js parsing is raised from top to bottom, sayHey is raised, and then sayHey is raised below to cover the first, so sayHey() is executed to output sayHey2.
Functional expressions are not raised as a whole, so output sayHello
Example 6
function aa(a,b,c) { console.log(a); console.log(aa); console.log(arguments); var a = function(){ console.log(12); }; var aa = '444'; arguments = 6; console.log(a); console.log(aa); console.log(arguments); function a(){}; } aa(1,2,3); VM2311:3 ƒ a(){} VM2311:4 undefined VM2311:5 Arguments(3) [ƒ, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] VM2311:11 ƒ (){ console.log(12); } VM2311:12 444 VM2311:13 6 undefined var num1 = 1; function fn(num3){ var num4; console.log(num1); //output undefined console.log(num3); //output 4 console.log(num4); //throw error "num4 is not defined" console.log(num2); //throw error "num2 is not defined" var num1 = num4 = 2; num2 = 3; var num3= 5; } fn(4);
Example 7
window.val = 1; var obj = { val: 2, dbl: function () { this.val *= 2; val *= 2; console.log(val); console.log(this.val); } }; // Say the following output obj.dbl(); var func = obj.dbl; func(); 2\4\8\8