通过运行机制看this绑定 、作用域、作用域链和闭包

一、引言

了解js的运行机制有助于我们在日常的工作中，写成高质量的代码，减少bug的产生，节约维护成本。也有助于我们通过造火箭的面试。

• 了解JavaScript引擎。
• 通过运行机制看作用域和作用域链。
• 通过运行机制理解this的绑定和优先级。
• 通过运行机制理解闭包。

二、渲染引擎 | JavaScript引擎（JavaScript Engine）

了解运行机制之前，我们先来搞清楚几个基本概念。

2.1 渲染引擎

渲染是根据描述或者定义构建一个数据模型，生成图形的过程。渲染引擎将页面资源（html、css、javaScript等）构建成可视化、可听化的多媒体结果。也就是我们看到的浏览器网页呈现。

2.2 JavaScript引擎

当我们在运行一段代码时，真正赋予这段代码生命的就是JavaScript引擎。JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器中。JavaScript引擎从头到尾负责整个JavaScript程序的编译和执行过程。

2.2.1 JavaScript引擎有许多种

最为大家熟知的无疑是V8引擎，他用于Chrome浏览器和Node中。

• V8 — 开源，由 Google 开发，用 C ++ 编写。
• Rhino — 由 Mozilla 基金会管理，开源，完全用 Java 开发。
• SpiderMonkey — 是第一个支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用。
• JavaScriptCore — 开源，以Nitro形式销售，由苹果为Safari开发。
• KJS — KDE 的引擎，最初由 Harri Porten 为 KDE 项目中的 Konqueror 网页浏览器开发。
• Chakra (JScript9) — Internet Explorer。
• Chakra (JavaScript) — Microsoft Edge。
• Nashorn, 作为 OpenJDK 的一部分，由 Oracle Java 语言和工具组编写。
• JerryScript —  物联网的轻量级引擎。

2.3 渲染引擎和JavaScript引擎的关系

• 渲染引擎通过调用接口来处理JavaScript的逻辑。
• JavaScript通过桥接接口来访问渲染引擎的DOM等元素。

三、JavaScript运行时（JavaScript Runtime）

如果想让一段JavaScript代码真正的运气起来，单单靠JavaScript引擎是不够的，JavaScript Engine的工作是编译并执行 JavaScript 代码，完成内存分配、垃圾回收等,但是缺乏与外部交互的能力。

比如单靠一个V8引擎是无法进行ajax请求、设置定时器、响应事件等操作的，这就需要JavaScript运行时（JavaScript Runtime）的帮助，它为 JavaScript 提供一些对象或机制，使它能够与外界交互。

比如，虽然Chrome和node都是用了V8引擎，但是他们的运行时却不同，比如process、fs浏览器都无法提供。

一段javaScript代码的运行我们可以分为两个阶段。

四、JavaScript运行的两个阶段

4.1 编译阶段

• 分词/词法分析
• 解析/语法分析
• 预编译（代码生成、解释阶段）

4.2 执行阶段

• JavaScript并非是简单的一行一行解释执行代码，而是将JavaScript划分为一块一块的可以执行代码块进行执行。JavaScript中代码块又分为三种。

4.2.1 代码块

• 全局可以执行代码。
• 函数可执行代码。
• Eval可执行代码。

接下里我们主要说说，JavaScript的执行阶段。

五、JavaScript执行

JavaScript既是编译语言，又是解释语言。JavaScript引擎实际上在执行代码前仅几微秒就编译了代码。

称为JIT（及时编译）。它本身是一个很大的话题。但是现在，我们可以跳过编译背后的理论，而只关注执行阶段，这仍然很有趣。

JavaScript引擎，编译和解释我们的JavaScript代码。JavaScript引擎其实也包含了很多较小的部分，这些较小的部分，分工合作来保证JavaScript的运行。

• 全局内存（Global Memory）
• 调用堆栈（Call Stack）
• 执行上下文
• 等等其他组件

5.1 全局内存（Global Memory）

先看一段代码

var num = 2;
function pow(num) {
    return num * num;
}

看到这段代码，大家思考一下会发生什么。可能大家已经想到JavaScript引擎，在执行到第一行代码时就立刻将引用放入全局内存（Global Memory）。全局内存是JavaScript引擎保存变量和函数的地方。当引擎读取以上代码时，全局内存将填充两个绑定：

上面的代码不会执行，接下来我们尝试执行函数。

5.2 调用栈（Call Stack）

var num = 2;
function pow(num) {
    return num * num;
}
pow(num);

当我们执行函数的时，JavaScript引擎会用到调用堆栈（Call Stack）。调用堆栈是一个堆栈类的数据结构，意味着它是先进后出的执行方式。如果是多个函数，将依次进栈，先进后出。

打开浏览器控制台，然后查看“来源”标签。您将看到一些框，其中一个更有趣的名称是Call Stack。

当代码块在执行时，JavaScript引擎会创建一个执行上下文，已作为代码运行的基础运行环境。

六、执行上下文

在”4.2.1代码块”，有三种代码块，分别对应三种执行上下文

• 全局可以执行代码 => 全局执行上下文。
• 函数可执行代码 => 函数执行上下文。
• Eval可执行代码 => Eval执行上下文。

6.1 全局执行上下文

基础执行上下文，一个程序只有一个全局执行上下文，任何不在函数内部的代码都在全局执行执行上下文。全局执行上下文只要做两件事情：

• 创建一个全局的 window 对象（浏览器的情况下）。
• 置 this 的值等于这个全局对象。
  

  

6.2 函数执行上下文

如果我们的函数有一些嵌套变量或一个或多个内部函数怎么办？

var num = 2;
function pow(num) {
    var a = 1,
        b = 2,
        c = 3;
    function add(a, b, c) {
        return a + b + c;
    }
}

每当一个函数被调用时,都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建。

6.3 Eval执行上下文

执行在 eval 内部的代码也会有它属于自己的执行上下文，请不要、不要、不要轻易使用它。

执行上下文也分为创建和执行阶段。在创建阶段就非常有意思了。

七、执行上下文的创建

执行上下文的创建阶段主要做了三件事：

• 决定this的绑定。
• 创建词法环境。
• 创建变量环境。

7.1 this绑定

在创建可执行上下文的时候，根据代码的执行条件，来判断分别进行默认绑定、隐式绑定、显示绑定等。

7.1.1 this绑定分类

• 普通函数的调用：this指向window(浏览器环境)。
• 对象方法的调用：this指向调用对象。（隐式绑定）
• 构造函数：this指向构造函数实例。
• apply、call、bind：this指向绑定值。（显示绑定）
• 箭头函数this：this指向外层第一个普通函数调用的this。（默认绑定）

7.1.2 this绑定优先级

this绑定也是有优先级的，优先级规则如下：

1. 函数是否存在new绑定调用：如果是的话this绑定到新创建的对象上。
2. 函数是否通过apply、call、bind显示绑定：如果是，this绑定到指定对象上。
3. 函数是否在对象方法隐式调用：如果是的话，this绑定到调用对象。
4. 如果上面三条都不满足的话：在严格模型下，this绑定到undefined，在非严格模式下，this绑定到全局对象上。

7.2 词法环境

词法环境是JavaScript引擎内部用来跟踪标识符和特定变量之间的映射关系。词法环境是Js作用域的实现机制。如果之前了解过作用域概念的话，和词法环境是类似的（ES6之后作用域概念变为词法环境概念）。

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。 ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6的到来，为我们提供了‘块级作用域’,可通过新增命令let和const来体现。

7.2.1 词法环境分类

• 全局环境：全局环境的外部环境引用是 null，它拥有内建的对象 Object/Array/等、环境记录器内的原型函数、定义的全局变量。
• 模块环境：模块环境的外部环境引用是全局环境（window,浏览器环境），它拥有模块顶级声明的绑定、模块显式导入的绑定。
• 函数环境：函数环境外部引用可以是其他函数环境，也可以是全局环境。它拥有声明变量和函数。

7.2.2 词法环境组成

• 外部环境的引用（outer Lexical Environment）：指它可以访问其父级词法环境（即作用域）。
• 环境记录器 （Environment Record）：存储变量和函数声明的实际位置。（声明式环境记录器，对象式环境记录器是两个比较主要环境记录器）。

词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，这些引用串联起来一直指向全局的词法环境，因此形成了作用域链。

词法环境中含有外部词法环境的引用，我们可以通过这个引用获取外部词法环境的变量、声明等，因此形成了闭包。

7.3 变量环境

查看大量资料都没有详细的记录变量环境。

ES5标准文档中规定，执行环境包括：词法环境、变量环境、this绑定。其中执行环境的词法环境和变量环境组件始终为词法环境对象。当创建一个执行环境时，其词法环境组件和变量环境组件最初是同一个值。在该执行环境相关联的代码的执行过程中，变量环境组件永远不变，而词法环境组件有可能改变。

变量环境的不变和词法环境的可能改变都是指引用的改变，规范12.10和12.14两部分的内容提到了词法环境在with以及catch语句块中会改变。

八、JavaScript的执行过程总结

九、预览整体过程，本文只是讲了一下部分

JavaScript既是编译语言，又是解释语言。但是JavaScript本质上是一种解释型语言，与编译型语言不同的是它需要一边执行一边解析，而编译型语言在执行时已经完成编译，可直接执行，有更快的执行速度。

参考：

• JavaScript-V8引擎
• JavaScript-this绑定的优先级
• JavaScript的运行机制
• JavaScript Engines: How Do They Even Work? From Call Stack to Promise, (almost) Everything You Need to Know