JS的 if 中的函数声明提升

问题

可以先看看下面的例子,

console.log(a)
if (true) {
  a = 1
  function a () {}
  a = 5
  console.log(a)
}
console.log(a)

在开发者工具里可以看到打印出来的值为 undefined 5 1

可以看到, 给a赋值的5, 并没有赋值到全局变量a上

解决

先看看MDN里的说明

从ES6开始 在严格模式下，块里的函数作用域为这个块。ES6之前不建议块级函数在严格模式下使用. 在ES6非严格模式下, 块中函数声明会出现提升, 所以最好使用函数表达式来定义函数

走走流程看看到底发生了啥

我们可以先把, function a () {}注释掉, 可以看到报错了, Uncaught ReferenceError: a is not defined, 所以if里的函数声明确实存在变量提升

然后, 我们可以打点调试一下 在if 中的a=1语句之前, 我们可以看到函数声明已经提升了, 此时if作用域里a为函数

而全局的a还是undefined

给a=1后, 可以看到, 全局的a依然是undefined, 而块级作用域里, a的值为1

在运行到 function a () {} 后, 我们可以看到, 块级作用域的a的值会赋值给全局作用域的a

随后运行a=5, 则只是在块级作用域里的赋值, 不会对全局作用域的a值进行修改

当然, 如果使用函数表达式来声明函数的话, 可以避免

var a
if (true) {
  console.log(a, window.a)
  a = 1
  a = function () {}
  a = 5
  console.log(a)
}
console.log(a)