为什么 javascript 函数声明会提升 而 函数表达式不会

Js代码分为两个阶段：编译阶段和执行阶段

我们习惯将var a = 2;看作一个声明，而实际上JavaScript引擎并不这么认为。它将var a和a = 2当作两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。

这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。

声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。

变量声明

Js编译器会把变量声明看成两个部分分别是声明操作(var a)和赋值操作(a=2)

声明操作在编译阶段进行，声明操作会被提升到执行环境的顶部，值是undefined(表示未初始化)

赋值操作会被留在原地等待执行阶段

var a = 2;

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

foo();

// 相当于

var a = 2;

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

foo();

定义函数有两种方式：函数声明和函数表达式

函数声明提升会在编译阶段把声明和函数体整体都提前到执行环境顶部，所以我们可以在函数声明之前调用这个函数

函数表达式，其实就是变量声明的一种，声明操作会被提升到执行环境顶部，并赋值undefined。赋值操作被留在原地等到执行。

// 函数声明

foo(); //100

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

// 函数表达式
baz(); // TypeError: baz is not a function

var baz = function(){
    console.log(200);
}

//相当于

var baz;

baz();

baz = function() {
    console.log(200);
};

控制语句

Js中使用函数级作用域，不存在块级作用域。所有普通块中的声明都会被提升到顶部，所以控制语句对声明的控制就显得完全没有效果

if (false) {
    var a = 10;
}

console.log(a); //undefined

// 相当于

var a;
if (false) {
    a = 10;
}

console.log(a) //undefined

函数优先

提升操作会优先进行函数的声明

函数会首先被提升然后才是变量，重复的变量声明会被忽略，只剩下赋值操作，多个函数声明可以进行覆盖

声明的顺序是这样的：

1. 找到所有的函数声明，初始化函数体，如有同名的函数则会进行覆盖

2. 查找变量声明，初始化为undefined，如果已经存在同名的变量，就什么也不做直接略过

// 1
foo(); //200

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

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

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

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

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

foo(); // "b"

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

但是需要注意这个行为并不可靠，在JavaScript未来的版本中有可能发生改变，因此应该尽可能避免在块内部声明函数。

摘自 https://www.cnblogs.com/Gary-Guoweihan/p/6251870.html 与 你不知道的javascript（上）