一文搞懂JS中变量作用域的那些事

最近面试发现有挺多人对JS中的变量作用域还不是太了解，所以花了点时间来总结一下一些常见的问题：

1、for和if的作用域

首先JS中主要分为两种作用域，一种全局作用域和局部作用域，局部作用域通俗点说就是带有花括号的{ }，比如说函数、for和if等等，所以我们先说一下for和if的情况：

for(let i=0;i<1;i++){
        var a = 1
        b = 2
        let c = 3
 }
 console.log(a);	//输出1
 console.log(b);	//输出2
 console.log(c);	//输出undefined

if(true){
        var a = 1
        b = 2
        let c = 3
}
 console.log(a);	//输出1
 console.log(b);	//输出2
 console.log(c);	//输出undefined

{
     var a = 1
     b = 2
     let c = 3
}
 console.log(a);	//输出1
 console.log(b);	//输出2
 console.log(c);	//输出undefined

总结：无论变量是否加var，它都是一个在全局作用域下的变量，即挂载到window对象的一个属性，如果是在{ }花括号里let声明的变量，那这个变量是局部变量，作用域是{ }花括号里

2、函数的作用域

在函数里的变量，无论它是用var还是let定义的变量，它都是局部变量，作用域只存在于这个函数！如果这个变量既没有加var也没有加let，那么它是一个全局变量（也就是挂载在window对象上的），但是要注意的是，如果要引用这个变量的话则必须先调用这个函数，不然也拿不到这个全局变量。

 function test(){
       a = 1
    }
console.log(a);

输出结果：

先调用函数再输出这个全局变量：

function test(){
        a = 1
     }
test()
console.log(a);

第二种情况是JavaScript中的“吊装”，直接看代码：

var a = 10
function test(){
    console.log(a);
    var a = 6
}
test()

输出结果是：

为什么输出结果不是10而是undefined呢，这是因为JS中的“吊装”导致的，其实上面的代码等价于

var a = 10
function test(){
	var a
    console.log(a);
    a = 6
}
test()

所以输出的结果是undefined

第三种情况是函数参数的传递，直接看代码：

//这里传递的a和b是基本数据类型
var a=0,b=1

function test(a,b){
	//这时函数里的a和b地址和函数外部的a和b地址不一样
    a = a+1
    b = b+1
}

test(a,b)
console.log(a);
console.log(b);

输出结果：（函数里的a和b不会影响到全局的a和b，所以输出的a和b还是全局定义的a和b）

//这里传递的a和b是引用数据类型
var a={num:0},b={num:1}

function test(a,b){
//这时函数的a和b地址和函数外的a和b地址是一致的
     a.num = 1
     b.num = 2
 }

 test(a,b)
 console.log(a);
 console.log(b);

输出结果：（函数里的a和b会影响到全局的a和b，故此时输出的结果是经过函数改变后的a和b）