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

阅时约 6 分钟

目录

第一题:

第二题:

第三题:

第四题:

第五题:

第六题:

第七题:

目前就收集了这些,望共勉之!!


第一题:

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

第三题:

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

 

目前就收集了这些,望共勉之!!