javascript function object's inherit method behaviour

Question

I've come across a behaviour of the function object. that seems to be similar to prototyping but uses a different method.

var Car = function() {
    this.foo = 'shiny';
}

var Rover = function() {
    this.inherit = Car;
    this.inherit();
}

var Mini = function() {
    this.inherit = Car;
    this.inherit();
}

when a new instance of a sub class is made this.inherit method has the effect of calling the parent class on itself, so that the parent's properties and methods are available to the sub class.

var myRover = new Rover();

var myMini = new Mini();
myMini.foo = 'rusty';

console.log(myRover.foo, myMini.foo); // displays "shiny" & "rusty" respectively

I've looked in Mozilla and MSDN, but I can't seem to find it documented any where. Can anyone put a name to this behaviour and any further documentation.

score 1 · Accepted Answer · answered Dec 29 '10 at 21:27

I think the word inheritFrom does not make any sense here. It could be as well bar. What makes this work is the pattern that you define a member of the "subClass" function which you call on the next line.

It may be worth checking out "Classical Inheritance in JavaScript" article by Douglas Crockford for some additional ideas.

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

inheritFrom isn't a method that exists in JavaScript core objects. JavaScript inheritance can be accomplished in many ways as outlined in this post. What you're doing here is not really proper inheritance as you're just setting a single method in a separate object equal to a function.

First you declare a function called superClass. This function sets the foo and bar properties of the this object. When you set a method on subClass equal to superClass the this object then references the subClass function because it is the method's caller so then subClass has the properties of foo and bar set to 'foo' and 'bar'.

However, when you overwrite the foo method here:

this.foo = function() {
    return this.foo;
};

You turn foo into a function.

Notice that when you add this script:

var test = new subClass();
alert(test.foo);

test.foo will be a function as you overrode its value in the subClass constructor. Adding this:

alert(test.bar);

Will alert the string 'bar' since you didn't overwrite it. Also if you call test.foo() it will simply return a pointer to the test.foo method.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 29 '10 at 21:27

treeface

13,270
4
51
57

I've made an edit to the method name so it makes more sense. the subClass method returns the inherited property. the post looks interesting because it uses a third type of inheritance using a "apply" method – gawpertron Dec 29 '10 at 21:59
@gawpertron: Basically what I'm trying to tell you is that you're not really doing inheritance here. You're simply saying that there will be a method on the `subClass` object called `myFunction` (or whatever). This `myFunction` runs the script inside of your `superClass` function. The `this` keyword in the `superClass` function references its caller, which in this case will be the `subClass` method. – treeface Dec 29 '10 at 22:02
I've removed the function. I can see now that it makes no difference what you call the method "inheritFrom", "inherit" or "monkeys" it has the same effect as using the "new" keyword but instead appends the properties and methods to the sub class. – gawpertron Dec 29 '10 at 22:35
@gawpertron So what's your question? Your original question was why it wasn't documented. It isn't documented because it's not a core method of object. Maybe you should accept one of the answers and open a new question if you have further issues. – treeface Dec 29 '10 at 22:37

javascript function object's inherit method behaviour

2 Answers2