JavaScript - Inheritance

Question

I have 2 class: animal(parent) and dog(the 'child' of animal), when I create an object of Animal, and try to alert the name of the animal, I got undefined , and not her real name. Why? (sorry about the double post )

function Animal(name, year){
    alert(name);
    this.name = name;
    this.year = year;

    this.age = function (){
        var n = new Date().getFullYear();
        return n - this.year;
    };
}

function Dog(name, year, color, type) {
    this.color = color;
    this.type = type;
    Animal.call(this, name, year);

    //override method age of animal
    this.age = function (){
        var n = new Date().getFullYear();
        return (n - this.year) * 7;
    };

    Dog.prototype.age();
}

Dog.prototype = new Animal();

(This js class named: JsClass.js)

and in HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="JsClass.js"></script>

        <script type="text/javascript">
            var p1 = new Animal("rex",2008);
        </script>
        <title>Insert title here</title>
    </head>
    <body>
    </body>
</html>

(using Eclipse)

Thank you!

For reference, you'd typically call the parent constructor before setting your own fields, rather than after. Shouldn't cause the problem you're seeing, though. — cHao
– cHao, Commented Nov 25, 2013 at 23:42
now I see that if i delete this line: Dog.prototype = new Animal(); it's alert the animal name. so what's the problem with this line? where should I put it? — user2097810
– user2097810, Commented Nov 25, 2013 at 23:49

qiu-deqing · Accepted Answer · 2013-11-25 23:50:54Z

function Animal(name , year){
    alert(name);
    this.name = name;
    this.year=year;

    this.age= function (){
        var n= new Date().getFullYear();
        return n-this.year;
    };
}
    function Dog(name , year , color , type) {      
        this.color=color;
        this.type=type;
        Animal.call(this, name,year);

        //override method age of animal
        this.age= function (){
            var n= new Date().getFullYear();
            return (n-this.year)*7;
        };

        Dog.prototype.age();
    }

// you invoke Animal as constructor. but you did not pass any argument to it . so name any year will be undefined in Animal() so alert will show undefined
    Dog.prototype = new Animal();

//  here is the normal invoke so alert will show rex
var p1 = new Animal("rex",2008);

your code will invoke Animal twice, the first invoke alert undefined and the second alert rex

linstantnoodles · Accepted Answer · 2013-11-26 00:16:44Z

1

when I create an object of Animal, and try to alert the name of the animal, I got undefined , and not her real name

Your alert function is in the animal constructor function. You didn't pass anything into that function when you instantiated it as the prototype of Dog.

Here's what's happening:

Dog.prototype = new Animal(); calls the constructor function without any parameters (hence the undefined alert) and sets the prototype of dog to the Animal instance.

new Animal("rex", 2008); calls the constructor again. This time, with a name, so you'll get "rex".

I recommend setting the methods as properties of the prototype. That way, the functions don't get created on every instance. I would change your code to look like this:

function Animal(name, year) {
    this.name = name;
    this.year = year;
};

Animal.prototype.age = function() {
    var n = new Date().getFullYear();
    return n - this.year;
};

function Dog(name, year, color, type) {
    Animal.call(this, name, year);
    this.color = color;
    this.type = type;
};

// Override method age of animal
Dog.prototype.age = function() {
    var n = new Date().getFullYear();
    return (n - this.year) * 7;
};

Dog.prototype = new Animal();

But there's still one problem - you're invoking the Animal constructor twice. Once when you set it to be the prototype of Dog, and another when you do Animal.call(). One way around this is to use Crockford's method of inheritance.

edited Nov 26, 2013 at 0:16

answered Nov 25, 2013 at 23:44

linstantnoodles

4,4101 gold badge25 silver badges24 bronze badges

2 Comments

user2097810 Over a year ago

thanks. but which parameters should I insert into this line: Dog.prototype = new Animal('wow'); ?

linstantnoodles Over a year ago

Should just be Dog.prototype = new Animal();

marlanga · Accepted Answer · 2013-11-25 23:51:55Z

0

In

Dog.prototype = new Animal();

You are executing Animal() without parameters. And its OK for simulate inheritance in javascript.

answered Nov 25, 2013 at 23:51

marlanga

1

Collectives™ on Stack Overflow

JavaScript - Inheritance

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related