一道 js 脑筋急转弯求解

[cheese]

    {
      function a(){}
      a=1
      function a(){}
    }
    console.log(a,"1");
    {
      function a(){}
      a=1
      
    }
    console.log(a,"2");
    //输出
    //1 '1'
    //ƒ a(){} '2'

为啥第二个块的 a = 1 没有覆盖到全局的 a

倒也不是面试题。就是朋友发群里了，我尝试 debugger 下，发现了一个奇怪的点。
对于普通{}块内定义的元素都是直接进入全局中的，函数类型的会同时提升到全局顶部和块级顶部，题目在第一个块内对 a 赋值的时候，会同时改变块内和全局的变量值。
而奇怪的地方就在于，执行第二个块的 fun a 时，块内，全局的 a 都是同时改变了的。
而执行到第二个块的 a = 1 时，从浏览器 debugger 监控里可以看到。块内的 a 改变了，而全局却没有变化。也就是表现和第一个块是不同的。
题目对于工作肯定是没有什么用，所以我把它成为 js 脑筋急转弯。希望评论里的老哥不要太激动，就是想知道下运行时对这种情况处理机制的原因。

[murmur]

function a(){} 1
function a(){} 2

这是 IE 的结果

所以出题人傻逼，完毕。

[murmur]

对了，刚才的结果也适用于 edge 浏览器，edge 够现代吧，不适用于 chrome
所以这不是出题人傻逼是什么

[abear]

先定义的不管，后定义的招殃

[mxT52CRuqR6o5]

https://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6
你要是在非 es6 环境下跑，可以有更多奇怪的表现

[vanton]

这个题目不成立啦，不同环境不一样的。

[mxT52CRuqR6o5]

"use strict";
let a₀ = undefined;
{
let a₁ = function ( ){ };
a₁ = function ( ){ };
a₀ = a₁;
a₁ = 1;
a₀ = a₁;
}
console.log(a₀, "1");
{
let a₁ = function ( ){ };
a₀ = a₁;
a₁ = 1;
}
console.log(a₀, "2");
大概就是这么个逻辑
也是因为非严格模式下块作用域有非常奇怪的难以理解的表现，所以搞了个严格模式出来

[mxT52CRuqR6o5]

es6 标准浏览器的非严格模式下运行这段代码是有一个固定确定的结果的，就是上面说的那个非常奇怪的难以理解的运行逻辑

[iikebug]

@mxT52CRuqR6o5 严格模式下，上面那段代码都跑不起来吧

[libook]

这个不是脑筋急转弯，这个是作用域提升，声明变量省略的 var 和 funciton 关键字都有作用域提升的特性。

第一个块的执行顺序实际上是先把两个 funciton 提到全局作用域，因为下面 console.log 输出 a ，所以稍后 a 也提到全局作用域，那么 a 的值变化就是先赋值为第一个 function ，再赋值为第二个 function ，最后赋值为 1 ，块下面 console.log 就输出 a 值为 1 。

第二个块里面，同样把 function 提到全局，后续因为此时全局已经有 a 了，后面的 console.log 能找到 a ，所以块内的 a 被认为是局部变量没有被提升作用域，所以块下面的 console.log 输出的是第二个块提升出去的 funciton a 。

换个写法可以帮助你理解这个顺序：

{
console.log(a(),"1");
function a(){return 2}

a=1
function a(){return 3}
}
console.log(a,"4");
{
function a(){return 5}
a=2
console.log(a,"6");
}
console.log(a(),"7");

[mxT52CRuqR6o5]

@iikebug 是的，会有 runtime error

[EPr2hh6LADQWqRVH]

我不知道，我只知道谁敢拿这个给我看我当场让他滚蛋

[66beta]

{
console.log(1, window.a, a);
function a() {}
console.log(2, window.a, a);
a = 1;
console.log(3, window.a, a);
function a() {}
console.log(4, window.a, a);
}
console.log('========', a, "1");
{
console.log(5, window.a, a);
function a() {}
console.log(6, window.a, a);
a = 1;
console.log(7, window.a, a);
}
console.log('========', a, "2");

1 、函数声明提升到块级顶部
2 、块内访问 a 是块内的，外面访问的是全局的

[Biwood]

脑筋急转弯可还行

[cheese]

@murmur #2 edge 及 chrome 我都复现了，chrome 内核下的非严格模式表现应该是一致的。

[iikebug]

不能跑严格模式的都叫他滚。真就面试八股文？

[murmur]

@cheese edge 非 chrome 内核是我的结果，直接命令行打出来啊，要是别人出题有严格模式你跟我们说没严格模式，那是你的问题

[cheese]

@mxT52CRuqR6o5 #6 我自己的推测也是类似这个逻辑，但是我没法理解为什么。第二个块到 a₁ = 1;就停止了，而没有 a₀ = a₁; 这个步骤

[churchill]

https://tc39.es/ecma262/#sec-block-level-function-declarations-web-legacy-compatibility-semantics

> Prior to ECMAScript 2015, the ECMAScript specification did not define the occurrence of a FunctionDeclaration as an element of a Block statement's StatementList. However, support for that form of FunctionDeclaration was an allowable extension and most browser-hosted ECMAScript implementations permitted them. Unfortunately, the semantics of such declarations differ among those implementations.

[churchill]

js 版的 ub 而已，:)

[mxT52CRuqR6o5]

@cheese

https://imgur.com/a/GR3hFcE

[murmur]

你们吐槽谭浩强的勇气呢，怎么现在开始讨论这种恶心人的东西呢，生产写这种东西有几次你被打死几次

[mxT52CRuqR6o5]

@cheese
第一个块 a₁ = 1 后面有个 a₀ = a₁是因为你原代码第一个块的 a=1 后面有一句 function a(){}啊
你仔细读读我发的那个 sof 的链接就都明白了

[cheese]

@mxT52CRuqR6o5 #22 好的，感谢

[liubaicai]

有什么意义啊，谁生产会写这种代码？面试出这种题的也是 zz 。

[iwasthere]

因为如果变量名称跟已经声明的函数相同，则变量声明不会干扰已经存在的这类属性。

[enchilada2020]

我承认我不会 JS

[litel]

大家好像都没解释题主的“第二个块的 a=1 为什么没有提升至全局”
我也搞不清楚这里……

[litel]

@mxT52CRuqR6o5 那为什么第二个块的 a = 1 不会抛出到全局作用域呢？
就算是
b = 1
{ b = 2 }
b
// => 2
块作用域的 b 也会到全局，为什么最后不加同名 funtion 就不会到全局呢？
这里比较疑惑

[mxT52CRuqR6o5]

@litel
/t/825334#r_11227399
作用域提升相关的东西我不知道他说的对不对，但他所描述的代码执行过程完全就是错的
我没有说过作用域提升相关的东西，你问我怎么个提升的我也不清楚

[mxT52CRuqR6o5]

@litel
你所说的东西我尝试解释一下（一下内容为马后炮，根据结果猜测运行原理）
es6 非严格模式在块内声明 function 会同时在全局和块内生命同名变量，所以在块内对同名变量赋值只会影响块内
而
b = 1
{ b = 2 }
只有全局的 b ，没有块内的 b ，块内的赋值语句就直接修改了全局的 b

[wangtian2020]

有 globalThis 我就是不用
欸我就是玩儿

[wangtian2020]

https://zh.javascript.info/ninja-code

[qeqv]

@wangtian2020 学了这个会不会被同事打死