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

大家学会了吗?

你可能感兴趣的:(javascript,前端,开发语言)