理解JavaScript的核心知识点：做用域

时间 2019-11-08

原文原文链接

关于做用域：About Scope

做用域是程序设计里的基础特性，是做用域使得程序运行时可使用变量存储值、记录和改变程序的“状态”。JavaScript 也绝不例外，但在 JavaScript 中做用域的特性与其余高级语言稍有不一样，这是不少学习者久久难以理清的一个核心知识点。javascript

定义：Definition

首先引用两处我认为比较精辟的对做用域定义的总结：html

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.

翻译：做用域是在运行时对代码某些特定部分中的变量、函数和对象的可访问性。换句话说，做用域决定代码区域中变量和其余资源的可见性。java

Scope is the set of rules that determines where and how a variable (identifier) can be looked-up.

翻译：做用域是一套规则，决定变量定义在何处以及如何查找变量。git

综上所述，咱们能够把做用域理解成是在一套在程序运行时控制变量访问的管理机制。它规定了变量可见的区域、变量查找规则、嵌套时的检索方法。es6

目的：Purpose

利用做用域是为了遵循程序设计中的最小访问原则，也称最小特权原则，这是一种以安全性为考量的程序设计原则，能够便于快速定位错误，将发生错误时的损失控制在最低程度。这篇文章的这一部分举了一个电脑管理员的例子来讲明最小访问原则在计算机领域的重要性。github

在编程语言中，做用域还有另外两个好处——规避变量名称冲突和隐藏内部实现。编程

咱们知道每一个做用域具备本身的权利控制范围，在不一样的做用域中定义相同名称的变量是彻底可行的。实现这一可能性的底层机制叫作“遮蔽效益”。这一机制体在嵌套做用域下获得了更好的体现，由于变量查找的规则是逐级向上，遇到匹配则中止，当内外层都有同名变量的时候，如已在内层找到匹配的变量，就不会再继续向外层做用域查找了，就像是内层的变量把外层的同名变量遮蔽住了同样。是否是感受很是熟悉？没错，这也是 JavaScript 中原型链查找的内部机制！浏览器

隐藏内部实现实际上是一种编程的最佳实践，由于只要编程者愿意，大可暴露出所有代码的内部实现细节。但众所周知，这是不安全的。若是第三者在不可控的状况下修改了正常代码，影响程序的运行，这将带来灾难性的后果，这不只是库开发者们首先会考虑的安全性问题，也是业务逻辑开发者们须要谨慎对待的可能冲突，这就是模块化之因此重要的缘由。其余编程语言在语法特性层面就支持共有和私有做用域的概念，而 JavaScript 官方暂时尚未正式支持。目前用以隐藏内部实现的模块模式主要依赖闭包，因此闭包这一在JS领域具备独特神秘性的机制被广大开发者们又恨又爱。即使 ES6 的新模块机制支持以文件形式划分模块，仍然离不开闭包。安全

生成：Generate

做用域的生成主要依靠词法定义，许多语言中有函数做用域和块级做用域。JavaScript 主要使用的是函数做用域。怎么理解词法定义做用域？词法就是书写规则，编译器会按照所书写的代码肯定出做用域范围。数据结构

大多数编程语言里都用 {} 来包裹一些代码语句，编译器就会将它理解为一个块级，它内部的范围就是这个块级的做用域，函数也是如此，写了多少个函数就有相应数量的做用域。虽然 JavaScript 是少数没有实现块级做用域的编程语言，但其实在早期的 JavaScript 中就有几个特性能够变相实现块级做用域，如 with、catch 语句：with 语句会根据传入的对象建立出一个特殊做用域，只在 with 中有效；而 catch 语句中捕捉到的错误变量在外部没法访问的缘由，正是由于它建立出了一个本身的块级做用域，据 You Don't Know JS 的做者说市面上支持块级做用域书写风格的转译插件或 CoffeeScript 之类的转译语言内部都是依靠 catch 来实现的，that's so tricky!

相关概念：Relevant Concepts

在这里只讨论 JavaScript 中如下概念的内容和实现方式。

词法做用域：Lexical Scope

经过上面所说的相关知识能够总结出词法做用域就是按照书写时的函数位置来决定的做用域。

看看下面这段代码，这段代码展现了除全局做用域以外的 3 个函数做用域，分别是函数 a 、函数 b 、函数 c 所各自拥有的地盘：

function a () {
    var aa = 'aa';
    function b () {
        var bb = 'bb'
        console.log(aa, bb)
        c();
    }
    b();
}

function c () {
    var cc = 'cc'
    console.log(aa, bb, cc)
}
a();

各个变量所属的做用域范围是显而易见的，但这段代码的执行结果是什么呢？一但面临嵌套做用域的情景，或许不少人又要犹疑了，接下来才是词法做用域的重点。

上面代码的执行结果以下所示：

// b()：
aa bb
// c()：
Uncaught ReferenceError: aa is not defined

函数 c 的运行报错了！错误说没有找到变量 aa。按照函数调用时的代码来看，函数 c 写在函数 b 里，按道理来说，函数 c 不是应该能够访问它嵌套的两层父级函数做用域么？从执行结果得知，词法做用域不关心函数在哪里调用，只关心函数定义在哪里，因此函数 c 其实直接存在全局做用域下，与函数 a 同级，它俩根本就是没有任何交点的世界，没法互相访问，这就是词法做用域的法则！

请谨记 JavaScript 就是一个应用词法做用域法则的世界。而按照函数调用时决定的做用域叫作动态做用域，在 JavaScript 里咱们不关心它，因此把它扔出字典。

函数做用域：Function Scope

很长时间以来，JavaScript 里只存在函数做用域（让咱们暂时忽略那些里世界的块级做用域 tricky），全部的做用域都是以函数级别存在。对此作出最明显反证的就是条件、循环语句。函数做用域的例子在上述词法做用域中已经获得了很好的体现，就再也不赘述了，这里主要探讨一下函数做用域链的机制。

如下面一段代码为例：

function c () {
    var cc = 'cc'
    console.log(cc)
}
function a () {
    var aa = 'aa'
    console.log(aa)
    b();
}
function b () {
    var bb = 'bb'
    console.log(aa, bb)
}
a();
c();

一个程序里能够有不少函数做用域，引擎怎么肯定先从哪一个做用域开始，按照词法规则先写先执行？固然不，这时就看谁先调用。函数在做用域中的声明会被提高，函数声明的书写位置不会影响函数调用，参照上例，即使是函数 a 定义在函数 c 后面，因为它会被先调用，因此在全局做用域以后仍是会先进入函数 a 的做用域，那函数 b 和函数 c 的顺序又如何，为了解释清楚词法做用域是如何与函数调用机制结合起来，接下来要分两部分研究程序运行的细节。

都说 JavaScript 是个动态编程语言，然而它的做用域查找规则又是按照词法做用域（也是俗称的静态做用域）规则来决定的，实在让人费解。理解它动（执行时编译）静（运行前编译）结合的关键在于引擎在执行程序时的两个阶段：编译和运行。为了不歧义，区分了两个词：

执行：引擎对程序的总体执行过程，包括编译、运行阶段。
运行：具体代码的执行或函数调用的过程。

JavaScript 的动指的是在程序被执行时才进行编译，仅在代码运行前。而通常语言是先通过编译过程，随后才会被执行的，编译器与引擎执行是继时性的。静指函数做用域是根据编译时按照词法规则来肯定的，不禁调用时所处做用域决定。

简单来讲，函数的运行和其中变量的查找是两套规则：函数做用域中的变量查找基于做用域链，而函数的调用顺序依赖函数调用的背后机制——调用栈来决定。在编译阶段，编译器收集了函数做用域的嵌套层级，造成了变量查找规则依赖的做用域链。函数调用栈使函数像栈的数据结构同样排成队列按照先进后出的规则前后运行，再根据JavaScript 的同步执行机制，得出正确的执行顺序是：函数 a =>函数 b =>函数 c。最后再结合词法做用域法则推断出上面示例的执行结果仅仅是一句报错提示：Uncaught ReferenceError: aa is not defined。把函数 b 引用的变量 aa 去掉，就能够获得完整的执行顺序的展现。

块级做用域：Block Scope

let、const 声明的出现终于打破了 JavaScript 里没有块级做用域的规则，咱们能够显示使用块级语法 {} 或隐式地与 let、const 相结合实现块级做用域。

隐式（let、const 声明会自动劫持所在做用域造成绑定关系，因此下例中并非在 if 的块级定义，而是在它的代码块内部建立了一个块级做用域，注意在 if 的条件语句中 a 还没有定义）：

if (a === 'a') {
    let a = 'a'
    console.log(a)
} else {
    console.log('a is not defined！')
}

显式（显式写法揭露了块级变量定义的真实所在）：

// 普通写法，稍显啰嗦
if (true) {
    {
        let a = 'a'
        ...
    }
}

// You Don't Know JS的做者提倡的写法，保持let声明在最前，与代码块语句区分开
if (true) {
    { let a = 'a'
        ...
    }
}

// 但愿将来官方能支持的写法
if (true) {
    let (a = 'a') {
        ...
    }
}

关于块级做用域最后要关注的一个问题是暂时性死区，这个问题能够描述为：当提早使用了以 var 声明的变量获得的是 undefined，没有报错，而提早使用以 let 声明的变量则会抛出 ReferenceError。暂时性死区就是用来解释这个问题的缘由。很简单，规范不容许在尚未运行到声明语句时就引用变量。来看一下根据官方非正式规范得出的解释：

When a JavaScript engine looks through an upcoming block and finds a variable declaration, it either hoists the declaration to the top of the function or global scope (for var) or places the declaration in the TDZ (for let and const). Any attempt to access a variable in the TDZ results in a runtime error. That variable is only removed from the TDZ, and therefore safe to use, once execution flows to the variable declaration.

翻译：当 JavaScript 引擎浏览即将出现的代码块并查找变量声明时，它既把声明提高到了函数的顶部或全局做用域（对于 var ），也将声明放入暂时性死区（对于 let 和const）。任何想要访问暂时性死区中变量的尝试都会致使运行时错误。只有当执行流到达变量声明的语句时，该变量才会从暂时性死区中移除，能够安全访问。

另外，把 let 跟 var 声明做两点比较能更好排除其余疑惑。如下述代码为例：

console.log(a);
var a;
console.log(b);
let b;

变量提高：let 与 var 定义的变量同样都存在提高。
默认赋值：let 与 var 声明却未赋值的变量都至关于默认赋值 undefined。

let 与 var 声明提早引用致使的结果的区别仅仅是由于在编译器在词法分析阶段，将块级做用域变量作了特殊处理，用暂时性死区把它们包裹住，保持块级做用域的特性。

全局做用域：Global Scope

全局做用域仿佛是透明存在的，容易受到忽视，就像人们常常忘记身处氧气包裹中同样，变量没法超越全局做用域存在，人们也没法脱离地球给咱们提供的氧气圈。简而言之，全局做用域就是运行时的顶级做用域，一切的一切都归属于顶级做用域，它的地位如同宇宙。

咱们在全部函数以外定义的变量都归属于全局做用域，这个“全局”视 JavaScript 代码运行的环境而定，在浏览器中是 window 对象，在 Node.js 里就是 global 对象，或许之后还会有更多其余的全局对象。全局对象拥有的势力范围就是它们的做用域，定义在它们之中的变量对全部其余内层做用域都是可见的，即共享，因此开发者们都很是讨厌在全局定义变量，这继承自上面所说的最小特权原则的思想，为安全起见，定义在全局做用域里的变量越少越好，因而一个叫作全局污染的话题由此引起。

全局做用域在运行时会由引擎建立，不须要咱们本身来实现。

局部做用域：Local Scope

与全局做用域相对的概念就是局部做用域，或者叫本地做用域。局部做用域就是在全局做用域之下建立的任何内层做用域，能够说咱们定义的任何函数和块级做用域都是局部做用域，通常在用来与全局做用域作区别的时候才会采用这种归纳说法。在开发中，咱们主要关心的是使用函数做用域来实现局部做用域的这一具体方式。

公有做用域：Public Scope

公有做用域存在于模块中，它是提供项目中全部其余模块均可以访问的变量和方法的范围或命名空间。公私做用域的概念与模块化开发息息相关，咱们一般关心的是定义在公私做用域中的属性或方法。

模块化提供给程序更多的安全性控制，并隐蔽内部实现细节，可是要让程序很好的实现功能，咱们有访问模块内部做用域中数据的须要。从做用域链的查找机制可知，外层做用域是没法访问内层做用域变量的，而JavaScript 中公私做用域的概念也不像其余编程语言中那么完整，不能经过词法直接定义公有和私有做用域变量，因此闭包成为了模块化开发中的核心力量。

闭包实现了在外层做用域中访问内层做用域变量的可能，其方法就是在内层函数里再定义一个内层函数，用来保留对想要访问的函数做用域的内存引用，这样外层做用域就能够经过这个保留引用的闭包来访问内层函数里的数据了。

经过下面两段代码的执行结果就能看出区别：

function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
    }
    b()
    console.log(bb)
}
a()

控制台报错：Uncaught ReferenceError: bb is not defined，由于函数 b 在运行完后就从执行栈里出栈了，其内存引用也被内存回收机制清理掉了。

function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
        return function c () {
            console.log(bb)
        }
    }
    var c = b()
    console.log(c())
}
a()

而这段代码中用变量 c 保留了对函数 b 中返回的函数 c 的引用，函数 c 又根据词法做用域法则，可以进入函数 b 的做用域查找变量，这个引用造成的闭包就被保存在函数 a 中变量 c 的值中，函数 a 能够在任何想要的时候调用这个闭包来获取函数 b 里的数据。此时这个被返回的变量 bb 就成为了暴露在函数 a 的做用域范围内，定义在函数 b 里的公有做用域变量。

更加通用的实现公有做用域变量或 API 的方式，称为模块模式：

var a = (function a () {
    var aa = 'aa'
    function b () {
        var bb = 'bb'
        console.log(bb)
    }
    return {
        aa: aa,
        b: b
    }
})()
console.log(a.aa)
a.b()

使用闭包实现了一个单例模块，输出了共有变量 a.aa 和共有方法也称 API 的 a.b。

私有做用域：Private Scope

相对于公有做用域，私有做用域是存在于模块中，只能提供由定义模块直接访问的变量和方法的范围或命名空间。要澄清一个关于私有做用域变量的的误会，定义私有做用域变量，不必定是要彻底避免被外部模块或方法访问，更多时候是禁止它们被直接访问。大多时候能够经过模块暴露出的公有方法来间接地访问私有做用域变量，固然想不想让它被访问或者如何限制它的增删改查就是开发者本身掌控的事情了。

接着上述公有做用域的实现，来看看私有做用域的实现。

var a = (function a () {
    var bb = 'bb'
    var cc = 'c'
    function b () {
        console.log(bb)
    }
    function c () {
        cc = 'cc'
        console.log(cc)
    }
    return {
        b: b,
        c: c
    }
})()
a.b()
a.c()

在模块 a 中定义的属性 bb 和 cc 都是没法直接经过引用来获取的。可是模块暴露的两个方法 b 和 c，分别实现了一个查找操做和修改操做，间接控制模块中上述两个私有做用域变量。

做用域与This：Scope vs This

在对做用域是什么的理解中，最大的一个误区就是把做用域看成 this 对象。

一个铁打的证据是函数做用域的肯定是在词法分析时，属于编译阶段，而 this 对象是在运行时动态绑定到函数做用域里的。另外一个更明显的证据是当函数调用时，它们内部的 this 指的是全局对象，而不是函数自己，想必全部开发者都踩过这一坑，可以理解做用域与 this 本质上的区别。从这两点就能够确定决不能把做用域与 this 等同对待。

this 究竟是什么？它跟做用域有很大关系，但具体留到之后再讨论吧。在此以前咱们先要与做用域成为好朋友。