JavaScript 让 Firefox 开发者工具调试视图中的 Block-Scope答案

【问题标题】：JavaScript let Block-Scope in Firefox Developer Tools Debug ViewJavaScript 让 Firefox 开发者工具调试视图中的 Block-Scope
【发布时间】：2017-01-02 12:34:32
【问题描述】：

我正在研究 JavaScript 中 let block scope 的工作原理，特别是浏览器的调试视图如何显示信息

在for 循环中使用let 会创建一个块范围，回调function timeoutHandler() 可以访问它，这一切都很好

在 Chrome 开发工具中，[[Scopes]] 如下所示：

在 Firefox 开发者工具 中，列出了一个额外的块作用域，其属性为 timeoutHandler:timeoutHandler()。我只希望看到 j:1 的块作用域

这个额外的块指的是什么？

只是想知道，因为我期望的词法范围显示在 Chrome 调试中，但在 Firefox 调试中却没有预期

【问题讨论】：

我绝不是 js 方面的专家，但正如我所见，它是定义 let j 的块 - 那将是 for {...} 块
@birdspider 是的，但是 Firefox 视图中有 2 个块。这是我要问的另一个问题
hm，唯一想到的是 JS 文件/sn-p 拥有自己的总体块（最顶层/根块？） - FF 显示 - 但我没有找到任何确凿的事实/标准 - 我检查了here，但很快就迷路了

标签： javascript

【解决方案1】：

这个带有timeoutHandler 的额外块是指什么？

似乎显示immutable binding that is wrapped around your named function expression。函数表达式实际上被解释为好像您的代码是

'use strict';

for (var i = 1; i <= 2; i++) {
    let j = i;
    setTimeout( {
        const timeoutHandler = function() {
            console.log(j);
            debugger;
        };
        timeoutHandler
    }, 1000);
}

（好吧，调用表达式中的这个块作用域显然在语法上无效，但希望你明白意思）

【讨论】：