JavaScript控制台何时会评估打印对象的内容？

Question

我发现在嵌套对象上使用console.log时，结果似乎在执行了后续操作之后才打印出来，但是仅当记录深度至少为两个的对象时才显示。

考虑以下示例：

function addNumbers(data) {
    data.container.firstNumber++ 
    console.log(data); // 3
    data.container.firstNumber++
}

var numberData = {
    container : {
       "firstNumber": 1
    }
};

console.log(numberData); // 3
addNumbers(numberData);

我假设在此示例中，我看到numberData的值先打印为1，然后是2。实际上，值是3、3。我首先想到的是，这里可能存在一些竞争条件，在这些条件下，值会在日志操作完成之前发生变化，但是如果您向该对象添加更多特定的引用，则将获得与console.log在代码中的位置相匹配的值，如下所示：

function addNumbers(data) {
    data.container.firstNumber++ 
    console.log(data.container); // 2
    data.container.firstNumber++
}

var numberData = {
    container : {
       "firstNumber": 1
    }
};

console.log(numberData.container); // 1
addNumbers(numberData);

为什么在第一个示例中变量不求值相对于console.log的位置，而在第二个示例中求值呢？

相关小提琴

Answer 1

大多数浏览器仅在扩展对象时才获取登录到控制台的对象的属性-并经常在对象引用旁边的工具提示中对此进行注释。

它们还倾向于仅在第一次时扩展对象并从那时开始进行缓存，因此控制台不是检查对象的可靠方法。

为了解决这个问题，浏览器提供了一个监视面板，该面板将更频繁地更新，并且可以与断点或步进一起使用，以反复获取对象的当前状态。