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

1、引言

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

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

2、渲染引擎 | 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等元素。

3、JavaScript运行时（JavaScript Runtime）

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

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

好比，虽然Chrome和node都是用了V8引擎，可是他们的运行时却不一样，好比process、fs浏览器都没法提供。

一段javaScript代码的运行咱们能够分为两个阶段。

4、JavaScript运行的两个阶段

4.1 编译阶段

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

4.2 执行阶段

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

4.2.1 代码块

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

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

5、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引擎会建立一个执行上下文，已做为代码运行的基础运行环境。

6、执行上下文

在"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 内部的代码也会有它属于本身的执行上下文，请不要、不要、不要轻易使用它。

执行上下文也分为建立和执行阶段。在建立阶段就很是有意思了。

7、执行上下文的建立

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

• 决定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语句块中会改变。

8、JavaScript的执行过程总结

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

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