JavaScript更改原型属性值不能按预期工作

Question

function Fruit() {
    this.type = "fruit";
}

function Bannana() {
    this.color = "yellow";
    Fruit.call( this );
}

// instantiation
var myBanana = new Bannana();

// modifying type property    
Bannana.prototype.type = 'flower';

console.log( myBanana.type );

输出：fruit为什么不是flower？

Answer 1

因为myBanana的拥有 type属性阴影属于原型的属性。

当您访问某个属性时，首先会查找该对象本身。只有当它不存在时，才会查找它的原型，原型的原型等，直到找到它为止。

如果找不到，则会返回undefined。

Answer 2

Fruit.call(this);使用新的Fruit对象作为 this 上下文调用Bannana，从而直接在对象上设置这些属性。

通过在对象文字上调用相同的模式，可以清楚地看到此行为。

var banana = {};

Fruit.call(banana);

console.log(banana.type); // 'fruit'

Answer 3

因为 Bannana 构造函数中对Fruit.call( this );的调用将对象属性类型设置为 fruit （即它已设置为代码中的对象 myBanana 。

如果对象 myBanana 中没有属性 type ，它只会回退到原型中的属性。

尝试将以下内容添加到您的代码中，您会看到flower将成为输出：

delete myBanana.type
console.log(myBanana.type);

这是因为 myBanana 对象不再拥有 type 属性，因此请查找 type 属性将走上原型链。

检查此答案以了解此机制如何更详细地运作：

https://stackoverflow.com/a/572996/689788