JavaScript prototype issue

Question

Currently, I'm reading 'Object-Oriented JavaScript'. In addition, I've encountered a hiccup while carrying out an example from the book.

Below is the code sample:

var Dog = function() {
    this.tail = true;
};

var benji = new Dog();
var rusty = new Dog();

Dog.prototype.say = function() { return "Woof!"; };

benji.say();
rusty.say();

Dog.prototype = {
    paws: 4,
    hair: true
};
Dog.prototype.constructor = Dog;

var lucy = new Dog();
lucy.say();

Essentially, the idea is to have the following work:

console.log(lucy.say());
console.log(benji.paws);
The obvious - lucy.say();

etc.

Strangely enough, I've copied the example to the 'T', but to no avail. If anyone could shed some light I'd be more than grateful.

Cheers

Quoted from the book: It turns out that our old objects do not get access to the new prototype's properties; they still keep the secret link pointing to the old prototype object.The most confusing part is when you look up the prototype of the constructor: typeof lucy.constructor.prototype.paws "undefined" typeof benji.constructor.prototype.paws "number" The following would have fixed all of the unexpected behavior above: Dog.prototype = { paws: 4, hair: true }; Dog.prototype.constructor = Dog; *Note When you overwrite the prototype, it is a good practice to reset the constructor property. — domscripter
– domscripter, Commented Dec 29, 2010 at 22:46
Yes, it will fix lucy.constructor.prototype.paws but it won't give lucy the say method. — Felix Kling
– Felix Kling, Commented Dec 29, 2010 at 23:14
The following works: var Dog = function() { this.tail = true; this.foo = {}; }; var benji = new Dog(); var rusty = new Dog(); Dog.prototype.say = { cat: 114, dog: "foo" }; Dog.prototype = { paws: 4, hair: true }; Dog.prototype.constructor = Dog; var lucy = new Dog(); lucy.foo = benji.say; console.log(benji.say.cat); console.log(benji.say.dog); console.log(benji.constructor.prototype.hair); console.log(benji.constructor.prototype.paws); console.log(lucy.foo.cat); console.log(lucy.foo.dog); console.log(lucy.hair); console.log(lucy.paws); — domscripter
– domscripter, Commented Dec 30, 2010 at 2:40

Felix Kling · Accepted Answer · 2010-12-29 22:23:26Z

6

By doing

Dog.prototype = {
    paws: 4,
    hair: true
};

you create a totally new prototype object (you are assigning a new object to prototype). The method say() will be not available to new Dog objects nor will the properties paws and hair be available to the old ones.

You want:

Dog.prototype.paws = 4;
Dog.prototype.hair = true;

You can try:

console.log(benji.__proto__ === rusty.__proto__); // prints true
console.log(lucy.__proto__ === rusty.__proto__); // prints false

and console.dir(x.__proto__) should show you the properties of the prototype objects (at least in Chrome).

edited Dec 29, 2010 at 22:23

answered Dec 29, 2010 at 22:06

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

JavaScript prototype issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related