最近刷面试题, 经常提到变量提升, 所以今天就这个主题整理一下思绪
注: 本文所有内容基于"严格模式"(“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