JavaScript 执行机制 —— 变量提升

一、执行顺序

先看一段日常开发中遇到的代码（片段1）

通过控制台输出，如图：

如果将上面的第三行代码删除（片段1）

display()
console.log(name)（下面打印的name1，只改了个名称）
function display() {
  console.log("日常学习产出")
}

再执行上面的代码，结果如下：

从上面两段代码可以看出：

• 在执行的过程中，未申明的变量，会出现报错；
• 在变量定义之前使用，结果为undefined；
• 直接申明函数，在之前调用它，正常执行。

如果变量声明用 let、const 关键字会出现啥情况呢 如果用google浏览器二次执行片段1（刷新）又会遇到啥情况

二、变量提升

JavaScript 调用一个函数或者使用一个变量，不得不在编译的过程中先进行声明和赋值，下面是变量的声明和赋值

这段代码可以分成两部分

如下图所示：

函数的声明和赋值

function display() {
  console.log("日常学习产出")
}
var display = function() {
  console.log("日常学习产出")
}

图解如下：

变量提升：函数及变量的声明都将被提升到函数的最顶部。

三、执行原理

变量提升并非从物理层面移动到代码的最前面，实际上变量和函数声明在代码中的位置是不变的，JavaScript代码是在内存中执行的，所以时常都说JavaScript代码先编译，后执行；这个过程会出现两个模块：执行上下文和可执行代码这两个定义经常都会在各种博客和项目中提及到，后续诸如 this、变量、对象都与之相关 如图：

1、编译阶段

从上图执行流程细化过程中，编译阶段代码可以分成两部分：

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

var name = undefined
function display() {
  console.log("日常学习产出")
}

• 第二部分：执行的代码

2、执行阶段

如果出现相同的函数声明，执行最后一个函数，前面的函数会被覆盖

如果是下面的情况又如何：

console.log(display)
display()
var display = function() {
    console.log("学习要有产出")
}

四、总结

• JavaScript执行过程中要做变量提升，原因是JavaScript代码需先进行编译；
• 在编译阶段，变量和函数都存放在内存的环境变量中，默认值设置为undefined，在代码执行阶段，直接调用变量环境中相应的变量和函数；
• 如果相同的函数，环境变量会覆盖前面所有的相同命名的函数，保留最终定义的那个。