为什么开发工具不理解闭包？

Question

可以有人给我解释一下为什么Chrome的Dev Tools (可能其他浏览器也是这样的，我没有去检查)看不到沿着链条的变量吗？

所以如果我有像这样的东西：

function wholeKit(kaboodle) {
    kaboodle.forEach((k)=> {
      k.parts.map((p)=> {
         // console.log(kaboodle, k)    
        debugger;   
      })   
    })  
}

在断点处，Chrome 将会看到 p 的值，但不会看到 kaboodle 和 k。它们将变成 undefined。但是如果我取消注释断点上面的那一行，这些变量神奇地就不再是 undefined 了。为什么呢？ 对于那些无法理解 ES6 的人来说，这是 jsbin。 更新：显然这就是浏览器垃圾回收器的工��方式，那些未被使用的变量被清除了。现在我很好奇，是否有一种方法可以调整垃圾回收器，以便在 DevTools 打开时使用？

- iLemming

---

听起来像是优化掉了未使用的变量，与垃圾回收器无关。垃圾回收器不会导致"未定义引用"错误，我确信它实际上并不太智能，在JavaScript中很容易出现内存泄漏问题。 - hugomg

无论如何，我认为你应该检查一下在Chrome中是否已经将其作为错误提交。如果您在控制台中使用kaboodle，则它超出了范围，但是如果您查看“调用堆栈”窗格，则仍然可以找到它。 - hugomg

Answer 1

您的代码存在语法错误。forEach和map缺少一个闭合括号，而Chrome不支持ES6箭头语法用于lambda表达式。

当我将回调函数更改为常规函数并添加缺失的括号后，一切都正常工作了。

function wholeKit(kaboodle) {
    kaboodle.forEach(function(k){
        k.parts.map(function(p){
            console.log(kaboodle, k)    
            debugger;   
        });
    });
}

- hugomg

---

在盲目地发布答案之前，您应该至少阅读问题。function wholeKit(kaboodle) { kaboodle.forEach(function(k){ k.parts.map(function(p){ debugger; }); }); } wholeKit([ {parts:['a','b','c'] } ])运行此代码，您会发现k和kaboodle均未定义。 - iLemming

在盲目评论答案之前，你至少应该先阅读它。如果你修复了这个用户提到的闭包问题，你会发现 k 和 kaboodle 不再是未定义的。 - user13286

你明白为什么我的帖子中console.log被注释掉了吗？ - iLemming

我并不是盲目回答，我实际上进行了测试。但现在你给了另一个例子，我设法重现了它。是的，这非常奇怪。对我有效的一个解决方法是在“debugger”旁边添加一个eval("")语句，以禁用JS引擎可能正在执行的更高级优化。 - hugomg