Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calling base class function - class inheritance in JavaScript

Please check out the following example:

MyBaseClass = function(a) {
     this.a = a;
};

$.extend(MyBaseClass.prototype, {
    init: function() {
        console.log('I am initializing the base class');
    }
});

MyChildClass = $.extend(MyBaseClass, {
    init: function() {
        MyBaseClass.prototype.init();
        console.log('I am initializing the child class');
    }
});

var = new MyChildClass();
var.init();

Тhis should output both 'I am initializing the base class' and 'I am initializing the child class'.

I need to be able to inherit the class MyBaseClass, but still to be able to call his init() method at the beginning of the new init() method.

How do I do that?

like image 426
barakuda28 Avatar asked Apr 08 '13 09:04

barakuda28


People also ask

How do you call a base class function?

A derived class is created, which is inheriting parent class p1 and overloading the parent class function first(). class d1 : public p1 { public: void first() { cout << "The derived class d1 function is called."; p1::first(); } }; The function of d1 class is calling the function of p1 class.

How do you call a class function in JavaScript?

The call() allows for a function/method belonging to one object to be assigned and called for a different object. call() provides a new value of this to the function/method. With call() , you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

What is class inheritance in JavaScript?

Inheritance enables you to define a class that takes all the functionality from a parent class and allows you to add more. Using class inheritance, a class can inherit all the methods and properties of another class. Inheritance is a useful feature that allows code reusability.

Which keyword is used to call the base parent class functions from the child functions in JavaScript?

The super keyword is used to call the constructor of its parent class to access the parent's properties and methods.


2 Answers

jQuery's extend doesn't build inheritance but "Merge the contents of two or more objects together into the first object".

Use prototype based inheritance to achieve your inheritance and explicitly call the "super" method :

MyBaseClass = function(a) {
     this.a = a;
};
MyBaseClass.prototype.init = function() {
    console.log('I am initializing the base class');
};

MyChildClass = function(a) {
  this.a = a;
}
MyChildClass.prototype = Object.create(MyBaseClass.prototype); // makes MyChildClass "inherit" of MyBaseClass
MyChildClass.prototype.init = function() {
    MyBaseClass.prototype.init.call(this); // calls super init function
    console.log('I am initializing the child class');
};

var child= new MyChildClass();
child.init();

Output :

I am initializing the base class
I am initializing the child class 
like image 167
Denys Séguret Avatar answered Nov 06 '22 04:11

Denys Séguret


jsFiddle Demo

Couple of things. extend really just adds on properties, it doesn't do much. So you need to have a function for your class ready, inherit from the base class, and then use extend on that classes prototype.

function MyChildClass(){};
MyChildClass.prototype = new MyBaseClass();
$.extend(MyChildClass.prototype, {
 init: function() {
    MyBaseClass.prototype.init();
    console.log('I am initializing the child class');
 }
});

Here is another approach that I like to use for inheritance - when the specificity of methods is going to be an issue - which is to store the base class in its own property

function MyChildClass(){};
MyChildClass.prototype = new MyBaseClass();
MyChildClass.prototype.base = new MyBaseClass();
$.extend(MyChildClass.prototype, {
 init: function() {
    this.base.init();
    console.log('I am initializing the child class');
 }
});
like image 40
Travis J Avatar answered Nov 06 '22 06:11

Travis J