轻松学习 javascript——第 5 部分：简化函数提升-mile米乐体育
本文由码农网 – 小峰原创翻译，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！
为了理解函数提升，让我们从以下代码开启我们的学习之旅：
console.log(foo); var foo = 9;
应该输出什么呢？
在任何其他编程语言中，这里的输出将会是reference error。但是，在javascript中，你将得到undefined作为输出。为什么？因为javascript会提升变量到执行上下文的顶部。执行上下文可以是声明变量的函数，也可以是声明变量的javascript文件。所以，让我们用函数重写上面的代码片段：
function abc() { console.log(foo); var foo = 9; } abc(); 这里，变量“foo”提升到函数abc执行上下文的顶部；这意味着你可以在声明之前访问foo。简而言之，无论何时你声明一个变量，javascript解释器都可以将其分成两个语句：
- 声明一个变量。
- 赋值。
变量的声明位于执行上下文的顶部，而赋值发生在创建变量的位置。所以上面的代码片段被分解成两个语句，如下图所示：
变量foo被提升到函数abc的执行上下文的顶部，因此当你在声明之前使用它时，你会得到“undefined”作为输出。
请记住，使用let语句声明的变量不会被提升到执行上下文的顶部。
现在你知道javascript中的变量是如何被提升的了，接下来让我们来探讨javascript中的函数提升。在javascript中，可以通过两种方式来创建函数：
- 作为声明而创建的函数。
- 作为表达式而创建的函数。
作为声明或语句创建的函数作为一个整体提升到执行上下文的顶部。但是，作为表达式创建的函数会像变量一样提升。
为了说明这一点，让我们创建一个作为语句的函数：
foo(); function foo() { console.log("hello"); } 在上面的代码中，如果你在函数创建之前使用函数，那么你会得到hello的输出。发生这种情况的原因是，作为语句创建的函数会当作一个整体被提升到执行上下文的顶部。
无论何时创建作为语句的函数，都可以在函数创建之前使用该函数。因此，如果你在第5行创建作为语句的函数，那么你可以在第1-4行中使用该函数，因为函数语句会随函数主体一起提升到执行上下文的顶部。
函数语句会随函数主体一起提升到执行上下文的顶部。
函数表达式会像一个变量一样被提升到执行上下文的顶部。请看下面的代码：
foo(); var foo = function () { console.log("hello"); } 你正在代码中创建函数foo作为表达式，所以javascript会像普通变量一样提升它。 javascript会像下图所示那样处理上面的代码：
正如你在上面的图片中看到的那样，foo在执行上下文的顶部被声明为一个变量，然而，在变量foo中的函数赋值发生在第6行，也就是创建作为表达式函数的地方。所以，当你尝试执行上面的代码时，你会得到错误undefined is not a function，如下图所示：
因此，你不能在函数表达式被创建之前使用函数表达式，因为只有函数声明会提升到顶部。
综上所述：
- 函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。
- 函数表达式在创建之前不能使用。只有声明部分会被提升，赋值发生在创建函数的那一行。
在“轻松学习javascript”系列的下一篇文章中，我们将介绍javascript中更为重要的概念，敬请期待。
系列目录
轻松学习 javascript——第 1 部分：了解 let 语句
轻松学习 javascript——第 2 部分：函数中的 rest 参数
轻松学习 javascript——第 3 部分：函数中的默认参数
轻松学习 javascript——第 4 部分：函数中的 arguments 对象
轻松学习 javascript——第 5 部分：简化函数提升
轻松学习 javascript——第 6 部分：javascript 箭头函数
轻松学习 javascript——第 7 部分：对象属性描述符
轻松学习 javascript——第 8 部分：javascript 中的类
译文链接：http://www.codeceo.com/article/easy-javascript-05-hoisting.html 英文原文：easy javascript part 5: simplifying function hoisting 翻译作者：码农网 – 小峰 [ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]