js的执行机制 - 技术栈

面试官：请问下面的题目输出结果是什么？并给出分析过程

js 复制代码

var a = 1
function foo(a){
    var a = 2
    function a(){}
    var b = a
    console.log(a)
}
foo(3)

这个时候肯你就一脸懵逼了，然后在心里咒骂他了。

其实当我们遇到这样的面试题的时候，我们需要有一个深入理解js的执行机制的能力，这道题目有点难，但是接下来我将会详细给你慢慢讲解。

js执行流程

首先js遇到一份代码时会执行以下步骤

读取代码

编译

执行

一、读取代码

遵循从上往下读取的规则

二、编译(重点！！！）

首先编译总是发生在执行前一刻的，编译完会立即执行，全局和函数体的编译是会生成执行上下文的，并且存入调用栈。调用栈是v8引擎用来管理函数之间的调用关系的一直结构 当一个函数执行完毕后，它的执行上下文就会被销毁。

编译的过程分为4步

创建执行上下文对象（分全局执行上下文和函数执行上下文）
找形参和变量声明，将形参和声明的变量名作为key，值为undefined（全局执行上下文不考虑形参）
统一形参和实参的值（全局执行上下文没有这个步骤）
找函数声明，将函数名作为key，值为函数体

举个例子来解释这些步骤我们就能很好的理解了。

js 复制代码

function fn(a){
    console.log(a)
    var a = 123
    console.log(a)
    function a(){}
    console.log(a)
    var b = function(){}
    console.log(b)
    function d(){}
    var d = a
    console.log(d)
}
fn(1)

这里需要注意，像function a(){}这样的才是函数声明，有=叫做函数表达式，比如var b = function(){}

js拿到这份先创建全局执行上下文，在全局代码里找变量声明发现没有，只有函数声明fn=function，如图：

全局编译完后执行代码，那么函数就会被调用，接下来就会编译函数体了，创建函数执行上下文，找形参和变量声明，将形参和实参统一，再找函数声明，如图：

函数体编译完后从上到下执行代码

css 复制代码

先输出function：a，a赋值为123，再输出123，再输出123，b赋值为一个函数体，在输出function：b，d赋值为123，输出123

运行结果如图：好了，讲到到这里相信大家对js的执行机制就有了一定了解，那么我们回过头来在看开始的那道题答案就很简单了 输出a的值为2。大家都答对了吗？

另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请"点赞+评论+收藏"一键三连，感谢支持！