浏览器工作原理与实践总结二

浏览器中JavaScript执行机制

---

一、 JavaScript变量提升，执行顺序

showName() 
console.log(myname) 
function showName() { 
console.log('函数 showName 被执行'); 
}

---

以上代码执行结果，有以下三个结论：

1. 在执行过程中，若使用了未声明的变量，那么JavaScript执行会报错。
2. 在一个变量定义之前使用它，不会出错，且函数能正确执行。
3. 在一个函数定义之前使用它，不会出错且函数能正确执行。

---

变量提升：是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。

---

JavaScript代码的执行流程

实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。一段 JavaScript 代码在执行之前需要被 JavaScript 引擎编译，编译完成之后，才会进入执行阶段。大致流程你可以参考下图：

---

编译阶段：经过编译后会生成执行上下文和可执行代码

---

执行上下文是JavaScript执行一段代码时的运行环境，此过程存在变量环境对象，JavaScript引擎会把声明以外的代码编译为字节码。

---

二、JavaScript代码调用栈

调用栈：用来管理函数调用关系的一种数据结构，后进先出。
JavaScript执行多个上下文时，JavaScript引擎通过栈的数据结构来管理。