sjmartin sjmartin - 1 year ago 85
Javascript Question

Basic JavaScript Prototype and Inheritance Example for Animals

I'm trying to grasp OOP with JavaScript with very simple examples.

My goal is to create a class hierarchy with Animals as the example.

In a simplified animal hierarchy we may see something like this:

Mammal Reptile
/\ /\
Human Dog Snake Alligator

I want to take this example and create classes within JavaScript. Here is my attempt. What can I do to make it better?

function Animal(name) { = name;

function Mammal() {
this.hasHair = true;
this.numEyes = 2;
this.blood = "warm";

function Dog(breed) {
this.breed = breed;
this.numLegs = 4;

Dog.prototype = new Animal("Fido");
Dog.prototype = new Mammal();

var Fido = new Dog("Lab");

console.log(; // returns undefined when i want it to return Fido
console.log(Fido.hasHair); // returns true as expected
console.log(Fido.breed); // returns lab as expected

What I would like to do is have dog extend the properties of Mammal and Animal since it is both but it is not working correctly. I am assuming because i'm calling dog.prototype = new Mammal() after new Animal() that it is overwriting the connection.

How do I properly write out these classes so that I can call all properties of their parent classes?

Thank you.

Answer Source

You want to make use of Prototypical Inheritance, which in Javascript is a bit awkward but powerful.

function Animal(name) { = name;

// Example method on the Animal object
Animal.prototype.getName = function() {

function Mammal(name, hasHair) {
    // Use the parent constructor and set the correct `this`, name);

    this.hasHair = hasHair;

// Inherit the Animal prototype
Mammal.prototype = Object.create(Animal.prototype);

// Set the Mammal constructor to 'Mammal'
Mammal.prototype.constructor = Mammal;

Mammal.prototype.getHasHair = function() {
    return this.hasHair;

function Dog(name, breed) {
    // Use the parent constructor and set the correct `this`
    // Assume the dog has hair, name, true);

    this.breed = breed;

// Inherit the Mammal prototype
Dog.prototype = Object.create(Mammal.prototype);

// Set the Dog constructor to 'Dog'
Dog.prototype.constructor = Dog;

Dog.prototype.getBreed = function() {
    return this.breed;

var fido = new Dog('Fido', 'Lab');

fido.getName();  // 'Fido'
fido.getHasHair(); // true
fido.getBreed(); // 'Lab'

A good resource to OOP in Javascript can be found on Mozilla Developer Network

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download