什么是JavaScript作用域、作用域链？

JavaScript作用域、作用域链也是面试中出镜率很高的问题之一，同时也是JavaScript中最重要的基础概念之一。

今天我们将通过最简单实际的代码来展示函数作用域和全局作用域，在下篇文章中，我们将介绍块级作用域和暂时性死区。

作用域基本知识

简单来说，作用域就是用来规定变量的作用范围的，在任何语言当中都会有作用域的概念，在ES6以前，JavaScript只有函数作用域和全局作用域，ES6之后又增加块级作用域。

函数作用域和全局作用域

函数作用域非常简单，比如，执行下面的foo函数，变量a在函数foo的作用域内，所以在函数内可以正常的访问该变量，输出bar

function foo() {
  var a = 'bar'
  console.log(a)
}
foo()

对上面代码稍做改动，如下

var a = 'bar'
function foo() {
  console.log(a)
}
foo()

执行上面代码时，foo函数在自身的作用域并未找到变量a，但是它还是会向外层扩大范围查找，于是在全局作用域找到了变量a，输出bar

继续对代码进行修改，如下

function bar() {
  var b = 'bar'
}

function foo() {
  console.log(b)
}
foo()

上面代码，foo和bar两个函数拥有彼此独立的函数作用域，所以在foo函数中也无法访问bar函数中定义的变量b，其作用域链中(直到最上层的全局作用域中)也并不存在变量b，所以代码会报错Uncaught ReferenceError: b is not defined

简单来说就是，在JavaScript执行某个函数时，如果需要取某个变量的值，就会就近首先在函数内查找变量是否声明赋值，如果函数内无法找到该变量，就跳出当前函数作用域，到上层作用域中进行查找，这里的上层作用域可能是也是一个函数作用域，也可能是全局作用域。

下面来看一个更具体的示例

function bar() {
  var b = 'bar'
  function foo() {
    console.log(b)
  }
  foo()
}
bar()

在bar函数内的foo函数执行时，变量b不存在于foo函数内，所以就近在其上层函数bar作用域内寻找，所以最终输出bar

再来看另外一个示例

var b = 'bar'
function bar() {
  function foo() {
    console.log(b)
  }
  foo()
}
bar()

执行上面的代码仍然会输出bar，因为执行foo函数时，foo内并未找到变量b，就近在上层bar函数内也未找到，于是最终在全局作用内找到变量b。变量作用域就是这样一层一层相套的关系，逐层寻找，这也就是被称之作用域链的原因。

在下篇文章中，我们将介绍块级作用域和暂时性死区的相关内容。

欢迎我的公众号【小帅的编程笔记】，让我们在前端的路上越走越远