js 函数声明提升和变量提升

1. 函数声明提升

func()
function func () {
}

上例不会报错，正是因为 ‘函数声明提升’，即将函数声明提升（整体）到作用域顶部（注意是函数声明，不包括函数表达式），实际提升后结果同下：

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

2. 变量声明提升（只有var声明的变量才有变量提升，let、const无）

1. console.log(num)
   var num = 10

2. console.log(func)
   var func = function () {
   }

上两例均会打印出 'undefined'，变量声明提升会将变量声明提升到作用域顶部，但变量函数表达式、变量定义都只会提升声明部分，不会提升赋值部分，实际提升后结果如下：

1. var num 
   console.log(num)
   num = 10

2. var func
   console.log(func)
   func = function () {
   }

3. 进阶举例（IIFE、两者优先顺序、局部与全局变量）：

    ①

var num = 1
(function () {
    console.log(num)
    var num = 2
})()

上例将打印出 'undefined'，此处为IIFE（立即调用函数表达式）结合变量提升，IIFE会产生一个局部作用域，该作用域内创建的变量只在该块内有效，外界无法访问，实际提升后结果如下：

var num = 1
(function () {
    var num
    console.log(num)
    num = 2
})()

     ②

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

上例将输出 ‘number’，原因是 函数声明提升优先于变量提升，函数声明被覆盖，实际提升后结果如下：

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

    ③

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()

欢迎关注、点赞