JavaScript:通过原型(prototype)进行属性分配

Question

我很难理解以下两组代码的区别。原码来自the famous Ninja tutorial我为自己简化了一点。

问题:我想我了解 CodeA 的工作原理。 Ninja.prototype.swung = false 将一个新属性分配给 function Ninja()，因此 ninjiaA.swung 的计算结果为 false。但是，在CodeB中，当我们一开始就用this.swung = true声明function Ninja()时，后面赋值的Ninja.prototype.swung = false 不会生效，并且 ninjaA.swung 仍然需要评估为 true。我不明白为什么这个后来的分配在 CodeB 中不起作用。有人可以启发我吗？

代码A:

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

代码B:

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 声明属性时，它会附加到该构造函数的每个对象。

当您在该构造函数的原型(prototype)上声明一个属性时，它会保留在那里并且该构造函数的所有对象都引用它。当对象和原型(prototype)链中有一个同名的属性时，对象的属性会隐藏原型(prototype)上的属性。

想想属性在原型(prototype)链中是如何求值的，这可能会让事情变得更清楚。

代码A:

ninjaA.swung1. Is swung a property of the current object - No2. Is swung a property of the current object's prototype - Yes    2.1. Return it

代码B:

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

在代码 B 中，它永远不会访问原型(prototype)上的属性。