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

素颜马尾好姑娘i 2022-10-09 14:28 146阅读 0赞

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：

等同于

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