面试经常出的JavaScript变量提升题分析，一劳永逸，吊打面试官！

﹏ヽ暗。殇╰゛Y 2021-07-24 12:23 222阅读 0赞

**目录**

第一题：

第二题：

第三题：

第四题：

第五题：

第六题：

第七题：

目前就收集了这些，望共勉之！！

--------------------

### 第一题： ###

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
    })()

### 第二题： ###

等同于：

### 第三题： ###

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

### 第四题： ###

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

### 第五题： ###

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

### 第六题： ###

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

### 第七题： ###

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

### 目前就收集了这些，望共勉之！！ ###