JS局部与全局作用域疑问：为何代码输出为1而非20？

示例代码 #

var a = 1

function b() {
  a = 20
  return

  function a() {}
}
b()
console.log(a)

问题描述 #

执行上述JavaScript代码后，控制台输出结果为1，而非预期的20。原以为函数b的执行上下文会访问全局执行上下文（GEC）中的变量a并修改其值，想请教该现象的原因。

核心原因：函数声明的变量提升 #

这是JavaScript**变量提升（Hoisting）**特性导致的，而且函数声明的提升优先级高于变量声明，具体拆解如下：

• 当函数b被调用时，JS引擎会先处理当前作用域内的所有声明：把return后面的function a(){}这个函数声明，提升到b函数作用域的最顶端。也就是说，函数b的实际执行逻辑相当于：

  function b() {
    // 函数声明被提升到这里
    function a() {}
    a = 20
    return
  }
  

• 此时b函数内部有了自己的局部变量a，所以执行a = 20时，修改的是这个局部的a，和全局作用域的a没有任何关系。
• 紧接着return语句执行，函数b终止，局部的a变量被销毁，不会对全局变量造成影响。
• 最后console.log(a)访问的是全局作用域中最初声明的a，值自然还是1。

内容的提问来源于stack exchange，提问作者Shivansh Raghav