原型值未显示在开发人员工具栏中

Question

如果你在 stackoverflow 的代码 sn-p 中运行它，它会同时显示名字和姓氏，但在我的网站上，当使用 Chrome 的开发人员工具栏或 Firefox 时，它只显示 firstName 属性。

    function Person(){
      this.firstName = 'first name goes here';
    }

    var person = new Person();
    Person.prototype.lastName = 'last name goes here';
    console.log(person);

我还怀疑使用“new”关键字不再是最佳做法，但我不记得我可能在哪里读到过。

Answer 1

确实，不同的工具会给出不同的输出。这没什么奇怪的。 SO sn-p 工具覆盖了console.log 的默认行为，创建了一个虚拟控制台。

堆栈片段虚拟控制台的背景

Stack Snippet 启动后，这成为用户社区的变更请求之一：Add a console to Stack Snippets，最终实现：Stack Snippets Upgrade: Virtual Console。

这些主题中关于 meta 的讨论说明了为什么这是一个理想的功能，例如：

• 因为我们还没有打开控制台，所以要意识到没有输出是很多工作。
• 你看到人们使用document.write，这是一个糟糕的主意。
• alert() 非常具有侵入性。

这个实现与console.log 在浏览器控制台中产生的完全不同，它本身是模棱两可的：不同的浏览器有不同的控制台行为：对于控制台应该输出什么没有标准。例如，在执行 console.log(new Set([1]).entries()); 时，请注意 FireFox 和 Chrome 之间的许多区别

区别

Stack Snippets 虚拟控制台显示所有可枚举的属性，无论它们是否被继承。这大致对应于：

for (prop in person) {
    console.log(prop, person[prop]);
}

浏览器中的控制台具有更全面的呈现。除了可折叠控件和异步检索之外，它们还可视化不可迭代的属性，例如__proto__。然后在扩展 __proto__ 节点时列出继承的属性。所有这些功能都比轻量级 Stack Snippet 解决方案先进得多。

如果您想知道虚拟控制台输出中包含继承的可枚举属性的确切原因，那么这个问题更适合meta，设计师（@canon 和其他人）可以在其中评论他们的自己做决定。

使用new?

关于new 的使用是否是最佳实践：这主要是基于意见。你可以看看JavaScript: The Good Parts - How to not use new at all：你可以看到投票最多的答案是如何在两者之间摇摆不定的。