JavaScript 声明提升

函数声明提升

假如有函数声明如下：

func()  //调用语句在声明之前
function func () {
}

上例不会报错，正是因为 ‘函数声明提升’，即将函数声明提升到作用域顶部（注意是函数声明，不包括函数表达式），相当于：

// 函数声明提升
function func () {
}
func()

但如果是函数表达式：

func()  //调用语句在声明之前
var func = function() {
}

这会报错，相当于 ：

var func;
func() 
//只是提升了声明，但是赋值语句没有
func = function() {
}

变量声明提升

只有 var 声明的变量才有变量提升，let、const 没有，变量赋值也没有提升。函数声明提升优先于变量提升，函数声明会被变量赋值影响，但不会被变量声明影响。

console.log(num)
var num = 10
 
console.log(func)
var func = function () {
}

上两例均会打印出 'undefined'，变量声明提升会将变量声明提升到作用域顶部，但只会提升声明部分，不会提升赋值部分。 

注意，因为 javascript 没有块级作用域这个概念，所以声明提升会放到全局域或者当前函数作用域的顶部。

示例

示例一

var foo = function(){
    console.log(123)
}

function foo(){
    console.log(456)
}
foo() 

第一眼可能会以为是打印 456，但是声明提升之后是这样的：

var foo;  // 变量声明提升
function foo(){  // 函数声明提升
    console.log(456)
}
foo = function(){  //  变量赋值依然保留在原来位置
    console.log(123)
}
foo() 

所以应该输出 123。 

示例二

var func = 10
console.log(func && typeof(func))
function func () {
}
 
-----
 
console.log(func && typeof(func))
function func () {
}
var func = 10

上两例将分别输出 ‘number’、'function'，原因是 函数声明提升优先于变量提升，函数声明会被变量赋值影响，但不会被变量声明影响，实际提升后结果如下：

function func () {
}
var func = 10
console.log(func && typeof(func))
 
-----
 
function func () {
}
var func
console.log(func && typeof(func))
func = 10

示例三

num = 10
function func () {
    window.num = 5
    console.log(num)
    var num
    console.log(window.num)
}
func()

 上例将会分别打印出 'undefined'、'5'，第一处为局部变量，第二处为全局变量，实际提升后结果如下：

function func () {
    var num
    window.num = 5
    console.log(num)
    console.log(window.num)
}
var num
num = 10
func()

参考

参考博客：https://www.cnblogs.com/jf-67/p/8036966.html

参考博客：https://blog.csdn.net/qq_33576343/article/details/81458133