js变量提升总结

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

例1

var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); } })();

在自运行函数内，存在var name = 'jack'，所以name会提升到当前作用域最前边，所以 name为undefined。当程序运行到变量的时候，会先在当前作用域内查找该变量，如果找不到，则会向父级作用域查找，如果还是找不到，就会报错

例2

var x = 1; // Initialize x console.log(x + " " + y); // '1 undefined' var y = 2; 相当于： var x = 1; // Initialize x var y; // Declare y console.log(x + " " + y); // '1 undefined' y = 2; // Initialize y

例3

(function(){ a = 4; console.log(a); console.log(window.a); var a = 3; console.log(a); })() 输出 4 undefined 3

变量提升到当前作用域，window作用域内没有定义a，所以undefined

例4 变量与函数提升

console.log(foo); function foo(){}; var foo = '12'; console.log(foo); 输出 ƒ foo(){} 和 12； console.log(foo); var foo = function(){}; var foo = '12'; 输出 undefined

原来函数提升分为两种情况：
一种：函数申明。就是上面A，function foo(){}这种形式
另一种：函数表达式。就是上面B，var foo=function(){}这种形式
第二种形式其实就是var变量的声明定义，因此上面的B输出结果为undefined应该就能理解了。
而第一种函数申明的形式，在提升的时候，会被整个提升上去，包括函数定义的部分

例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

函数声明整体提升，js解析从上到下，提升sayHey,接着提升下面的sayHey，把第一个覆盖了，所以执行sayHey()输出sayHey2
函数表达式不会整体提升，所以输出sayHello

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

例7

window.val = 1; var obj = { val: 2, dbl: function () { this.val *= 2; val *= 2; console.log(val); console.log(this.val); } }; // 说出下面的输出结果 obj.dbl(); var func = obj.dbl; func(); 2\4\8\8