Prototype Inheritance - Question

JavaScript
1

Hello all,

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,
domscripter

2

Have a look at the following script. It might help you to understand the steps required to create a prototype property. First you need an Dog object constructor, then you need some Dog objects to work with, then you can add your prototype property and store the necessary information in it. When a script is looking for a specific property it starts in the object space and then, if it is not there, it looks in the object prototype space. Our property “bark” is in the prototype, but is available when examining the dog objects. When you run this script it will firstly show you the two Dog object properties. It will then tell you the bark of dog1 and then reset the bark of dog2 and show you the new dog2.bark property. Have fun!


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Dog Objects</title>
<script type="text/javascript">
<!--
// create Dog object constructor
function Dog(name, type, color)
 { this.name=name;
   this.type=type;
   this.color=color;
   this.show=showAll; // this is a method for use with Dog objects
 }
// --------
// create a method that shows the properties of the Dog object 
 function showAll()
  { alert("This dog is "+this.name+" he is a "+this.type+" dog and is "+this.color) 
  }
// --------------  
// create 2 new Dog objects
var dog1=new Dog("Benji","Hound", "Black")
var dog2=new Dog("Rusty","Lap", "White")
//
// look at these object properties on screen
dog1.show();
dog2.show();
// add a property to the Dog object prototype
// this property is now part of all created Dog objects
Dog.prototype.bark="woof";
alert(dog1.bark);
//
// change the "bark" prototype property on dog2
dog2.bark="meow";
// look at the dog bark properies for both dogs
alert("dog1 says "+dog1.bark+" dog2 says "+dog2.bark)
//
//-->
</script>
</head>

<body>

</body>

</html>
3

Hi AllanP,

Thanks for your provided example. I know of other ways (using different code) to get this sample to work, but I’m curious how to get my provided code to work (mostly out of curiosity of what the book left off).

Can anybody help?

Cheers,
domscripter

4

That code from the book is never intended to be run as scripting code within the web browser.

Instead, the >>> markers on the code in the book indicate that you are supposed to explore the code from the scripting console.

Page 23, at the end of the “Variables Are Case-Sensitive” section should help to clear that up for you.

[indent]The three consecutive greater-than signs (>>>) show the code that you type, the rest
is the result, as printed in the console. Again, remember that when you see such
code examples, you’re strongly encouraged to type in the code yourself and
experiment tweaking it a little here and there, so that you get a better feeling of how
it works exactly.[/indent]

Here is why lucy.say() fails, from page 163

Any new objects you create from now on will use the updated prototype:

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

    [b]TypeError: lucy.say is not a function[/b]

It is supposed to fail, by design.

5

Hi pmw57,

I’m aware of the book’s convention. I believe I found the answer I was looking for:
“The say() method will not be available to new Dog objects.”

Something quite interesting:
If you remove Dog.prototype.constructor = Dog; the following will read “undefined”
console.log(lucy.constructor.prototype.paws)

Also, if you run the following:
console.log(benji.constructor.prototype.paws)
4

I was under the assumption by resetting the constructor property, I could access the say() method.

Thanks for your response :slight_smile:

6

No, I’m afraid not. Old objects that were created beforehand still have access to the old constructor, but new ones won’t be able to.

7

After a few attempts, the following seems to work:


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);
8

I’m interested in buying a book on Javascript to learn Object Oriented stuff. I guess this one is a good one.

The only thing that confuses me a bit is that there is a chapter about prototyping.
Is this a specific thing already included in javascript?
Or does the author mean that you need to use the Prototype framework library in addition with the code examples?

I already work with jQuery right now, but want to learn the basics of OO programming in Javascript but apart from any framework.

9

Yes it is already in JavaScript, having nothing to do with that prototype code library.

An object called car, for example, might be prototyped from a more general object called vehicle. The prototype is the set of default properties and methods on top of which each object is based.

10

Ok, clears out a lot :slight_smile: Thanks

Sometimes kind of confusing when there’s a library called ‘prototype’ aswel.
As there are books specially about those frameworks aswel: Amazon.com: Practical Prototype and script.aculo.us (Expert’s Voice in Web Development) (9781590599198): Andrew Dupont: Books

11

As with the OP, I own this book as well. It is a great read, and a lot easier then you think to write OOP code. Don’t know your reading habits, but I finished this book in 3 days. Be sure to do all of the examples in the book to fully understand it. Examples are small and easy to follow.

Good Luck.

12

Well, English is not my mother tongue, so reading goes way slower for me.
I don’t like the O’Reilly style books, a little too boring written and lay out, when those books are actually very good in content.
I like books from PeachPit Press like the book PPK On Javascript I already have.