javascript控制台何时计算打印对象的内容?

Question

我发现在嵌套对象上使用console.log时，在执行后续操作之后，结果似乎打印出来，但只有在记录深度至少为2的对象时。

考虑下面的例子:

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

大多数浏览器只在您展开对象时获取记录到控制台的对象的属性—并且通常在对象引用旁边的工具提示中注意到这一点。

它们也倾向于只在第一次扩展对象并从那时起缓存，因此控制台不是检查对象的可靠方法。

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