共计 2511 个字符，预计需要花费 7 分钟才能阅读完成。
引言
几乎所有的编程语言都有作用域的概念，那作用域到底指的是什么呢？作用域就是编程语言在定义变量时，变量如何存储、变量如何访问的一套规则，不同的编程语言的规则大同小异，接下来就来看看这套规则是怎么设定的
编译原理
在传统编译语言中，在代码执行之前都会有一个编译过程：
分词 / 词法分析：将代码语句分解成有意义的代码块，又叫词法单元。
解析 / 语法分析：将词法单元转换一个逐级嵌套的具有语法规则的树状结构，又叫抽象语法树(AST)
代码生成：解析 AST 并转化成机器指令
和传统编译语言不太一样，js 的编译和执行并不是分开执行，大多数情况都是编译过程结束就会立刻执行，为了在短时间的编译过程内达到较优性能，js 引擎较一般编译器更复杂，现在就让来看 js 的编译过程，简单的以编译 var a = 2 为例：
遇到 var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量 a
接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫做 a 的变量。如果否，引擎就会使用这个变量；如果引擎最终找到了 a，就会将 2 赋值给它。否则引擎就会抛出一个异常
词法作用域
作用域一般有两种工作模型，第一种是被大多数编程语言所采用的词法作用域，另外一种叫作动态作用域，如 Bash 脚本采用的就是动态作用域。词法作用域就是定义在词法阶段的作用域，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，由变量定义位置决定，而动态作用域则是由变量使用的位置来决定的。下面来看个例子：
function foo(a) {
var b = a * 2;
function bar(c) {
console.log(a, b, c)
}
bar(b * 3)
}
foo(2)
首先来分析一下这里一共存在几个作用域？
全局作用域，里面存在 foo 变量
foo 函数创建的作用域，里面有 a,b,bar 变量
bar 函数创建的作用域，里面有 c 变量
接下来再来分析一下变量的查找过程，引擎执行 console.log()需要查找 a、b、c 三个变量的引用，首先从最里面的 bar()作用域开始找，引擎无法找到 a，因此会再往上到 foo()作用域中找，在这里找到了 a，停止查找，对于 b、c 来说查找过程一样。作用域查找始终从运行时最内层开始查找，逐级向外查找，直到遇见第一个匹配的变量为止。
函数作用域
函数作用域指的是属于这个函数的全部变量都可以在整个函数的范围内使用及复用，这是大家都知道的定义，但是函数作用域的存在到底有什么用呢？接下来就一起看看函数作用域的秒用。
隐藏内部实现
隐藏内部实现就是将变量和函数包裹在一个函数的作用域中，达到隐藏的目的，为什么要这么做呢？软件设计中有一个非常有名的原则叫最小暴露原则，指最小限度暴露必要内容，而将其他内容都隐藏起来，比如模块或对象的 API 设计。用函数作用域来包裹变量和函数来达到最小暴露原则，阻止外部直接访问，来看下面的例子：
function doSomething(a) {
b = a + doSomethingElse(a * 2);
console.log(b * 3);
}
function doSomethingElse(a) {
return a – 1;
}
var b;
doSomething(2); // 15”
在这段代码中 doSomethingElse 和 b 应该是 doSomething 内部私有的，但是却被暴露出来，这样会导致以预期之外的形式被使用，产生意料之外的结果，更合理的设计应该是将这些私有的内容隐藏在 doSomething 内部，例如:
function doSomething(a) {
function doSomethingElse(a) {
return a – 1;
}
var b;
b = a + doSomethingElse(a * 2);
console.log(b * 3);
}
doSomething(2);
这样 b 和 doSomethingElse 都无法从 doSomething 外部访问，但是这样也会存在一些问题，首先在全局作用域中声明了 doSomething 函数，污染了全局作用，其次，必须通过显示调用才能执行，那么有没有什么办法既不会污染作用域也不需要调用就可以自执行呢？答案就是函数表达式，看下面的例子：
(function doSomething(a) {
function doSomethingElse(a) {
return a – 1;
}
var b;
b = a + doSomethingElse(a * 2);
console.log(b * 3);
})(2)
首先来看 (function doSomething(){}) 这是一个函数表达式，和函数声明不同的是用括号包起来的，然后再 (function doSomething(a){})() 调用传值，这样既能自执行也不会污染作用域，社区给这种用法定义了一个术语：IIFE，代表立即执行函数表达式
块作用域
除 JavaScript 外很多编程语言都支持块作用域，尽管你可能写过很伪块作用域形式的代码，最常见的就是 for 循环：
for(var i=0; i<10; i++) {
console.log(i)
}
写这段代码通常是希望变量 i 在循环内部使用，但是实际上 i 会被绑定到外部作用域中，要确保没有在作用域的其他地方意外使用 i，就只能依靠自觉，这时候块级作用域就显得尤为有用，ES6 改变了现状，引入了新的 let、const 关键字，let 关键字可以将变量绑定到所在的任意作用域中，也就是 let 为其声明的变量隐式地创建了作用域：
for(let i=0; i<10; i++) {
console.log(i)
}
console.log(i) // ReferenceError
这时候 i 就只会在 for 循环的内部有效
总结
这篇文章主要介绍了 JS 作用域相关的内容。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞。