How to inherit static methods from base class in JavaScript?

Question

I\'m trying to achieve some basic OOP in JavaScript with the prototype way of inheritance. However, I find no way to inherit static members (methods) from the base class.

Answer 1

How are you implementing 'static' methods? Since JavaScript doesn't have a native class/instance object model, it all depends on how you've designed your own class system.

If you want to be able to inherit anything it'll have to be using the SomeClass.prototype object, rather than putting anything directly on the SomeClass constructor function. So essentially you'll be defining static methods as normal instance methods, but ones that don't care about what value of this is passed into them.

Answer 2

you can access static fields via this.constructor[staticField];

class A {
  static get Foo() { return 'Foo'; }
  
  constructor() {
    console.log(`Class ${this.constructor.name}`, this.constructor.Foo);
  }
}

class B extends A {
    static get Foo() { return 'Baz'; }
}

class C extends A {}

const a = new A();
const b = new B();
const c = new C()

Answer 3

Try this:

class BaseClass {
    static baseMethod () {
        console.log("Hello from baseMethod");
    }
}

class MyClass extends BaseClass {
    constructor(props) {
        super(props);
    }
}

Object.assign(MyClass, BaseClass);

They key is Object.assign which should be everyone's new best friend. You can now call any base method from BaseClass using MyClass as follows:

MyClass.baseMethod();

You can see this live and in action on this pen.

Enjoy!

Answer 4

For ES5 you will need to use Object.assign to copy static methods from BaseClass to SubClass but for ES6 it should work without using Object.assign

ES5 Example

var BaseClass = function(){

}

BaseClass.sayHi = function(){
   console.log("Hi!");
}

var SubClass = function(){

}

Object.assign(SubClass , BaseClass);

BaseClass.sayHi();   //Hi
SubClass.sayHi(); //Hi

ES6 Example

class BaseClass {
   static sayHi(){
     console.log("Hi!");
   }
}

class SubClass extends BaseClass{

}

BaseClass.sayHi()   //Hi
SubClass.sayHi() //Hi

Answer 5

In the classical (OO) inheritance pattern, the static methods do not actually get inherited down. Therefore if you have a static method, why not just call: SuperClass.static_method() whenever you need it, no need for JavaScript to keep extra references or copies of the same method.

You can also read this JavaScript Override Patterns to get a better understanding of how to implement inheritance in JavaScript.

Answer 6

After your example code you can do this:

for (var i in Class) {
    SomeClass[i] = Class[i];
}

to copy static members from Class to SubClass.

If you're using jQuery, have a look at the jQuery.Class plugin from JavaScriptMVC. Or you can extend John Resig's Simple JavaScript Inheritance for a more library-agnostic system.