为什么 Chrome 调试器认为封闭的局部变量是未定义的？

Question

使用此代码：

function baz() {
  var x = "foo";

  function bar() {
    debugger;
  };
  bar();
}
baz();

我得到了这个意想不到的结果：

当我更改代码时：

function baz() {
  var x = "foo";

  function bar() {
    x;
    debugger;
  };
  bar();
}

我得到了预期的结果：

另外，如果在内部函数中有任何对eval 的调用，我可以随意访问我的变量（无论我传递给eval 的内容是什么）。

同时，Firefox 开发工具在这两种情况下都提供了预期的行为。

调试器不如 Firefox 方便的 Chrome 是怎么回事？我已经观察到这种行为一段时间了，直到并包括版本 41.0.2272.43 beta（64 位）。

是不是 Chrome 的 javascript 引擎会尽可能“扁平化”这些功能？

有趣的是，如果我在内部函数中添加 引用的第二个变量，x 变量仍然未定义。

我知道在使用交互式调试器时经常会出现范围和变量定义的怪癖，但在我看来，根据语言规范，应该有一个“最佳”解决方案来解决这些怪癖。所以我很好奇这是否是由于 Chrome 比 Firefox 优化得更远。还有这些优化是否可以在开发过程中轻松禁用（也许应该在开发工具打开时禁用它们？）。

另外，我可以使用断点以及debugger 语句来重现这一点。

Answer 1

我找到了一个 v8 issue report，这正是您所要求的。

现在，总结一下该问题报告中所说的内容... v8 可以将本地函数存储在堆栈上或的“上下文”对象中，该对象位于堆上.只要函数不包含任何引用它们的内部函数，它将在堆栈上分配局部变量。 这是一种优化。如果 any 内部函数引用了一个局部变量，这个变量将被放入一个上下文对象中（即在堆上而不是在堆栈上）。 eval 的情况比较特殊：如果它完全被内部函数调用，所有局部变量都放在上下文对象中。

上下文对象的原因是，通常您可以从外部函数返回一个内部函数，然后外部函数运行时存在的堆栈将不再可用。因此，内部函数访问的任何内容都必须在外部函数中存在并存在于堆上而不是堆栈上。

调试器无法检查堆栈上的那些变量。关于调试中遇到的问题，一位项目成员says：

我能想到的唯一解决方案是，只要打开 devtools，我们就会取消所有代码并使用强制上下文分配重新编译。但是，如果启用 devtools，这将大大降低性能。

这是一个“如果任何内部函数引用变量，则将其放入上下文对象”的示例。如果您运行它，您将能够在debugger 语句中访问x，即使x 仅用于foo 函数，从未调用过！

function baz() {
  var x = "x value";
  var z = "z value";

  function foo () {
    console.log(x);
  }

  function bar() {
    debugger;
  };

  bar();
}
baz();

Answer 2

就像@Louis 所说的那样，它是由 v8 优化引起的。 您可以遍历调用堆栈到该变量可见的帧：

或将debugger替换为

eval('debugger');

eval 将取消当前块

Answer 3

我在 nodejs 中也注意到了这一点。我相信（我承认这只是一个猜测）当代码编译时，如果x 没有出现在bar 中，它不会使x 在bar 的范围内可用。这可能会使其效率更高一些；问题是有人忘记（或不在乎）即使bar 中没有x，您可能决定运行调试器，因此仍然需要从bar 内部访问x。

Answer 4

哇，真有趣！

正如其他人所提到的，这似乎与scope 有关，但更具体地说，与debugger scope 有关。在开发人员工具中评估注入的脚本时，它似乎确定了一个ScopeChain，这会导致一些古怪（因为它绑定到检查器/调试器范围）。您发布的内容的一个变体是这样的：

（编辑 - 实际上，您在原始问题中提到了这一点，哎呀，我的错！）

function foo() {
  var x = "bat";
  var y = "man";

  function bar() {
    console.log(x); // logs "bat"

    debugger; // Attempting to access "y" throws the following
              // Uncaught ReferenceError: y is not defined
              // However, x is available in the scopeChain. Weird!
  }
  bar();
}
foo();

对于雄心勃勃和/或好奇的人，请查看（呵呵）源代码以查看发生了什么：

https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/inspector https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/debugger

Answer 5

我似乎可以访问_this。 this 在我的 chrome 检查器中未定义，_this 似乎引用了适当的上下文（并且可能是在堆栈跟踪检查器中用作 > local > this 的内容？）。

Answer 6

我怀疑这与变量和函数提升有关。 JavaScript 将所有变量和函数声明带到定义它们的函数的顶部。更多信息在这里：http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

我敢打赌，Chrome 调用断点时变量对范围不可用，因为函数中没有其他内容。这似乎有效：

function baz() {
  var x = "foo";

  function bar() {
    console.log(x); 
    debugger;
  };
  bar();
}

这样：

function baz() {
  var x = "foo";

  function bar() {
    debugger;
    console.log(x);     
  };
  bar();
}

希望这个和/或上面的链接有所帮助。这些是我最喜欢的 SO 问题，顺便说一句:)