JavaScript inheritance using apply

Question

I'm trying to extend class B to class A, and class A to class Super, using the function apply. The following code works OK:

function Super() {
    this.talk = function () {
        alert("Hello");
    };
}

function A() {
    // instance of A inherits Super
    Super.apply(this);
}

function B() {
    // instance of B inherits A
    A.apply(this);
}

var x = new B();
x.talk(); // Hello

But what if I want to class A inherits from class Super, not just its instances? I tried this:

function Super() {
    this.talk = function () {
        alert("Hello, I'm the class");
    };

    // function of the class' instance?
    this.prototype.talk = function () {
        alert("Hello, I'm the object");
    };
}

function A() {
    // nothing here
}

// A inherits from Super, not its instance
Super.apply(A);


function B() {
    // instance of B inherits A
    A.apply(this);
}

A.talk(); // static function works!

var x = new B();
x.talk(); // but this doesn't...

Am I doing something wrong?

Does it work if you move the talk function outside of Super and specify it like: Super.prototype.talk = function() { // Stuff }? — Emil L
– Emil L, Commented Sep 23, 2013 at 13:55
@EmilH It doesn't. Chrome says the same: "Uncaught TypeError: Object #<B> has no method 'talk'" — wm1sr
– wm1sr, Commented Sep 23, 2013 at 13:59
Add B.prototype = Object.create(A.prototype); after declaring function B and above A.talk(); and it should work. This is explained below in detail. — Niranjan Borawake
– Niranjan Borawake, Commented Sep 23, 2013 at 19:13

Roy Miloh · Accepted Answer · 2015-11-21 13:59:34Z

4

function Super() { }

// Static method, called by Super.talk()
Super.talk = function () {
    alert("Hello, I'm the class");
};

// Prototype method, should be called by instance
Super.prototype.talk = function () {
    alert("Hello, I'm the object");
};

function A() {
    // 'override' purposes
    Super.apply(this, arguments);
    // ..
}

// A inherits from Super
A.prototype = Object.create(Super.prototype);
A.prototype.constructor = A;

function B() { 
    A.apply(this, arguments);
}

// B inherits from A
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

// A.talk() won't work, of course.

var x = new B();
x.talk();

edited Nov 21, 2015 at 13:59

answered Sep 23, 2013 at 14:06

Roy Miloh

3,4111 gold badge21 silver badges17 bronze badges

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

4 Comments

Pavlo Over a year ago

Great answer! But I'd rather use Object.create(Super.prototype) instead of new Super() and add constructor method: A.prototype.constructor = A.

Pavlo Over a year ago

Shouldn't you also add Super.call(this) into A() body or parent constructor will be called anyway via new?

Niranjan Borawake Over a year ago

@Pavlo Super.call(this) is not required in A() body because there are no properties declared in Super's constructor to inherit they are only added to prototype in above case, so setting prototype is sufficient.

Adrian May Over a year ago

In general, what Pavlo says is important because otherwise the data that was intended to be instance data in Super will appear as "static", i.e. "class" data in the derived classes. They'll get shadowed anyway after calling Super.apply(this) but still you don't want that data hanging around in the "class".

Niranjan Borawake · Accepted Answer · 2013-09-23 18:54:43Z

1

There are two ways you can add public properties and methods to your class (rather function class) :

Method 1 of adding public property, added to each instance:

function MyClass(){
      this.publicProperty = 'public property'; 
}

Method 2 of adding public property, added to prototype, common for all instances:

MyClass.prototype.publicMethod = function(){
      console.log('public method');
}

When you want to inherit from a Class you need to inherit all the public properties and methods.

Inheriting properties and methods added using method 1:

function MyDerivedClass(){
      MyClass.apply(this);
}

Inheriting properties and methods added using method 2:

MyDerivedClass.prototype = Object.create(MyClass.prototype);

So in your case when you do Super.apply(A);, your are actually adding talk method to prototype of A (Using method 2 via 1). But B inherits from A only the properties using method 1. Just add below line after declaring B function:

B.prototype = Object.create(A.prototype);

And things will work as you expect. Hope this is helpful.

answered Sep 23, 2013 at 18:54

Niranjan Borawake

1,63813 silver badges20 bronze badges

2 Comments

netpoetica Over a year ago

Worth noting: In this situation MyDerivedClass.prototype = Object.create(MyClass.prototype);, you can pass the arguments to the MyClass constructor in Object.create: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - However, it is unclear how one would get the args from instantiation of MyDerivedClass to MyClass.

Niranjan Borawake Over a year ago

@netpoetica I did not consider the arguments inside the constructor functions coz the question did not have. Please take a look at this to know how you would pass on the arguments while instantiating.

Collectives™ on Stack Overflow

JavaScript inheritance using apply

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related