Ist console.log() asynchron oder synchron?

Question

Ich lese gerade „Async Javascript“ von Trevor Burnham. Das ist bisher ein tolles Buch.

Er spricht davon, dass dieses Snippet und console.log in den Safari- und Chrome-Konsolen „asynchron“ seien. Leider kann ich das nicht reproduzieren. Dies ist der Code:

var obj = {};
console.log(obj);
obj.foo = 'bar';
// mein Ergebnis: Object{};
// Das Buchergebnis: {foo:bar};

Wenn dies asynchron wäre, würde ich erwarten, dass die Ergebnisse so sind, wie sie im Buch stehen. console.log() wird in die Ereigniswarteschlange gestellt, bis der gesamte Code ausgeführt ist, und wird dann mit dem bar-Attribut ausgeführt.

Sieht jedoch so aus, als ob es synchron läuft.

Liege ich falsch, diesen Code auszuführen? Ist console.log tatsächlich asynchron?

Answer 1

这并不是问题的真正答案，但对于偶然发现这篇文章的人来说可能会很方便，而且评论太长了：

window.console.logSync = (...args) => {
  try {
    args = args.map((arg) => JSON.parse(JSON.stringify(arg)));
    console.log(...args);
  } catch (error) {
    console.log('Error trying to console.logSync()', ...args);
  }
};

这将创建 console.log 的伪同步版本，但具有与接受的答案中提到的相同的警告。

由于目前看来大多数浏览器的 console.log 都以某种方式异步，因此您可能希望在某些情况下使用这样的函数。

Answer 2

console.log 没有标准化，因此行为相当未定义，并且可以在开发人员工具的不同版本之间轻松更改。你的书可能已经过时了，我的答案也可能很快就会过时。

对于我们的代码来说，console.log 是否异步没有任何区别，它不提供任何类型的回调等；并且您传递的值始终在您调用该函数时被引用和计算。

我们真的不知道接下来会发生什么（好吧，我们可以，因为 Firebug、Chrome Devtools 和 Opera Dragonfly 都是开源的）。控制台需要将记录的值存储在某处，并将它们显示在屏幕上。渲染肯定会异步发生（受到速率限制更新的限制），未来与控制台中记录的对象的交互也会发生（例如扩展对象属性）。

因此控制台可能会克隆（序列化）您记录的可变对象，或者它将存储对它们的引用。第一个不适用于深/大物体。此外，至少控制台中的初始渲染可能会显示对象的“当前”状态，即记录时的状态 - 在您的示例中您会看到 Object {}。

但是，当您展开对象以进一步检查其属性时，控制台可能只存储对对象及其属性的引用，现在显示它们将显示其当前（已变异）状态。如果单击 +，您应该能够在示例中看到 bar 属性。

这是发布在错误报告中的屏幕截图解释他们的“修复”：

因此，某些值可能会在记录后很久才被引用，并且对这些值的评估相当懒（“在需要时”）。这种差异最著名的例子是在问题Is Chrome's JavaScript console中处理的懒得评估数组？

解决方法是确保始终记录对象的序列化快照，例如通过执行console.log(JSON.stringify(obj))。不过，这仅适用于非圆形和相当小的物体。另请参阅如何更改 Safari 中 console.log 的默认行为？。

更好的解决方案是使用断点进行调试，其中执行完全停止，您可以检查每个点的当前值。仅对可序列化和不可变的数据使用日志记录。