从 JavaScript 做用域说开去

目录

• 1.静态做用域与动态做用域
• 2.变量的做用域
• 3.JavaScript 中变量的做用域
• 4.JavaScript 欺骗做用域
• 5.JavaScript 执行上下文
• 6.JavaScript 中的做用域链
• 7.JavaScript 中的闭包
• 8.JavaScript 中的模块

一. 静态做用域与动态做用域

在电脑程序设计中，做用域（scope，或译做有效范围）是名字（name）与实体（entity）的绑定（binding）保持有效的那部分计算机程序。不一样的编程语言可能有不一样的做用域和名字解析。而同一语言内也可能存在多种做用域，随实体的类型变化而不一样。做用域类别影响变量的绑定方式，根据语言使用静态做用域仍是动态做用域变量的取值可能会有不一样的结果。

• 包含标识符的宣告或定义；
• 包含语句和/或表达式，定义或部分关于可运行的算法；
• 嵌套嵌套或被嵌套嵌套。

名字空间是一种做用域，使用做用域的封装性质去逻辑上组群起关相的众识别子于单一识别子之下。所以，做用域能够影响这些内容的名字解析。
程序员常会缩进他们的源代码中的做用域，改善可读性。

做用域又分为两种，静态做用域和动态做用域。

静态做用域又叫作词法做用域，采用词法做用域的变量叫词法变量。词法变量有一个在编译时静态肯定的做用域。词法变量的做用域能够是一个函数或一段代码，该变量在这段代码区域内可见（visibility）；在这段区域之外该变量不可见（或没法访问）。词法做用域里，取变量的值时，会检查函数定义时的文本环境，捕捉函数定义时对该变量的绑定。

function f() {
    function g() {
  }
}复制代码

静态(词法)做用域，就是能够无须执行程序而只从程序源码的角度，就能够看出程序是如何工做的。从上面的例子中能够确定，函数 g 是被函数 f 包围在内部。

大多数如今程序设计语言都是采用静态做用域规则，如C/C++、C#、Python、Java、JavaScript……

相反，采用动态做用域的变量叫作动态变量。只要程序正在执行定义了动态变量的代码段，那么在这段时间内，该变量一直存在；代码段执行结束，该变量便消失。这意味着若是有个函数f，里面调用了函数g，那么在执行g的时候，f里的全部局部变量都会被g访问到。而在静态做用域的状况下，g不能访问f的变量。动态做用域里，取变量的值时，会由内向外逐层检查函数的调用链，并打印第一次遇到的那个绑定的值。显然，最外层的绑定便是全局状态下的那个值。

function g() {
}

function f() {
   g()；
}复制代码

当咱们调用f()，它会调用g()。在执行期间，g被f调用表明了一种动态的关系。

采用动态做用域的语言有Pascal、Emacs Lisp、Common Lisp（兼有静态做用域）、Perl（兼有静态做用域）。C/C++是静态做用域语言，但在宏中用到的名字，也是动态做用域。

二. 变量的做用域

1. 变量的做用域

变量的做用域是指变量在何处能够被访问到。好比：

function foo（）{
    var bar;
}复制代码

这里的 bar 的直接做用域是函数做用域foo()；

2. 词法做用域

JavaScript 中的变量都是有静态(词法)做用域的，所以一个程序的静态结构就决定了一个变量的做用域，这个做用域不会被函数的位置改变而改变。

3. 嵌套做用域

若是一个变量的直接做用域中嵌套了多个做用域，那么这个变量在全部的这些做用域中均可以被访问：

function foo (arg) {
    function bar() {
        console.log( 'arg:' + arg );
    }
    bar();
}

console.log(foo('hello'));   // arg:hello复制代码

arg的直接做用域是foo()，可是它一样能够在嵌套的做用域bar()中被访问，foo()是外部的做用域，bar()是内部做用域。

4. 覆盖的做用域

若是在一个做用域中声明了一个与外层做用域同名的变量，那么这个内部做用域以及内部的全部做用域中将会访问不到外面的变量。而且内部的变量的变化也不会影响到外面的变量，当变量离开内部的做用域之后，外部变量又能够被访问了。

var x = "global"；

function f() {
   var x = "local"；
   console.log(x);   // local
}

f();
console.log(x);  // global复制代码

这就是覆盖的做用域。

三. JavaScript 中变量的做用域

大多数的主流语言都是有块级做用域的，变量在最近的代码块中，Objective-C 和 Swift 都是块级做用域的。可是在 JavaScript 中的变量是函数级做用域的。不过在最新的 ES6 中加入了 let 和 const 关键字之后，就变相支持了块级做用域。到了 ES6 之后支持块级做用域的有如下几个：

1. with 语句
   用 with 从对象中建立出的做用域仅在 with 声明中而非外 部做用域中有效。
2. try/catch 语句
   JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会建立一个块做用域，其中声明的变量仅在 catch 内部有效。
3. let 关键字
   let关键字能够将变量绑定到所在的任意做用域中(一般是{ .. }内部)。换句话说，let 为其声明的变量隐式地了所在的块做用域。
4. const 关键字
   除了 let 之外，ES6 还引入了 const，一样能够用来建立块做用域变量，但其值是固定的 (常量)。以后任何试图修改值的操做都会引发错误。

这里就须要注意变量和函数提高的问题了，这个问题在前一篇文章里面详细的说过了，这里再也不赘述了。

不过这里还有一个坑，若是赋值给了一个未定义的变量，会产生一个全局变量。

在非严格模式下，不经过 var 关键字直接给一个变量赋值，会产生一个全局的变量

function func() { x = 123; }
func();
x
<123复制代码

不过在严格模式下，这里会直接报错。

function func() { 'use strict'; x = 123; }
func();
<ReferenceError: x is not defined复制代码

在 ES5 中，常常会经过引入一个新的做用域来限制变量的生命周期，经过 IIFE（Immediately-invoked function expression，当即执行的函数表达式）来引入新的做用域。

经过 IIFE ，咱们能够

1. 避免全局变量，隐藏全局做用域的变量。
2. 建立新的环境，避免共享。
3. 保持全局的数据对于构造器的数据相对独立。
4. 将全局的数据附加到单例对象上。
5. 将全局数据附加到方法中。

四. JavaScript 欺骗做用域

(1). with 语句

with 语句被不少人都认为是 JavaScript 里面的糟粕( Bad Parts )。起初它被设计出来的目的是好的，可是它致使的问题多于它解决的问题。

with 起初设计出来是为了不冗余的对象调用。

举个例子：

foo.a.b.c = 888;
foo.a.b.d = 'halfrost';复制代码

这时候用 with 语句就能够缩短调用：

with (foo.a.b) {
      c = 888;
      d = 'halfrost';
}复制代码

可是这种特性却带来了不少问题：

function myLog( errorMsg , parameters) {
  with (parameters) {
    console.log('errorMsg:' + errorMsg);
  }
}

myLog('error',{});
<errorMsg:error

myLog('error',{ errorMsg:'stackoverflow' }); 
<errorMsg:stackoverflow复制代码

能够看到输出就出现问题了，因为 with 语句，覆盖掉了第一个入参。经过阅读代码，有时候是不能分辨出这些问题，它也会随着程序的运行，致使发生很少的变化，这种对将来的不肯定性就很容易出现
bug。

with 会致使3个问题：

1. 性能问题
   变量查找会变慢，由于对象是临时性的插入到做用域链中的。

2. 代码不肯定性
   @Brendan Eich 解释，废弃 with 的根本缘由不是由于性能问题，缘由是由于“with 可能会违背当前的代码上下文，使得程序的解析（例如安全性）变得困难而繁琐”。

3. 代码压缩工具不会压缩 with 语句中的变量名

因此在严格模式下，已经严格禁止使用 with 语句。

Uncaught SyntaxError: Strict mode code may not include a with statement复制代码

若是仍是想避免使用 with 语句，有两种方法：

1. 用一个临时变量替代传进 with 语句的对象。
2. 若是不想引入临时变量，可使用 IIFE 。

(function () {
  var a = foo.a.b;
  console.log('Hello' + a.c + a.d);
}());

或者

(function (bar) {
  console.log('Hello' + bar.c + bar.d);
}(foo.a.b));复制代码

(2). eval 函数

eval 函数传递一个字符串给 JavaScript 编译器，而且执行其结果。

eval(str)复制代码

它是 JavaScript 中被滥用的最多的特性之一。

var a = 12;
eval('a + 5')
<17复制代码

eval 函数以及它的亲戚（ Function 、setTimeout、setInterval）都提供了访问 JavaScript 编译器的机会。

Function() 构造函数的形式比 eval() 函数好一点的地方在于，它令入参更加清晰。

new Function( param1, ...... , paramN, funcBody )


var f = new Function( 'x', 'y' , 'return x + y' )；
f(3,4)
<7复制代码

用 Function() 的方式至少不用使用间接的 eval() 调用来确保所执行的代码除了其本身的做用域只能访问全局的变量。

在 Weex 的代码中，就还存在着 eval() 的代码，不过 Weex 团队在注释里面承诺会改掉。总的来讲，最好应该避免使用 eval() 和 new Function() 这些动态执行代码的方法。动态执行代码相对会比较慢，而且还存在安全隐患。

再说说另外两个亲戚，setTimeout、setInterval 函数，它们也能接受字符串参数或者函数参数。当传递的是字符串参数时，setTimeout、setInterval 会像 eval 那样去处理。一样也须要避免使用这两个函数的时候使用字符串传参数。

eval 函数带来的问题总结以下：

1. 函数变成了字符串，可读性差，存在安全隐患。
2. 函数须要运行编译器，即便只是为了执行一个微不足道的赋值语句。这使得执行速度变慢。
3. 让 JSLint 失效，让它检测问题的能力大打折扣。

五. JavaScript 执行上下文

这个事情要从 JavaScript 源代码如何被运行开始提及。

咱们都知道 JavaScript 是脚本语言，它只有 runtime，没有编译型语言的 buildTime，那它是如何被各大浏览器运行起来的呢？

JavaScript 代码是被各个浏览器引擎编译和运行起来的。JavaScript 引擎的代码解析和执行过程的目标就是在最短期内编译出最优化的代码。JavaScript 引擎还须要负责管理内存，负责垃圾回收，与宿主语言的交互等。流行的引擎有如下几种：
苹果公司的 JavaScriptCore （JSC） 引擎，Mozilla 公司的 SpiderMonkey，微软 Internet Explorer 的 Chakra (JScript引擎)，Microsoft Edge 的 Chakra (JavaScript引擎) ，谷歌 Chrome 的 V8。

其中 V8 引擎是最著名的开源的引擎，它和前面那几个引擎有一个最大的区别是：主流引擎都是基于字节码的实现，V8 的作法很是极致，直接跳过了字节码这一层，直接把 JS 编译成机器码。因此 V8 是没有解释器的。（可是这都是历史，V8 如今最新版是有解释器的）

在2017年5月1号以后， Chrome 的 V8 引擎的v8 5.9 发布了，其中的 Ignition 字节码解释器将默认启动 ：V8 Release 5.9 。v8 自此回到了字节码的怀抱。

V8 在有了字节码之后，消除 Cranshaft 这个旧的编译器，并让新的 Turbofan 直接从字节码来优化代码，并当须要进行反优化的时候直接反优化到字节码，而不须要再考虑 JS 源代码。去掉 Cranshaft 之后，就成了 Turbofan + Ignition 的组合了。

Ignition + TurboFan 的组合，就是字节码解释器 + JIT 编译器的黄金组合。这一黄金组合在不少 JS 引擎中都有所使用，例如微软的 Chakra，它首先解释执行字节码，而后观察执行状况，若是发现热点代码，那么后台的 JIT 就把字节码编译成高效代码，以后便只执行高效代码而再也不解释执行字节码。苹果公司的 SquirrelFish Extreme 也引入了 JIT。SpiderMonkey 更是如此，全部 JS 代码最初都是被解释器解释执行的，解释器同时收集执行信息，当它发现代码变热了以后，JaegerMonkey、IonMonkey 等 JIT 便登场，来编译生成高效的机器码。

总结一下：

JavaScript 代码会先被引擎编译，转化成能被解释器识别的字节码。

源码会被词法分析，语法分析，生成 AST 抽象语法树。

AST 抽象语法树又会被字节码生成器进行屡次优化，最终生成了中间态的字节码。这时的字节码就能够被解释器执行了。

这样，JavaScript 代码就能够被引擎跑起来了。

JavaScript 在运行过程当中涉及到的做用域有3种：

1. 全局做用域（Global Scope）JavaScript 代码开始运行的默认环境
2. 局部做用域（Local Scpoe）代码进入一个 JavaScript 函数
3. Eval 做用域 使用 eval() 执行代码

当 JavaScript 代码执行的时候，引擎会建立不一样的执行上下文，这些执行上下文就构成了一个执行上下文栈（Execution context stack，ECS）。

全局执行上下文永远都在栈底，当前正在执行的函数在栈顶。

当 JavaScript 引擎遇到一个函数执行的时候，就会建立一个执行上下文，而且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。

对于每一个执行上下文都有三个重要的属性，变量对象（Variable object，VO），做用域链（Scope chain）和this。这三个属性跟代码运行的行为有很重要的关系。

变量对象 VO 是与执行上下文相关的数据做用域。它是一个与上下文相关的特殊对象，其中存储了在上下文中定义的变量和函数声明。也就是说，通常 VO 中会包含如下信息：

1. 建立 arguments object
2. 查找函数声明（Function declaration）
3. 查找变量声明（Variable declaration）

上图也解释了，为什么函数提高优先级会在变量提高前面。

这里还会牵扯到活动对象（Activation object）：
只有全局上下文的变量对象容许经过 VO 的属性名称间接访问。在函数执行上下文中，VO 是不能直接访问的，此时由活动对象(Activation Object, 缩写为AO)扮演 VO 的角色。活动对象是在进入函数上下文时刻被建立的，它经过函数的 arguments 属性初始化。

Arguments Objects 是函数上下文里的激活对象 AO 中的内部对象，它包括下列属性：

1. callee：指向当前函数的引用
2. length： 真正传递的参数的个数
3. properties-indexes：就是函数的参数值(按参数列表从左到右排列)

JavaScript 解释器建立执行上下文的时候，会经历两个阶段：

1. 建立阶段（当函数被调用，可是开始执行函数内部代码以前）
   建立 Scope chain，建立 VO/AO（variables, functions and arguments），设置 this 的值。
2. 激活 / 代码执行阶段
   设置变量的值，函数的引用，而后解释/执行代码。

VO 和 AO 的区别就在执行上下文的这两个生命周期里面。

VO 和 AO 的关系能够理解为，VO 在不一样的 Execution Context 中会有不一样的表现：当在 Global Execution Context 中，直接使用的 VO；可是，在函数 Execution Context 中，AO 就会被建立。

六. JavaScript 中的做用域链

在 JavaScript 中有两种变量传递的方式

1. 经过调用函数，执行上下文的栈传递变量。

函数每调用一次，就须要给它的参数和变量准备新的存储空间，就会建立一个新的环境将（变量和参数的）标识符合变量作映射。对于递归的状况，执行上下文，即经过环境的引用是在栈中进行管理的。这里的栈对应了调用栈。

JavaScript 引擎会以堆栈的方式来处理它们，这个堆栈，咱们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。

这里举个例子：好比用递归的方式计算n的阶乘。

2. 做用域链

在 JavaScript 中有一个内部属性 [[ Scope ]] 来记录函数的做用域。在函数调用的时候，JavaScript 会为这个函数所在的新做用域建立一个环境，这个环境有一个外层域，它经过 [[ Scope ]] 建立并指向了外部做用域的环境。所以在 JavaScript 中存在一个做用域链，它以当前做用域为起点，链接了外部的做用域，每一个做用域链最终会在全局环境里终结。全局做用域的外部做用域指向了null。

做用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

做用域是一套规则，是在 JavaScript 引擎编译的时候肯定的。
做用域链是在执行上下文的建立阶段建立的，这是在 JavaScript 引擎解释执行阶段肯定的。

function myFunc( myParam ) {
    var myVar = 123;
    return myFloat;
}
var myFloat = 2.0;  // 1
myFunc('ab');       // 2复制代码

当程序运行到标志 1 的时候：

函数 myFunc 经过 [[ Scope]] 链接着它的做用域，全局做用域。

当程序运行到标志 2 的时候，JavaScript 会建立一个新的做用域用来管理参数和本地变量。

因为外层做用域链，使得 myFunC 能够访问到外层的 myFloat 。

这就是 Javascript 语言特有的"做用域链"结构（chain scope），子对象会一级一级地向上寻找全部父对象的变量。因此，父对象的全部变量，对子对象都是可见的，反之则不成立。

做用域链是保证对执行环境有权访问的全部变量和函数的有序访问。做用域链的前端始终是当前执行的代码所在环境的变量对象。而前面咱们已经讲了变量对象的建立过程。做用域链的下一个变量对象来自包含环境即外部环境，这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是做用域链中的最后一个对象。

七. JavaScript 中的闭包

当函数能够记住并访问所在的词法做用域，即便函数是在当前词法做用域以外执行，这时就产生了闭包。

接下来看看你们对闭包的定义是什么样的：

MDN 对闭包的定义：

闭包是指那些可以访问独立（自由）变量的函数（变量在本地使用，但定义在一个封闭的做用域中）。换句话说，这些函数能够「记忆」它被建立时候的环境。

《JavaScript 权威指南(第6版)》对闭包的定义：

函数对象能够经过做用域链相互关联起来，函数体内部的变量均可以保存在函数做用域内，这种特性在计算机科学文献中称为闭包。

《JavaScript 高级程序设计(第3版)》对闭包的定义：

闭包是指有权访问另外一个函数做用域中的变量的函数。

最后是阮一峰老师对闭包的解释：

因为在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成定义在一个函数内部的函数。它的最大用处有两个，一个是前面提到的能够读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。

再来对比看看 OC，Swift，JS，Python 4种语言的闭包写法有何不一样：

void test() {
    int value = 10;
    void(^block)() = ^{ NSLog(@"%d", value); };
    value++;
    block();
}

// 输出10复制代码

func test() {
    var value = 10
    let closure = { print(value) }
    value += 1
    closure()
}
// 输出11复制代码

function test() {
    var value = 10;
    var closure = function () {
        console.log(value);
    }
    value++;
    closure();
}
// 输出11复制代码

def test():
    value = 10
    def closure():
        print(value)
    value = value + 1
    closure()
// 输出11复制代码

能够看出 OC 的写法默认是和其余三种语言不一样的。关于 OC 的闭包原理，iOS 开发的同窗应该都很清楚了，这里再也不赘述。固然，想要第一种 OC 的写法输出11，也很好改，只要把外部须要捕获进去的变量前面加上 __block 关键字就能够了。

最后结合做用域链和闭包举一个例子：

function createInc(startValue) {
  return function (step) {
    startValue += step;
    return startValue;
  }
}

var inc = createInc(5);
inc(3);复制代码

当代码进入到 Global Execution Context 以后，会建立 Global Variable Object。全局执行上下文压入执行上下文栈。

Global Variable Object 初始化会建立 createInc ，并指向一个函数对象，初始化 inc ，此时仍是 undefined。

接着代码执行到 createInc(5)，会建立 Function Execution Context，并压入执行上下文栈。会建立 createInc Activation Object。

因为尚未执行这个函数，因此 startValue 的值仍是 undefined。接下来就要执行 createInc 函数了。

当 createInc 函数执行的最后，并退出的时候，Global VO中的 inc 就会被设置；这里须要注意的是，虽然 create Execution Context 退出了执行上下文栈，可是由于 inc 中的成员仍然引用 createInc AO（由于 createInc AO 是 function(step) 函数的 parent scope ），因此 createInc AO 依然在 Scope 中。

接着再开始执行 inc(3)。

当执行 inc(3) 代码的时候，代码将进入 inc Execution Context，并为该执行上下文建立 VO/AO，scope chain 和设置 this；这时，inc AO将指向 createInc AO。

最后，inc Execution Context 退出了执行上下文栈，可是 createInc AO 没有销毁，能够继续访问。

八. JavaScript 中的模块

由做用域又能够引伸出模块的概念。

在 ES6 中会大量用到模块，经过模块系统进行加载时，ES6 会将文件看成独立的模块来处理。每一个模块均可以导入其余模块或特定的 API 成员，一样也能够导出本身的 API 成员。

模块有两个主要特征:

1. 为建立内部做用域而调用了一个包装函数;
2. 包装函数的返回值必须至少包括一个对内部函数的引用，这样就会建立涵盖整个包装函数内部做用域的闭包。

JavaScript 最主要的有 CommonJS 和 AMD 两种，前者用于服务器，后者用于浏览器。在 ES6 中的 Module 使得编译时就能肯定模块的依赖关系，以及输入输出的变量。CommonJS 和 AMD 模块都只能运行时肯定这些东西。

CommonJS 模块就是对象，输入时必须查找对象属性。属于运行时加载。CommonJS 输入的是被输出值的拷贝，并非引用。

ES6 的 Module 在编译时就完成模块编译，属于编译时加载，效率要比 CommonJS 模块的加载方式高。ES6 模块的运行机制与 CommonJS 不同，它遇到模块加载命令 import 时不会去执行模块，只会生成一个动态的只读引用。等到真正须要的时候，再去模块中取值。ES6 模块加载的变量是动态引用，原始值变了，输入的值也会跟着变，而且不会缓存值，模块里面的变量绑定其所在的模块。

Reference：
学习Javascript闭包（Closure）
JavaScript的执行上下文
V8
V8 JavaScript Engine
V8 Ignition：JS 引擎与字节码的不解之缘
Ignition: An Interpreter for V8 [BlinkOn]