ES6 React - static method vs constructor

Question

I'm running into an "issue" where I don't know which one is the best option.

Say I have the following class

export default class A {
   constructor(){
       this.testMethod = function testMethod(){
           console.log('a')
       }
   }

   static testMethod2 = function() {
       console.log('B')
   }
}

now I'm extending this class

class C extends A {
    fetch() {
        this.testMethod()
        A.testMethod2()      
    }            
}

Defining it as a static method feels weird to use when extending it, I would assume the fact that I'm extending a class would allow me to access all of its own methods (ES5 prototype style)

I know both ways are correct but what's the best way to do this in ES6/React ? What are some caveats of both ways or performance issues ?

I'm currently using the constructor because it feels like the right/intended way of doing it but I can't "justify" one over the other.

All this came from applying the airbnb eslint to my code base (http://eslint.org/docs/rules/class-methods-use-this)

A `static` method is nothing more than a class method. If you don't intend on having class instances using that method then you have nothing to feel weird about. — Carl Edwards, Dec 07 '16 at 19:37
What exactly are you trying to achieve? Why not just make it a normal non-static method? — TimoStaudinger, Dec 07 '16 at 19:38
Static methods are not subject of inheritance. What you do seems fine. What is the issue? — trincot, Dec 07 '16 at 19:39
@Timo can't use it as a non-static method because I want to ensure the good practice of class methods to use this. — CanIHazCookieNow, Dec 07 '16 at 19:45
@trincot I know both are correct but I'm not sure, in a performance/readbility/good practice is the best way to implement (although I don't have to restrict myself to just one way of doing this) — CanIHazCookieNow, Dec 07 '16 at 19:47
It's as simple as this: If you intend to make methods that are to be used by instances of `A` or whatever instances inherit from it, simply create a regular instance method. If you'd like to create methods that pertain to the object itself, create a static method. — Carl Edwards, Dec 07 '16 at 19:50

score 2 · Answer 1 · edited May 23 '17 at 11:45

2

I would assume the fact that I'm extending a class would allow me to access all of its own methods

You actually can do that. Just call C.testMethod2() instead of A.testMethod2() (or even use this.constructor.testMethod2()).

Defining functions that have nothing to do with a particular instance on the prototype or even inside the constructor is a bad practise, don't do that.

edited May 23 '17 at 11:45

Community

1
1

answered Dec 07 '16 at 20:12

Bergi

630,263
148
957
1,375

How come I can do C.testMethod2() but not this.testMethod() ? I think this just shows I need to grab a book... – CanIHazCookieNow Dec 07 '16 at 20:51
Static methods are methods of the class (`A`, `C`) itself, not of the instances (`new A`, `new C`). If `this` refers to an instance, you only can access the properties that it inherits from the prototype objects (`A.prototype`, `C.prototype`). – Bergi Dec 07 '16 at 21:09

ES6 React - static method vs constructor

1 Answers1