Javascript parent child inheritance without using prototype

Question

I'm somewhat new to JavaScript. I know that you should use prototype to implement inheritance between objects, but I tried the following and it worked perfectly (using Visual Studio 2012). What am I doing wrong?

function Person(firstname, lastname, age, eyecolor) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    this.eyecolor = eyecolor;

    this.name = function() {
        return this.firstname + " " + this.lastname;
    }
}

function Student(firstname, lastname, age, eyecolor, level) {
    this.level = level;
    Person.call(this, firstname, lastname, age, eyecolor);
}

var per = new Person("Abe", "Lincoln", 45, "green");

var obj = new Student("Abe", "Lincoln", 45, "green", "senior");

When I examine obj, it has properties for Person and for Student, and I can call obj.name() to get "Abe Lincoln". Even in the Visual Studio immediate window, I can see all of the properties as siblings of one another, as I would expect. But I am not using prototype, so obviously this is not right.

Set me straight please :)

Thanks in advance!

You're doing something more like "mixing" two classes. (Really, the word "class" itself is somewhat misleading when talking about JavaScript.) — Pointy
– Pointy, Commented Feb 16, 2013 at 21:44

the system · Accepted Answer · 2013-02-16 21:44:22Z

1

To use prototypal inheritance, you'd put the name method on Person.prototype:

function Person(firstname, lastname, age, eyecolor) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    this.eyecolor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstname + " " + this.lastname;
}

Then make the .prototype object of Student an instance of Person:

function Student(firstname, lastname, age, eyecolor, level) {
    this.level = level;
    Person.call(this, firstname, lastname, age, eyecolor);
}

// Make the prototype object of the Student constructor inherit from the
//    prototype object of the Person constructor.
Student.prototype = Object.create(Person.prototype)

And so now your name method is shared among all instances created instead of being remade for each instance.

var per = new Person("Abe", "Lincoln", 45, "green");

var obj = new Student("Abe", "Lincoln", 45, "green", "senior");

answered Feb 16, 2013 at 21:44

the system

9,35642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alnitak Over a year ago

this is the first example of prototypical inheritance I've seen that actually works the way I'd expect it to. I had thought I had read that it wasn't possible to overwrite the .prototype like that, though.

the system Over a year ago

@Alnitak: Nope, the prototype object can be changed at any time. Any previous objects created using the constructor will still reference the old prototype object, but any objects created after the change will use the new one. One thing you lose is the .constructor property on the original prototype object that points back to the constructor function, but that can be replaced if desired.

GamingDaemon Over a year ago

Thank you. So, I use prototype for the method(s), but not for the properties, unless I want one of the properties to be static across all instances, right? Would I also remove the "Person.call(this,...) invocation inside the Student? Or does that happen via the last line of your code example?

the system Over a year ago

@user2079283: Right. You can use it for other properties if the values are primitives. When you go to set the value on the actual object, the property will shadow the prototyped one. You don't want to put Objects and Arrays on the .prototype, because mutations will be visible by all the objects created from the constructor.

the system Over a year ago

...no, don't remove the Person.call.... That calls the Person constructor on each Student object. The one I added just creates an empty object that is used for inheritance.

|

Collectives™ on Stack Overflow

Javascript parent child inheritance without using prototype

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related