inheritance
Learning Javascript foundations
John Hunter
12 November 2008

are these the
same thing?

1 2
radio toggleButton
we have one radio with two buttons

toggleButton
toggleUp ()
toggleDown ()
toggleButtons share the same behaviour (methods)
we could say they are a particular class of objects

Class
Defines the abstract characteristics of a thing (object),
including the thing's characteristics (its attributes, fields or
properties) and the thing's behaviours (the things it can do, or
methods, operations or features).
One might say that a class is a blueprint or factory that
describes the nature of something.
For example, the class Dog would consist of traits shared by
all dogs, such as breed and fur colour (characteristics), and the
ability to bark and sit (behaviours).
source: wikipedia/Object_orientated_programming

Javascript does not have formal
classes
it can approximate class based
programming
but it has other mechanisms for
inheritance

class-based
inheritance
vs.
prototype-based
inheritance
nothing to do with the Prototype framework

Classical inheritance
ToggleButton
instantiate
tuningButton
volumeButton
function ToggleButton () { … }
var tuningButton = new ToggleButton();
var volumeButton = new ToggleButton();

Prototypal inheritance
toggleButton
prototype
tuningButton
volumeButton
beget
var toggleButton = { … };
var tuningButton = Object.beget(toggleButton);
var volumeButton = Object.beget(toggleButton);

toggleButton
toggleUp ()
toggleDown ()
prototype
Then look here
tuningButton
First look here
tuningButton.toggleUp();

class-based approach:
you always have to create a class blueprint
in order to create an object
prototype-based approach:
you can use an existing object as a
prototype for more objects

Object.beget = function (obj) {
var F = function () {};
F.prototype = obj;
return new F();
};
// myThing = Object.beget(thing);
the beget method returns an object that uses the
argument as its prototype
source: Doug Crockford

There is more to inheritance
...but that’s all for now!

Review
classes of objects share characteristics and behaviour
Javascript supports several inheritance mechanisms
Class-based (but not true classes)
Prototype-based

Thanks