变量提升

关于变量提升

JavaScript 和其他的强类型的语言有所不同，它是弱类型的

所以 JavaScript 定义变量是不需要考虑是什么类型的，在 ES6 之前我们一般使用 var 来声明一个变量，在 ES6 之后我们会使用 let 和 const 来定义变量(常量)

那么什么是变量提升呢？

打个比方，这个过程就好像变量和函数声明从它们在代码中出现的位置被”移动”到了最上面—《你不知道的 Javscript 上卷》

在直觉上我们会认为 JavaScript 代码在执行的时候是由上到下一行一行执行的，但是实际上这并不完全准确，有一种特殊情况会导致整个假设错误

a = 2;
var a;
console.log(a);

你认为这个里面会输出什么呢？

undefined or 2

正确答案是 2 ，那么为什么是 2 呢，按道理 a 应该是重新赋值了呀(a=undefined)

其实这里面就是因为变量提升，实际上他会变成这样子的：

var a;
a = 2;
console(a); //2

下面我们再看一段代码

console.log(a);
var a = 2;

这次会输出什么呢？是 2 ? undefined ? ReferenceError

其实是 undefined,其实是这样子的：

var a;
console.log(a); // a is undefined
a = 2;

下面我们来解释一下这个是为什么呢

引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将他们关联起来

因此，正确的思考路线是，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理

当你看到 var a = 2 时,可能会认为这是一个声明，但 JavaScript 实际上会将其看成两个声明: var a 和 a = 2，第一个定义声明是在编译阶段进行的，第二个赋值声明会被留在原地等待执行阶段，其实就是先有声明后有赋值

只有声明本身会被提升，而赋值或其他的运行逻辑会留在原地。如果提升改变了代码执行的顺序，会造成非常严重的破坏

foo()

function(){
	console.log(a) 	//undefined
    var a = 2
}

foo 函数的声明(这个例子还包括实际函数的蕴含值)被提升了，因此第一行中的调用可以正常执行

另外值得注意的是，每个作用域都会进行提升操作。尽管前面大部分的代码片段已经简化了(因为他们只包含全局作用域)，而我们正在讨论的 foo(…)函数本身也会在内部对var a 进行提升(显然并不是提升到了整个程序的最上方)。因此这段代码实际上会被理解为下面的形式：

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

可以看到，函数声明会提升，但是函数表达式不会被提升

函数优先

函数声明和变量声明都会被提升，但是一个值得注意的细节(这个细节可以出现在有很多个”重复”声明的代码中)是函数会首先被提升，然后才是变量

考虑以下代码：

foo(); //1

var foo;

function foo() {
  console.log(1);
}

foo = function () {
  console.log(2);
};

会输出 1 而不是 2 ，这个代码片段会被引擎解释理解为如下形式：

function foo() {
  console.log(1);
}

foo(); //1

foo = function () {
  console.log(2);
};

注意，var foo 尽管出现在 function foo()…的声明之前，但它是重复的声明(因此被忽略了)，因为函数声明会被提升到普通变量之前

尽管重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的

foo(); //3

function foo() {
  consloe.log(1);
}

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

function foo() {
  console.log(3);
}

虽然这些听起来都是些无用的学院理论，但是它说明了在同一个作用域中进行重复定义是非常糟糕的，而且经常会导致各种奇怪的问题

一个普通块内部的函数声明通常会被提升到所在作用域的顶部，这个过程不会像下面的代码暗示的那样可以被条件判断所控制：

foo(); //TypeError: foo is not a function

var a = true;

if (a) {
  function foo() {
    console.log("a");
  }
} else {
  function foo() {
    console.log("b");
  }
}