早上做了两道JS作用域的题目,结果全错,觉得有点不好意思了。下面我再来整理一遍。
var a = 1;
function fn() {
console.log('1: ' + a);
var a = 2;
bar();
console.log('2: ' + a);
}
var a = 3;
function bar() {
console.log('3: ' + a)
}
fn();
你可以先写下自己的答案,然后再对比正确答案,如果错的话,看看是哪里出了问题。
答案是
// 1: undefined
// 3: 3
// 2: 2
每一个JS程序都会创建一个全局的作用域,执行函数,如fn()
,会创建一个局部作用域。执行函数时查找变量的过程是这样的:先查找当前作用域,然后再逐级向上查找,直到找到需要的变量。
在上面的例子当中,执行fn()
,先在fn
里面找,发现var
定义了一个变量var
,而且var
具有变量提升的能力,所以第一个打印出来就是undefined
。
ES6中的let
、const
不具有变量提升的功能,之前有人说JS是没有块级作用域的,但是let
、const
只在块级作用域内有效,所以现在这种说法是错误的。
接着分析第二个,执行bar()
,首先先看bar()
里面有没有变量a
,答案是没有,再往上一层找,注意上一层是函数被定义的作用域,不是函数被调用的作用域,在这里就是全局作用域了,所以第二个输出3: 3
。
第三个用同样的道理很容易就可以得出2: 2
。
var a = 1;
function fn() {
console.log('1: ' + a);
a = 2;
}
a = 3;
function bar(){
console.log('2: ' + a)
}
fn();
bar();
答案是:
// 1: 3
// 2: 2
我做的第一个答案是1:1
,因为我没搞清楚代码的执行顺序,如果函数不调用,定义函数的那段代码是不会执行的。所以输出1: 3
,第二个输出2: 2
。函数调用的位置很重要,如果把fn()
和bar()
调用的顺序换一下,那答案也是不一样的哦。