面试经常出的JavaScript变量提升问题分析

Q1：

var a = 10;
(function a(){
    console.log(a)
    a = 20;
    console.log(window.a)
    var a = 30
    console.log(a)
})()

等同于

var a = 10;
(function a(){
  //内部作用域
  var a;//var a = 30 中的声明被提升
    console.log(a)//undefined
    a = 20;//内部作用域的a赋值20
    console.log(window.a)//window中的a依然是10 
    a = 30//内部作用域的a赋值30
    console.log(a)//打印内部作用域中的a 30
})()

Q2：

var name = '张三';
function fn() {
    if (typeof name === 'undefined') {
        var name = '李四';
        console.log('辛苦了：' + name);
    } else {
        console.log('吃饭没：' + name);
    }
}
fn();

等同于

var name = '张三';
function fn() {
  var name ;// var name = '李四'; 中的声明被提前到函数作用域里面
    if (typeof name === 'undefined') {//此时成立
        name = '李四';
        console.log('辛苦了：' + name);
    } else {
        console.log('吃饭没：' + name);
    }
}
fn();

Q3：

var a=10,b=20,c=30;
function fn(a){
  a=1;
  var b=2;
  c=3
}
fn(100)
console.log(a,b,c);

等同于

var a=10,b=20,c=30;
function fn(a){
  //函数调用，形成局部作用域，形参a在内部局部作用域 a=100
  var b;//b在内部变量提升
  a=1;//内部局部作用域 a设置为1
  b=2;//内部局部作用域 b设置为2
  c=3;//全局作用与c被设置值3
}
fn(100)
//可以看到只有c被局部作用域修改了
console.log(a,b,c);//10 20 3

Q4：

if(!("a" in window)){
  var a = 10
}
console.log(a);

等同于

var a;//变量提升了
if(!("a" in window)){//"a" in window 成立了，所以这个条件不执行
  a = 10
}
console.log(a);//'undefined

Q5：

var fn = 'hello';
(function(fn){
  console.log(fn);
  var fn=fn||'world';
  console.log(fn)
})(fn)
console.log(fn);

等同于

var fn = 'hello';
(function(fn){
  //内部作用域
  //形参先被定义 所以fn=hello
  //var fn;//var fn=fn||'world';变量提升到这里，但是会被忽略，因为形参的fn先被定义
  console.log(fn);//打印hello
  fn=fn||'world';//这句fn还是等于hello
  console.log(fn)//打印hello
})(fn)//hello作为实参传入
console.log(fn);//打印hello
//最终结果是：hello hello hello

Q6：

var n=10;
function fn(n){
     console.log(n);
     var n= 20;
     console.log(n);
     function n(){
       
     }
     console.log(n);
}
 fn(n);
 console.log(n);

等同于

var n=10;
function fn(n){
  //局部作用域
  //n根据形参首先定义 n=10
  //函数会提升，覆盖了n，此时n为函数
   function n(){
       
     }
     //var n;//var n =20中的var n 被提升到此处，但是会被忽略
     console.log(n);//打印函数
      n= 20;//n被赋值为20
     console.log(n);//打印20
      //函数已经提升
     console.log(n);//打印20
}
 fn(n);//实参n=10传入调用
 console.log(n);//打印10

Q7：

 function fn(fn){
     console.log(fn);
     var fn = 20;
     console.log(fn);
     function fn(){
       console.log(fn);
     }
}
fn(30);
var fn = 10;
console.log(fn);

等同于

function fn(fn){
   //局部作用域 fn被形参设置 fn为30
    function fn(){//函数被提升到此次，并且fn设置为函数
       console.log(fn);
     }
     var fn ;//var fn = 20;中的var变量提升到这里，但是会被忽略
     console.log(fn);//打印函数
     fn = 20;//赋值20
     console.log(fn);//打印20
}
var fn;//var fn = 10;这句中的var变量提升到这里，但是会被忽略，因为已经存在函数 fn 了
fn(30);//执行函数
fn = 10;//赋值fn为10
console.log(fn);//打印10
最终会依次打印出：fn函数  20 10