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

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

我也怀疑使用＆＃34; new＆＃34;关键字被认为不再是最佳做法，但我无法回忆起我可能已经阅读过的内容。

Answer 1

实际上，不同的工具会提供不同的输出。没什么好奇的。 SO片段工具会覆盖console.log的默认行为，从而创建虚拟控制台。

Stack Snippet虚拟控制台的背景

启动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：您可以看到两者之间最多投票的答案如何摆动。