Prototypal inheritance chain with JavaScript

Question

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
Person.prototype.talk = function () {
    return this.firstName + " " + this.lastName;
}
//creating a Person object for extension
var manager = new Person('jon', 'doe');
console.log(manager.talk());
//Manager prototype..but doesn't inherit Person methods 
function Manager(firstName, lastName, accessCode) {
    //shared properties
    this.firstName = firstName;
    this.lastName = lastName;

    this.accesscode = accessCode;
}
function personChecker(person) {
    var returnCode = 0;
    if (person instanceof Person) {
        returnCode = 1;
    }
    else if (person instanceof Manager) {
        returnCode = 2;
    }
    return returnCode;
}
console.log(personChecker(manager));

Is it possible to share a prototype and have a different constructor? I would like to have Manager inherit everything from Person (and then extend it) and have a function switch on the prototype and do something different depending on the argument passed to the personChecker function

Yes, it is possible, however instanceof might not work as expected then. What do you actually want to do? That "function switch" sounds like a bad idea. Are you sure you don't want to "subclass" Person? — Bergi
– Bergi, Commented Dec 22, 2013 at 21:14
@Bergi I want some sort of functionality where I have a method that can take a manager, janitor and president object which inherit from Person. How should I differentiate between those types? Should I use something like hasOwnProperty instead of switching on the prototype? — wootscootinboogie
– wootscootinboogie, Commented Dec 22, 2013 at 21:17
Inheriting three times from Person sounds like the right thing - but then they don't have the same prototype ("share"). Whether it's better to distinguish the instances by calling their own methods or by instanceof-checking them should be another question. — Bergi
– Bergi, Commented Dec 22, 2013 at 21:23
@Bergi so let's say that the personChecker function appends the firstName and lastName properties on the page, but it does so in a different color depending on the person, manager, etc. How would that be implemented? Would I switch on to be able to tell the difference? — wootscootinboogie
– wootscootinboogie, Commented Dec 22, 2013 at 21:28
@wootscootinboogie: You could always add an extra field to your objects to tell what class they belong to. So you would do this.personType = "JANITOR", this.personType = "MANAGER", etc. — hugomg
– hugomg, Commented Dec 22, 2013 at 21:30

Dagg Nabbit · Accepted Answer · 2013-12-22 21:49:00Z

2

In JavaScript, inheritance is generally done like this:

Manager.prototype = Object.create(Person.prototype);

Object.create creates a new object with the object passed as the first argument in its prototype chain.

If you need to support old browsers that don't have Object.create, you can do the "prototype dance" instead:

function F(){}
F.prototype = Person.prototype;
Manager.prototype = new F();

In any case, avoid code calling the constructor to get such an object (Manager.prototype = new Person()), this is a well-known antipattern and will break as soon as your constructor relies on any of its arguments (and it causes other, more subtle problems).

answered Dec 22, 2013 at 21:49

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

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

3 Comments

wootscootinboogie Over a year ago

Interesting, I think this is what I really wanted to do. What are some of the more subtle problems this antipattern causes?

Dagg Nabbit Over a year ago

I think the most common problem is that anything the constructor does with this will happen to your new prototype object, when the assumption is probably that this is just an instance object.

Sukima Over a year ago

Thank you, This is the best explanation I've come across yet!

Stuart Wakefield · Accepted Answer · 2013-12-22 21:51:28Z

2

The typical way to support this inheritance:

// create a blank function to pass the prototype
var blank = function() {};

// assign the prototype to inherit to the blank constructor
blank.prototype = Person.prototype;

// pass an instance of the prototype as the Manager prototype
Manager.prototype = new blank();

var person = new Person('John', 'Doe');
var manager = new Manager('Greg', 'Smith', 'access1234');

manager.talk(); // Greg Smith
person.talk(); // John Doe

Here is a fiddle: http://jsfiddle.net/XF28r/

Note a Manager is also a Person so you need to switch the check around.

function personChecker(person) {
    var returnCode = 0;
    if (person instanceof Manager) {
        returnCode = 2;
    } else if (person instanceof Person) {
        returnCode = 1;
    }
    return returnCode;
}

Although note I would put this in a helper method:

function extend(parent, child) {

  var blank = function() {};
  blank.prototype = parent.prototype;
  child.prototype = new blank();
}

So then you can simply use it:

extend(Person, Manager);

As Bergi has mentioned in the comments, this can also be reduced down to:

function extend(parent, child) {
  child.prototype = Object.create(parent.prototype);
}

(works IE 9 upward)

edited Dec 22, 2013 at 21:51

answered Dec 22, 2013 at 21:35

Stuart Wakefield

6,40431 silver badges39 bronze badges

2 Comments

Bergi Over a year ago

Instead of that helper function, you should just use Object.create or a shim of it (@DaggNabbit: it's OK here, because he uses blank explicitly, although some explanation would've helped)

Stuart Wakefield Over a year ago

That's nice @Bergi, I didn't know that. IE9 upward but still. I'll add it to my answer

Oriol · Accepted Answer · 2013-12-22 21:43:03Z

1

Use the following:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}
Person.prototype.talk = function () {
    return this.firstName + " " + this.lastName;
}

function Manager(firstName, lastName, accessCode) {
    //shared properties
    this.firstName = firstName;
    this.lastName = lastName;

    this.accesscode = accessCode;
}
Manager.prototype = new Person('jon', 'doe');

function personChecker(person) {
    var returnCode = 0;
    if (person instanceof Manager) {
        returnCode = 2;
    }
    else if (person instanceof Person) {
        returnCode = 1;
    }
    return returnCode;
}

Note that I have changed the order of the conditionals, because an instance of Manager is an instance of Person too:

var per = new Person('A', 'B');
per.talk();              // 'A B'
per instanceof Person;   // true
per instanceof Manager;  // false
personChecker(per);      // 1

var man = new Manager('A', 'B');
man.talk();              // 'A B'
man instanceof Person;   // true !!!!
man instanceof Manager;  // true !!!!
personChecker(man);      // 2

If you want to do it the good way, instead of

Manager.prototype = new Person('jon', 'doe');

use

Manager.prototype = Object.create(Person.prototype, {constructor: {value: Manager}});

but it doesn't work on old browsers.

edited Dec 22, 2013 at 21:43

answered Dec 22, 2013 at 21:28

Oriol

291k71 gold badges459 silver badges535 bronze badges

2 Comments

Bergi Over a year ago

-1 Why are all your managers called jon doe? Don't use new for inheritance!

Oriol Over a year ago

@Bergi I thought that wootscootinboogie wanted "jon doe" to be a default name

Collectives™ on Stack Overflow

Prototypal inheritance chain with JavaScript

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related