ES 基础 —— 声明提升

published

概念

声明提升（Declaration Hoisting）指「变量声明和函数声明会提升到其作用域的顶部的行为」。

ECMAScript 中会被提升的声明有：

  • 变量声明（VariableDeclaration）：
    • var 变量声明
    • let 变量声明（由于 TDZ，声明提升不会造成影响）
    • const 变量声明（由于 TDZ，声明提升不会造成影响）
  • 函数声明（Function Declaration）：
    • function 函数声明

原理

声明提升与执行上下文中的 VO 相关。

例 1

console.log(typeof foo)
console.log(foo())
console.log(typeof bar)

var foo = 'hello'

var bar = function() {
  return 'world'
}

function foo() {
  return 'hello'
}

// 输出：
// function
// hello
// undefined

声明提升顺序：

  1. var foo
  2. var bar
  3. function foo() 覆盖了最初的 var foo

例 2

var a = 2

foo()               // works because `foo()` declaration is "hoisted"

function foo() {
    a = 3
    console.log(a)  // 3
    var a           // declaration is "hoisted" to the top of `foo()`
}

console.log(a)     // 2

// 输出：
// 3
// 2

声明提升顺序：

  1. 最外层的 var a
  2. function foo()
  3. 调用 foo() 时，foo 内部的 var a