🐟 🐟 JavaScript执行机制之变量提升

站长

2022年11月07日 18:41 · 阅读数 16

前言

又来到了这些老生常谈的问题，之前准备面试的时候觉得临时抱佛脚应该没什么事。但现在离自己真正准备面试还有一段时间，为了把这些底层而重要的知识深深烙在脑海里，故准备以这种写文章的方式进行一个知识的输出。这既是对自己所学知识的一个简单的梳理，还可以方便日后自己复习，并且在这个过程中还可能能够帮助到一起学习的小伙伴们~

这一节的内容大部分来自极客时间的李兵老师的课程。 👉👉 07 | 变量提升：JavaScript代码是按顺序执行的吗？ (geekbang.org)

变量提升的由来

先让我们的大脑清空之前对变量提升的理解吧。

(有时候把一个知识清零再学习更有益于提升~)

那么就先看这么一个问题

👇👇👇

JavaScript代码是按顺序执行的吗？

(该开始学JavaScript的时候肯定是这样认为的吧)

接下先看段代码，你觉得下面这段代码输出的结果是什么？

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

如果依据JavaScript 是按顺序执行的，那么：当执行到第 1 行的时候，由于函数 showName 还没有定义，所以执行应该会报错；同样执行第 2 行的时候，由于变量 myname 也未定义，所以同样也会报错。然而实际执行结果却并非如此，如下图：

🐟 🐟 JavaScript执行机制之变量提升

第 1 行输出“函数 showName 被执行”，第 2 行输出“undefined”，这和前面想象中的顺序执行有点不一样啊！

通过上面的执行结果，你应该已经知道了函数或者变量可以在定义之前使用，那如果使用没有定义的变量或者函数，JavaScript 代码还能继续执行吗？为了验证这点，我们可以删除第 3 行变量 myname 的定义，如下所示：


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

然后再次执行这段代码时，JavaScript 引擎就会报错，结果如下：

🐟 🐟 JavaScript执行机制之变量提升从上面两段代码的执行结果来看，我们可以得出如下三个结论。

在执行过程中，若使用了未声明的变量，那么 JavaScript 执行会报错。
在一个变量定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。
在一个函数定义之前使用它，不会出错，且函数能正确执行。

第一个结论很好理解，因为变量没有定义，这样在执行 JavaScript 代码时，就找不到该变量，所以 JavaScript 会抛出错误。

但是对于第二个和第三个结论，就挺让人费解的：

变量和函数为什么能在其定义之前使用？

这似乎表明 JavaScript 代码并不是一行一行执行的。同样的方式，变量和函数的处理结果为什么不一样？比如上面的执行结果，提前使用的 showName 函数能打印出来完整结果，但是提前使用的 myname 变量值却是 undefined，而不是定义时使用的“极客时间”这个值。

这就是变量提升的由来了~

从声明和赋值理解变量提升

为了搞清楚上面的问题，我们还得知道JavaScript 中的声明和赋值。


var myname = '极客时间'

这段代码你可以把它看成是两行代码组成的：


var myname    //声明部分
myname = '极客时间'  //赋值部分

🐟 🐟 JavaScript执行机制之变量提升

上面是变量的声明和赋值，那接下来我们再来看看函数的声明和赋值，结合下面这段代码：


function foo(){
  console.log('foo')
}

var bar = function(){
  console.log('bar')
}

可以参考下图：

🐟 🐟 JavaScript执行机制之变量提升

好了,这就是声明和赋值操作，那接下来我们就可以聊聊什么是变量提升了。

👇 👇 👇

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

下面我们就来模拟实现一下这些变量和函数声明是怎么提升的：

看个直观一点的图

🐟 🐟 JavaScript执行机制之变量提升

从图中可以看出，对原来的代码主要做了两处调整：

1.第一处是把声明的部分都提升到了代码开头，如变量 myname 和函数 showName，并给变量设置默认值 undefined；

2.第二处是移除原本声明的变量和函数，如var myname = '极客时间'的语句，移除了 var 声明，整个移除 showName 的函数声明。

通过这两步，就可以实现变量提升的效果。

从变量提升到JavaScript 代码的执行流程

从概念的字面意义上来看，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，正如我们所模拟的那样。但，这并不准确。实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入内存中。对，你没听错，一段 JavaScript 代码在执行之前需要被 JavaScript 引擎编译，编译完成之后，才会进入执行阶段。大致流程你可以参考下图：

🐟 🐟 JavaScript执行机制之变量提升

编译阶段

那么编译阶段和变量提升存在什么关系呢？

回到最初的代码

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

为了方便介绍，可以把这段代码分成两部分。

第一部分：变量提升部分的代码。


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

第二部分：执行部分的代码。


showName()
console.log(myname)
myname = '极客时间'

🐟 🐟 JavaScript执行机制之变量提升

从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文和可执行代码。

执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。

我们再结合之前这段代码来分析下是如何生成变量环境对象的。


showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

我们可以一行一行来分析上述代码：

第 1 行和第 2 行，由于这两行代码不是声明操作，所以 JavaScript 引擎不会做任何处理；

第 3 行，由于这行是经过 var 声明的，因此 JavaScript 引擎将在环境对象中创建一个名为 myname 的属性，并使用 undefined 对其初始化；

第 4 行，JavaScript 引擎发现了一个通过 function 定义的函数，所以它将函数定义存储到堆中，并在环境对象中创建一个showName 的属性，然后将该属性值指向堆中函数的位置。

好了，现在有了执行上下文和可执行代码了，那么接下来就到了执行阶段了。

执行阶段

(为了方便对照，再次把代码搬过来)


showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

JavaScript 引擎开始执行“可执行代码”，按照顺序一行一行地执行。下面我们就来一行一行分析下这个执行过程：

当执行到 showName 函数时，JavaScript 引擎便开始在变量环境对象中查找该函数，由于变量环境对象中存在该函数的引用，所以 JavaScript 引擎便开始执行该函数，并输出“函数 showName 被执行”结果。
接下来打印“myname”信息，JavaScript 引擎继续在变量环境对象中查找该对象，由于变量环境存在 myname 变量，并且其值为 undefined，所以这时候就输出 undefined。
接下来执行第 3 行，把“极客时间”赋给 myname 变量，赋值后变量环境中的 myname 属性值改变为“极客时间”

好了，以上就是一段代码的编译和执行流程。

代码中出现相同的变量或者函数怎么办？

现在大家已经知道了，在执行一段 JavaScript 代码之前，会编译代码，并将代码中的函数和变量保存到执行上下文的变量环境中，那么如果代码中出现了重名的函数或者变量，JavaScript 引擎会如何处理？我们先看下面这样一段代码：


function showName() {
    console.log('极客邦');
}
showName();
function showName() {
    console.log('极客时间');
}
showName();

我们来分析下其完整执行流程：

首先是编译阶段。遇到了第一个 showName 函数，会将该函数体存放到变量环境中。接下来是第二个 showName 函数，继续存放至变量环境中，但是变量环境中已经存在一个 showName 函数了，此时，第二个 showName 函数会将第一个 showName 函数覆盖掉。这样变量环境中就只存在第二个 showName 函数了。
接下来是执行阶段。先执行第一个 showName 函数，但由于是从变量环境中查找 showName 函数，而变量环境中只保存了第二个 showName 函数，所以最终调用的是第二个函数，打印的内容是“极客时间”。第二次执行 showName 函数也是走同样的流程，所以输出的结果也是“极客时间”

综上所述，一段代码如果定义了两个相同名字的函数，那么最终生效的是最后一个函数。

小结

JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。
在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。
如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。