前端基础必看：JS 变量提升 & 函数提升完整解析

用关键字var定义的变量除了当前作用域的参数，他也是window的变量，在window下加上定义的参数名； 对于类（class）而言不存在变量提升（hoist）

一、变量提升

定义变量时用let 或者 const不会有变量提升这种问题；

js是怎么创建变量的呢？ 如下面的代码：

javascript 复制代码

var a = 1;
var b = 2;

js在解析上面的代码的时候，其实会按照下面的方式进行解析的：

javascript 复制代码

var a;
var b;
a = 1;
b = 2;

所以 js 并不是在我们定义一个变量的时候，声明完成之后立即赋值，而是把所有用到的变量全部声明之后，再到变量的定义的地方进行赋值，变量的声明的过程就是变量的提升。

例子：

js 复制代码

function foo() {
  var a = 1;
  console.log(a);
  console.log(b);
  var b = 2;
}
foo();

js的解析过程如下：

js 复制代码

function foo() {
  var a;
  var b;
  a = 1;
  console.log(a); // 1
  console.log(b); // undefined
  b = 2;
}
foo();

变量在声明提升的时候，是全部提升到作用域的最前面，一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了，而是赋值的位置在变量原本定义的位置

综上：

所以变量的提升，提升的其实是变量的初始化，而不是变量的赋值。

函数的提升和变量的提升类似，都是提升到作用域的最开始的位置，只不过变量的提升是分两步的，第一步是变量声明的提升，第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置，相当于剪切过去的样子。

在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置，不同的是，函数的提升后的位置是在变量提升后的位置之后的。

例子：

js 复制代码

function foo() {
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
}
foo();
// 输出顺序为： a()  1  1

js解析如下：

js 复制代码

function foo() {
  var a;
  function a() {}
  console.log(a); // a()
  a = 1;
  console.log(a); // 1
  console.log(a); // 1
}
foo();

Tips :

只有声明的变量和函数才会进行提升，隐式全局变量不会提升。

js 复制代码

function foo() {
  console.log(a);
  console.log(b); // 报错
  b = 'aaa';
  var a = 'bbb';
  console.log(a);
  console.log(b);
}
foo();