JavaScript：通過原型進行屬性賦值

Question

我正在努力理解以下兩組代碼的區別。 原始代碼來自着名的Ninja教程 ，我為自己簡化了一些。

問題：我想我理解CodeA的工作原理。 Ninja.prototype.swung = false正在將新屬性賦值給function Ninja() ，並且ninjiaA.swung求值為false。 但是，在CodeB中，當我們在開頭使用this.swung = true聲明function Ninja()時，后來Ninja.prototype.swung = false賦值不起作用，並且ninjaA.swung仍然被評估為true 。 我無法理解為什么后來的這個任務在CodeB中不起作用。 有人可以賜教我這個嗎？

CODEa所：

function Ninja(){}  
Ninja.prototype.swung = false; 
var ninjaA = new Ninja();
ninjaA.swung; //evaluates to false

CodeB：

function Ninja(){ 
  this.swung = true; 
}  
Ninja.prototype.swung = false; //I'm expecting this changes swung to false, 
                               //but it doesn't.
var ninjaA = new Ninja();      
ninjaA.swung; //evaluates to true

非常感謝提前。

Answer 1

在構造函數內部使用this聲明屬性時，它會附加到該構造函數的每個對象。

當您在該構造函數的原型上聲明一個屬性時，它仍然存在，並且該構造函數的所有對象都引用它。 如果對象和原型鏈中具有相同名稱的屬性，則對象的屬性會隱藏原型上的屬性。

想一想如何在原型鏈中評估屬性，這可能會使事情變得更清晰。

CODEa所：

ninjaA.swung

1. Is swung a property of the current object - No
2. Is swung a property of the current object's prototype - Yes
    2.1. Return it

CodeB：

ninjaA.swung

1. Is swung a property of the current object? - Yes
    1.1 Return it

在代碼B中，它永遠不會到達原型上的屬性。

Answer 2

在將Ninja作為構造函數調用時，將值true賦給swung 。 在執行構造函數之前，對象將如下所示：

{
    prototype : {
        swung : false
    }
}

執行構造函數后：

{
    prototype : {
        swung : false
    },
    swung : true
}

當您要求物業swung ，將在每個級別檢查原型鏈以查看它是否存在。 如果它不存在，將返回undefined值。

Answer 3

在JavaScript中，僅在首先在實例上找不到方法時才調用附加到原型的方法。