js块级作用域输出

Question

var a = 10
{
a = 20
function a(){}
a = 30
}

console.log(a) // 20

为什么输出20而不是输出30

此结果是在谷歌浏览器下运行的

Answer 1

ES5规定：函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。但是，浏览器并没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，但是这是各个浏览器的自主实现，并没有统一的行为约束。

块级作用域中的函数声明类似于var, 即会提升到全局作用域或者函数作用域的头部，同时，函数声明还会提升到当前块级作用域的头部。

https://juejin.cn/post/684490...
https://blog.csdn.net/huangya...

Answer 2

?

Answer 3

var a = 10
{
a = 20 // 自由变量，沿着作用域链查找并修改
function a(){}; // 当前块级作用域变量，没有声明提升
a = 30 // 修改的其实是func a
a() // Uncaught TypeError: a is not a function   
}
console.log(a) // 20

Answer 4

非严格模式下块级作用域在各浏览器中变现并不一致，同样代码在IE里就会打印function a,所以如果你确实想在块级声明函数，最好加上'use strict'
https://developer.mozilla.org...

Answer 5

函数在块级作用域中会提升，而且块作用域中的函数在定义函数代码位置（代码执行到函数代码位置）那里具有类似于let的作用。就是这个类似于let的作用决定着当前函数代码位置下面的变量会不会变成局部变量。

var a = 10
{
// 函数 a 提升上来，修改全局 a 为 function a() {}
a = 20         // 之后全局 a 又被改成 20
function a(){} // 执行到这里，函数会起类似于 let 的作用，let a = function() {}
a = 30         // 这时 a 修改的是 let 定义的局部 a 为 30，（类似于let，并不是真let）
}

console.log(a) // 20，全局 a 上面被改成 20，打印 20