Analyze the JavaScript variable promotion questions that often appear in the interview, once and for all, slap the interviewer!

table of Contents

first question:

The second question:

The third question:

Fourth question:

Question 5:

Sixth question:

Question 7:

I have collected these so far, and hope to encourage each other! !

---

first question:

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

Is equivalent to the following code:

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

The second question:

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

Equivalent to:

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

The third question:

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

Is equivalent to the following code:

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

Fourth question:

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

Equivalent to:

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

Question 5:

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

Equivalent to:

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

Sixth question:

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

Equivalent to:

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

Question 7:

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

Equivalent to:

 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

Eventually will be printed out in turn: fn function 20 10

 

I have collected these so far, and hope to encourage each other! !