JavaScript:通过原型进行属性赋值

Question

我正在努力理解以下两组代码的区别.原始代码来自着名的Ninja教程,我为自己简化了一些.

问题:我想我理解CodeA的工作原理.Ninja.prototype.swung = false正在分配一个新属性function Ninja(),并因此而ninjiaA.swung评估为false.但是,在CodeB中,当我们在开头声明function Ninja()with this.swung = true时,后面的赋值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则返回该值.