如何通过实例深入理解JavaScript执行上下文运行机制？

本文共计3177个文字，预计阅读时间需要13分钟。

伪原创开头内容，字数不超过100字，直接输出结果：函数f1()，输出'听风是风'，如果先抛出异常，你会发现即使算作是同步代码，它的执行也与你的预期不一致。

壹 ❀ 引

我们都知道，JS代码的执行顺序总是与代码先后顺序有所差异，当先抛开异步问题你会发现就算是同步代码，它的执行也与你的预期不一致，比如：

function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo

按照代码书写顺序，应该先输出 听风是风，再输出 echo才对，很遗憾，两次输出均为 echo；如果我们将上述代码中的函数声明改为函数表达式，结果又不太一样：

var f1 = function () { console.log('听风是风'); }; f1(); //听风是风 var f1 = function() { console.log('echo'); }; f1(); //echo

这说明代码在执行前一定发生了某些微妙的变化，JS引擎究竟做了什么呢？这就不得不提JS执行上下文的了。

贰 ❀ JS执行上下文

JS代码在执行前，JS引擎总要做一番准备工作，这份工作其实就是创建对应的执行上下文；

执行上下文有且只有三类，全局执行上下文，函数上下文，与eval上下文；由于eval一般不会使用，这里不做讨论。