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:

1. console.log(lucy.say());
2. console.log(benji.paws);
3. 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

• meder omuraliev: What "hiccup" ? What is strange?
• domscripter: 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.
• Felix Kling: Yes, it will fix lucy.constructor.prototype.paws but it won't give lucy the say method.
• domscripter: 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)

Answer 1

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).