如何通过具体案例掌握JavaScript执行上下文的工作机制？

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

引号+引号+我们知道，JS代码的执行顺序总体上是与代码先后顺序一致的，当先抛出异常问题时，你会发现即便算得上是同步代码，它的执行也与你预期不一致，例如：+function f1() { console.log('听风是风'); }+

壹 ❀ 引

我们都知道，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一般不会使用，这里不做讨论。