Issue with overwriting prototype with object in javascript

Question

Trying to understand prototypes. I'm playing around in Chrome's console and was hoping someone can point me to why this is happening.

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

Now if I try the following, prototype does not have the expected results.

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!!!!!???

Are you looking for newtoy.__proto__? ie what are you seeking going through newtoy.constructor? — Crescent Fresh
– Crescent Fresh, Commented Mar 29, 2013 at 2:22

Travis J · Accepted Answer · 2013-03-29 02:20:40Z

4

jsFiddle Demo

This is because you overwrote the prototype instead of extending it when you did this:

Gadget.prototype =

It is common when overwriting it, to make a facade of the constructor like this:

Gadget.prototype = {
 constructor : Gadget
}

So for your exact situation:

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

answered Mar 29, 2013 at 2:20

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

markasoftware Over a year ago

That is the problem, but it would be more helpful if you explained how to do it properly. I will upvote it if you do

KingKongFrog Over a year ago

Ah...that actually makes sense. I'm reading the book Object-Oriented Javascript by Stoyan Stefanov and he does this but fails to mention clearly the repercussions, or I failed to realize.

2 revs · Accepted Answer · 2017-05-23 12:21:07Z

1

Prototype is initially a special typed object. When you assign the prototype with a new object (the curly braces are short hand for a new object) you lose the special prototype object.

See How does JavaScript .prototype work? for a deeper explanation.

edited May 23, 2017 at 12:21

community wiki

2 revs
Daniel Williams

Collectives™ on Stack Overflow

Issue with overwriting prototype with object in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related