浏览器中的 JavaScript 执行机制

思维导图

本文为反复学习极客时间-《浏览器的工作原理与实践》-浏览器中的 JavaScript 执行机制章节中的一些思考与记录。

一些重要概念

变量提升

• 所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。
• 变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。
• 从概念的字面意义上来看，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，正如我们所模拟的那样。
• 但，这并不准确。实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。

执行上下文

分类

• 全局执行上下文
• 函数执行上下文
• eval 执行上下文

调用栈

• 调用栈就是用来管理函数调用关系的一种数据结构
• 在执行上下文创建好后， JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈

作用域 Scope

• 定义：作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。
• 通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

分类-ES6 之前

• 全局作用域。全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。
• 函数作用域。函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。

ES6 新增

• 块级作用域：let/const

作用域链

• 在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为outer。
• 当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量
• 如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找
• 把这个查找的链条就称为作用域链
• 在 JavaScript 执行过程中，其作用域链是由词法作用域决定的

词法作用域

<