变量提升, 函数提升之我见

最近刷面试题, 经常提到变量提升, 所以今天就这个主题整理一下思绪
注: 本文所有内容基于"严格模式"(“use strict”)

---

变量提升

console.log(a) // undefined
var a = 1

代码上先输出, 后声明, 应该输出 “a is not defined”

但实际上输出 a 时, a 没有报 “a is not defined”
说明 a 已经被声明, 未被赋值
这种声明位置被提升到作用域最高的现象, 就是所谓的变量提升

同时还告诉我们一个重要信息
声明 和 赋值 可以分开执行

---

函数提升

都知道函数有两种写法

// FN 函数声明
function NAME() { }

// NF 函数表达式
var NAME = function () { }

通常情况这两写法是等效的, 但在提升的问题上, 两者有点微妙的差异
本文根据 NAME 的先后, 暂把两种方法分别简称为 FN(函数声明) 和 NF(函数表达式)

console.log(NAME) // ƒ NAME() { }
function NAME() { }

/* 区分两段代码 */

console.log(NAME) // undefined
var NAME = function () { }

很奇妙的现象, 没有报 “NAME is not defined” 说明两者的变量都提升了, 与常量的提升无异

函数表达式(NF) 输出 undefined, 这就对应了上面的结论"声明 和 赋值 可以分开执行"
函数声明(FN) 能输出对应函数, 说明声明提升时, 赋值也一起被提升了

我们可以理解为: 函数声明(FN) 写法赋值随声明一起提升; 函数表达式(NF) 写法赋值在原地执行
这就是 函数声明(FN) 与 函数表达式(NF) 的区别所在

---

变量提升混搭函数提升

记住两点

• 声明 和 赋值 可以分开执行
• 函数声明(FN) 写法赋值随声明一起提升

再把问题拆开来分析, 其实并不复杂
来看几个例子

例1

var fun2 = 3
function fun2() { console.log(fun2) }

console.log(fun2) // 3
/* 解析成 */
var fun2
function fun2() { console.log(fun2) }
	// 以下正文
fun2 = 3

console.log(fun2) // 3

例2

var fun2 = 3
var fun2 = function () { }

console.log(fun2) // ƒ () { }
/* 解析成 */
var fun2
	// 以下正文
fun2 = 3
fun2 = function () { }

console.log(fun2) // ƒ () { }

例3

console.log(a)
console.log(foo())
var a = 1
function foo() {
	return 2
}
/* 解析成 */
var a
function foo() {
	return 2
}
	// 以下正文
console.log(a)
console.log(foo())
a = 1

---

结论

• 变量声明位置被提升到作用域最高的现象, 就是"变量提升"
• 声明 和 赋值 可以分开执行
• 函数声明(FN) 写法赋值随声明一起提升; 函数表达式(NF) 写法赋值在原地执行

end