JS作用域

JavaScript的作用域有全局作用域和局部作用域

先通过一下代码来体验下作用域

var x = 1;
function f1(){
    var y = 2;
    x = 10;
    console.log(x);
}
console.log(y);		//undefined

上面的代码运行后我想大家应该猜到了结果就是undefined

就是报如下的错误，也就是y是个未定义的变量

VM42:7 Uncaught ReferenceError: y is not defined
at :7:13

上述代码中变量x就是全局作用域，方法f1的作用域也是全局，f1方法中的变量y是局部的，y的作用范围仅限f1方法体内，离开了f1的方法体的作用范围，就无法获取到y的值，所以上述的例子中最后打印y的时候是undefined

我们再来看下面的例子

var a = 1;
function f1(){
    console.log(a);		//1
    a = 3;
}
f1();
console.log(a);			//3

上述代码能正常运行，首先全局变量a对于f1方法体是可见的，在f1方法体内对全局变量a进行赋值，修改为3，所以f1()方法执行完毕后输出a的值是3，上面这段代码相对大家应该都比较容易

接下来再看看下面的例子

var a = 1;
function f1(){
    console.log(a);
    var a = 3;
}
f1();
console.log(a);

这段代码会怎么输出呢？运行结果如何呢？

结果如下

undefined
------------------------------------------------------------------------------------------------------------
1

是不是跟大家想的不一样，让我们来分析一下这段代码的预解析过程

1）首先定义了一个全局变量a

2）定义了function f1

3）执行f1方法

​ 3-1）定义了f1方法体内部的局部变量a，a的值为undefined

​ 3-2）输出局部变量a，因为a未赋值，所以这个地方输出undefined

​ 3-3）给局部变量a赋值为3

4）输出全局变量a，a的值为1

这就是上面这段代码的预解析过程，只要把这段代码的预解析搞明白了，就能猜到他的结果输出了

接下来用一道面试题来举个例子

var a = 10;
function f1(){
    var b = 2*a;
    var a = 20;
    var c = a+1;
    console.log(b);
    console.log(c);
}
f1();

上面例子的输出结果是什么呢？读者先自己推算推算

我们先看一下运行结果

NaN
------------------------------------------------------------------------------------------------------------
21

结果有没有跟你想的一样呢？不管怎样我们来对上述代码进行一下预解析，

1）定义全局变量a
2）定义全局函数f1
3）给全局变量a赋值为10
4）运行f1
	4-1）定义局部变量b，当前b的值为undefined
    4-2）定义局部变量a，当前a的值为undefined
    4-3）定义局部变量c，当前c的值为undefined
    4-4）给局部变量b进行赋值，使用2*a表达式的结果进行赋值，由于a的值为undefined，所以b的值为NaN（Not a Number）
    4-5）给局部变量a赋值为20
    4-6）给局部变量c进行赋值，使用a+1表达式的结果进行赋值，由于上一步局部变量a的值为20，所以a+1的表达式的值为21

大家学会了吗？