为什么console.log(）和console.dir(）记录的对象属性没有'还不存在

Why are console.log() and console.dir() logging Object properties that don't exist yet?

本文关键字：console 不存在 log dir 记录 对象 为什么 属性      更新时间：2023-09-26

测试以下内容：

var o = {};
console.log(o);
o.prop = 'value';

在Firefox 42.0中，如果你点击控制台中显示的对象，你应该会感到震惊。在Firebug 2.0.13以及常规控制台中进行了测试。

更令人震惊的是，测试一下：

var o = {prop:'test'};
console.log(o);
o.prop = 'value';

使用上面的代码，我无法在最新的Microsoft Edge中重现这个问题，但我能够用更广泛的代码产生同样的问题。

使用一个更大的面向对象JavaScript程序（使用Construtors），我还用console.dir()进行了测试，并在Microsoft Edge和Firefox中遇到了同样的提升问题。

这是个虫子吗？

这不是一个bug，尽管它可能被认为是非直观的。当你检查一个记录的对象时，你检查的是当前存在的，而不是记录时的状态。要保持丰富的检查和忽略未来的修改，你必须记录对象的深度副本，这并不容易。

在这个例子中，一个快速的（可枚举的自己的属性只进入一个新的Object）浅拷贝可以工作，不过：

function copyObject(obj) {
    var result = {};
    Object.keys(obj).forEach(function (key) {
        result[key] = obj[key];
    });
    return result;
}
var o = {};
console.log(o);
console.log(copyObject(o));
o.prop = 'value';

只是一个注释：

var o = {};
console.log('logged' + o);
o.prop = 'value';

结果：

logged Object {}
"value"

那么，你从哪里看到它的日志"值"呢？

必须混淆console.log()和console.dir()函数。

console.log(o)打印对象引用。因此，当你在控制台中展开它时，你会看到迄今为止在上完成的所有更新

console.dir(o)就像当时引用的快照。这样，您将无法在控制台中看到稍后完成的更新

相关文章：