Javascript中的变量提升和函数提升

Javascript是一门弱类型语言，它具有强类型语言所没有的一些特性，比如本文即将要讲到的变量提升和函数提升。

为了方便讲解变量提升和函数提升，我们首先来看下面两段代码

代码段1

代码段2

如果你一眼就能看出两个代码段的输出结果，说明你对变量提升有一定的了解。如果不知道呢，那么需要认真看下这篇文章。

上述代码段1输出‘Hello World’，代码段2输出‘undefined’。

变量提升

上述代码段2中就涉及到了变量提升，变量提升是将变量提升到函数top的地方，但是变量提升只会提升变量的声明，并不会提升赋值语句。

接下来我们分析下上述两段代码的原理

• 代码段1

在全局对象window上定义一个变量v，并赋值为‘Hello World’，然后有一个立即执行函数，这个立即执行函数作用域为window，在函数内部引用变量v，会顺着作用域寻找，最终会在window上找到这个变量v，因此输出‘Hello World’。

• 代码段2

在代码段2中出现了变量提升，在立即执行函数内部，变量v的定义会提前到函数顶部，相当于以下代码

变量提升

同代码段1的分析，在window上定义一个变量v，值为‘Hello World’，而且在立即执行函数内部同样定义了一个变量v，但是赋值语句并未提升，因此v为undefined。在alert时，会优先在函数内部作用域寻找变量，而内部已经定义，因此直接输出‘undefined’

我们再来看下面这段代码

代码段3

很多人看到代码3，可能很快会说出输出‘undefined’，但是结果输出的却是‘kingx’。这是因为变量提升是存在于函数作用域中的，并不是在块级作用域中。而在上述代码段中，并没有出现function，并不会出现变量提升，因此结果会输出‘kingx’。

函数提升

在Javascript中，有两种定义函数的方式，一种是函数表达式

函数表达式

还有一种是函数声明式

函数声明式

需要注意的是，只有在函数声明式中才能变量提升，而函数表达式不能变量提升。我们看下面的例子

函数提升代码

在代码段4中，可以正常输出‘我来自 foo’，而在代码段5中却会报错‘foo is not a function’，因为变量提升只会在函数表达式中存在，而在函数声明式中不存在

总结

今天主要讲了一下Javascript中的变量提升以及函数提升，内容比较基础，希望对大家有所帮助

如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。