[置顶]从JavaScript作用域说开去

可以看到输出就出现问题了，由于 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]