题解JS作用域

早上做了两道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()调用的顺序换一下，那答案也是不一样的哦。