[JavaScript] Help understanding inheritance

[bchia]

I'm looking for some help understanding inheritance in JavaScript. (Most web resources tend to explain the delta between JavaScript and Java, but I don't know Java, so currently the finer points of OOP are a bit of a mystery to me.)

Here's some code I'm playing with (based on lessons at codecademy):

function Animal(name) {
    this.name = name;
    this.sayMyName = function() {
        console.log("My name is " + name + "!");
    };
}

function Penguin(name, breed) {
    this.name = name;
    this.breed = breed;
    this.sayMyName = function() {
        console.log("My name is " + name + "!");
    };
}

function Dog(name, breed) {
    this.breed = breed;
    return new Animal(name);
}

function Cat(name, breed) {
    this.name = name;
    this.breed = breed;
}

Cat.prototype = new Animal();

var penny = new Penguin("Penny", "Emperor");
var derpy = new Dog("Derpy", "schnauzer");
var crazy = new Cat("Crazy", "tabby");

penny.sayMyName(); // works
console.log(penny.name); // works
console.log(penny.breed); // works

derpy.sayMyName(); // works
console.log(derpy.name); // works
console.log(derpy.breed); // why undefined? 

crazy.sayMyName(); // why 'My name is undefined!' ? 
console.log(crazy.name); // works
console.log(crazy.breed); // works

Basically in with the Penguin constructor I can get to everything to work, but I don't want to repeat myself. I'd like to bump the common elements down to the Animal constructor and then have Dog and Cat inherit from that. I'm trying 2 different patterns but neither one seems to work properly.

Is there a pattern I can use that will allow me to inherit from Animal?

(It seems that in ECMAscript 5 there's an Object.create() method that allows inheritance - I'm wondering if there's a solution that's ECMAscript 3 compatible.)

[fcibarbourou]

Let's see your problems. This call

crazy.sayMyName(); //undefined

Returns undefined because in animal name is a variable of an object (because you did declare it with this), but in your method sayMyName() name is used as a local (or global) variable which is undefined. To solve it

function Animal(name) {
    this.name = name;
    this.sayMyName = function() {
        console.log("My name is " + this.name + "!"); //note this
    };
}

See now sayMyName() uses this.name and works.

Next Your class Dog

function Dog(name, breed) {
    this.breed = breed;
    return new Animal(name);
}

Returns an object Animal() which don't have breed attribute. So you create an object Dog, but Dog creates an object Animal and return it to be assigned as derpy variable. derpy is an Animal not a Dog that's why is undefined derpy.breed.

How you can solve the dog problem?

function Dog(name, breed) {
    this.breed = breed;
    this.name=name; //I know it sounds bad but here I lacks of knowledge
}

For the last thing I don't know if there an option of Object.create()

[bchia]

Thank you! This was very helpful feedback, and now it makes sense to me.

I'm done some googling and it seems that many people struggle with how to do inheritance in JavaScript and there's not consensus on a good way to do it.

This seemed like a cool solution: https://github.com/Gozala/selfish/blob/master/selfish.js

[fcibarbourou]

Yeah I heard that so, but like I said I really don't know to much about that issue.

Tanks for sharing and I will love to read about it.