JavaScript 执行机制 —— 变量提高

1、执行顺序

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

display()
console.log(name)
var name = "掘金"
function display() {
  console.log("平常学习产出")
}
复制代码

经过控制台输出，如图：

若是将上面的第三行代码删除（片断1）

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

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

从上面两段代码能够看出：

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

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

2、变量提高

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

var name = "掘金"
复制代码

这段代码能够分红两部分

var name   // 声明部分
name = "掘金" // 赋值部分
复制代码

以下图所示：

函数的声明和赋值

function display() {
  console.log("平常学习产出")
}
var display = function() {
  console.log("平常学习产出")
}
复制代码

图解以下：

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

• 代码在执行的过程当中，会把声明的部分提高到代码开头，若是有赋值就不用赋值，没有就设置默认值undefined
• 原有的var关键字会移除，例子中 name = "掘金",它变量提高的过程当中就剔除var字段

3、执行原理

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

一、编译阶段

从上图执行流程细化过程当中，编译阶段代码能够分红两部分：

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

var name = undefined
function display() {
  console.log("平常学习产出")
}
复制代码

• 第二部分：执行的代码

display()
console.log(name)
name = "掘金"
复制代码

二、执行阶段

• 当执行到display() 函数时，JavaScript引擎在环境变量中查找函数，因为变量环境中存在该函数引用，因此JavaScript引擎执行该函数代码块，并输出结果；
• 接下来控制台输出name，环境变量中name的默认值是undefined，因此这时候输出为undefined；
• 最后“掘金”赋值给环境变量中name字段，这时候name="掘金"

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

若是是下面的状况又如何：

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

4、总结

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