是否在同一对象中同时存在两个同名变量？

我正在尽我最大的努力来理解Java脚本。这是一个在Chrome控制台上的简单实验，它让我非常困惑：

var foo=function(){this.p=1;}
foo.prototype.p=2;
var bar=new foo();
//foo{p:1,p:2} <- this is the output of Chrome console, from the last command above

Chrome的输出让我感到困惑。似乎BAR是一个有两个参数的对象，p：1和p：2。这是否意味着BAR有2个p？这背后的原因是什么？

---

解决方案

Chrome DevTool控制台的内联(非扩展)对象表示当前不显示自身属性和继承的原型属性之间的任何差异。

现在让我们将所发生的事情分成更小的步骤。

new foo()创建一个新对象，其内部proto属性指向foo.prototype。这意味着该对象可以访问foo.prototype中定义的所有属性。名为prototype chain。

现在，当您在对象中设置相同名称的属性时，它会以相同的名称"隐藏"原型的属性，使后者无法通过常规属性访问(请参阅@loxxy的答案，使用Object.getPrototypeOf(obj)来访问隐藏的原型属性)。

将函数添加到对象或其原型后，控制台允许您显示扩展的对象表示，它确实不同于原型属性。在下一个示例中，我向原型添加了一个q方法以允许此行为。从原型继承的属性显示在对象的proto内部属性中：

---

如果您只想在构造函数的原型中拥有实例化对象的数量，则可以使用：

var foo = function() {
    Object.getPrototypeOf(this).p++;
}
foo.prototype.p = 0;

console.log(new foo()); //{p: 1}
console.log(new foo()); //{p: 2}

或没有ES5依赖项：

var foo = function() {
    foo.prototype.p++;
}
foo.prototype.p = 0;

console.log(new foo()); //{p: 1}
console.log(new foo()); //{p: 2}