CODEWITHSUNDEEP
javascriptinheritanceapply
wm1sr
wm1sr

Reputation: 2015

JavaScript inheritance using apply

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?

Upvotes: 3

Views: 1476

Answers (2)

Roy Miloh
Roy Miloh

Reputation: 3411

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();

Upvotes: 4

Niranjan Borawake
Niranjan Borawake

Reputation: 1638

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.

Upvotes: 1

Related Questions