为什么相同的代码在jsfiddle中给出不同的结果

Question

window.scope = 'global'
Object.prototype.scope = 'object proto'

console.log(scope);

我正在编写上面的简单脚本来测试范围,但我在chrome dev工具和jsfiddle中得到了不同的结果.

• chrome:'object proto';
• jsfiddle:'global';

为什么？

Answer 1

如果我将代码粘贴到新的 HTML 文档中并在 Chrome 中查看，则global在加载页面时我会打印到控制台。

当您将代码直接粘贴到 DevTools 控制台时，您会得到：

object proto
undefined

这是因为 DevTools 实际评估的是以下脚本（在我的例子中）：

with ((console && console._commandLineAPI) || {}) {
  window.scope = 'global'
  Object.prototype.scope = 'object proto'

  console.log(scope);
}

因此，通过使用该with语句，将被添加到将变量绑定console到它的当前作用域链中。由于您在访问 之前扩展了对象原型，因此您在引用时会看到操作的结果（实际上是指，感谢语句）。scopescopescopeconsole.scopewith

出现两行输出的原因很明显：首先，console.log执行，因此消息被打印到控制台上，然后 DevTools 给出表达式的结果，console.log但什么也没有（该函数没有返回值） ）。

希望这能为您澄清一些事情。