當打印整個對象時，為什么console.log不顯示PROTOTYPES在javascript中添加的屬性值？

Question

我知道Prototype用於添加屬性或方法，而JavaScript對象則從其原型繼承其屬性和方法。

var  Person=function (name) {

this.Fname=name;
this.health=100;

};
//create object of Person
var Mateen=new Person("Mateen");
var Fariza=new Person("Fariza");


console.log(Mateen);
console.log(Fariza);

//output { Fname: 'Mateen', health: 100 }
         { Fname: 'Fariza', health: 100 }

//Adding method by prototype
Person.prototype.attack=function  attack(target) {
target.health-=2;
}

Fariza.attack(Mateen);

console.log(Mateen);
console.log(Fariza);

//output: { Fname: 'Mateen', health: 98 }
          { Fname: 'Fariza', health: 100 }

//adding proterty by prototype
Person.prototype.level=1;

console.log(Mateen);
//output: { Fname: 'Mateen', health: 98 }

在最后一個輸出中，為什么在打印整個對象時不顯示水平。 它確實顯示了何時使用console.log（Mateen.level）。

Answer 1

我想這可能取決於瀏覽器，但是在Chrome中，您可以通過直接在控制台中擴展__proto__ -object來查看它。

在Firefox中，您可以單擊輸出，並在右側/底部獲得與chrome類似的輸出。

Safari與Chrome類似

不幸的是我無法驗證IE / Edge

Answer 2

（編輯：TL; DR這是由於繼承和原型鏈。console。不會記錄繼承的屬性，但可能會記錄可擴展以找到這些屬性的原型。）

您正在修改原始Person函數的原型對象，而不是您已創建的實例。 當您控制台記錄實例時，您只是在記錄該實際對象的屬性，而不是那些從原型繼承的屬性。 如果如示例中那樣訪問Mateen的level屬性，則Javascript將在對象上查找該屬性，如果找不到，則向下查找原型鏈並在其中找到它

console.log(Mateen.level)   // 1 : Value is actually coming from Mateen.__proto__.level 

如果您要將屬性顯式添加到Mateen則它將顯示在console.log中，而Fariza仍將從原型繼承它。

Mateen.level = 10;
console.log(Mateen);   // { Fname: 'Mateen', health: 100, level: 10 }

console.log(Fariza);   // { Fname: 'Mateen', health: 100}
console.log(Fariza.level)   // 1 : Taken from Fariza.__proto__.level