为什么相同的代码在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被添加到当前作用域链中，将scope变量绑定到它。由于您在访问scope之前扩展了对象原型，因此在引用scope（实际引用console.scope时，您会看到操作的结果，这要归功于with语句）。

两行输出的原因很明显：首先，执行console.log，然后将消息打印到控制台上，然后DevTools为您提供表达式console.log的结果 nothing （函数没有返回值）。

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