javascript - 在javascript中用对象覆盖原型的问题

Question

试图理解原型。我在 Chrome 的控制台中玩耍，希望有人能指出为什么会发生这种情况。

function Gadget(name, color) {
     this.name = name;
     this.color = color;
     this.whatAreYou = function(){
       return 'I am a ' + this.color + ' ' + this.name;
     }
}

Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;
Gadget.prototype.getInfo = function() {
    return 'Rating: ' + this.rating + ', price: ' + this.price;
};

var newtoy = new Gadget('webcam', 'black');

newtoy.constructor.prototype

Gadget {price: 100, rating: 3, getInfo: function} //Expected

现在，如果我尝试以下操作，原型没有预期的结果。

function Gadget(name, color) {
     this.name = name;
     this.color = color;
     this.whatAreYou = function(){
       return 'I am a ' + this.color + ' ' + this.name;
     }
}

Gadget.prototype = {
     price: 100,
     rating: 3,
     getInfo: function() {
       return 'Rating: ' + this.rating + ', price: ' + this.price;
     }
};

var newtoy = new Gadget('webcam', 'black');

newtoy.constructor.prototype

Object {} //Empty Object!!!!!???

Answer 1

jsFiddle 演示

这是因为您在执行此操作时覆盖了原型而不是扩展它：

Gadget.prototype = 

覆盖它时很常见，像这样制作构造函数的外观：

Gadget.prototype = {
 constructor : Gadget
}

因此，对于您的确切情况：

Gadget.prototype = {
 constructor : Gadget,
 price: 100,
 rating: 3,
 getInfo: function() {
   return 'Rating: ' + this.rating + ', price: ' + this.price;
 }
};

Answer 2

Prototype 最初是一个特殊的类型化对象。当您为原型分配一个新对象时（花括号是新对象的简写），您将丢失特殊的原型对象。

请参阅JavaScript .prototype 是如何工作的？进行更深入的解释。