ES6 static members are inherited by child classes

Question

I have found that static members of a class are inherited by its child classes in JavaScript. I have tested it with Chrome 67.0.3396.62, FireFox 60.0.1 and NodeJS 10.1.0.

But isn't it weird that in OOP, static members and fields should belong to the class and not being inherited?

Is it a bug for JavaScript extends?

class A {
  static a () {
    console.log('==[static a]==')
  }
}

A.propA = { anything: '==[static data from A]==' }

class B extends A { }

console.log(B.a()) // "==[static a]=="
console.log(B.propA.anything) // "==[static data from A]=="

The same happens in PHP [and apparently Java](https://stackoverflow.com/q/10291949/218196), so not that strange. — Felix Kling, Jun 06 '18 at 06:31
I don't really get why the data should not be "inherited". Anyway it's simpler to think about prototypes than about vague concepts of "OOP". — Denys Séguret, Jun 06 '18 at 06:31
A class that inherits from another has access to all of its properties(including its static members) — Manos Kounelakis, Jun 06 '18 at 06:32
So where did class B actually find its inherited `propA` property? Through which part of the prototype chain? — momocow, Jun 06 '18 at 06:37
This may help you: https://www.bennadel.com/blog/3300-static-methods-are-inherited-when-using-es6-extends-syntax-in-javascript-and-node-js.htm — Terry Wei, Jun 06 '18 at 06:38
Thanks for all of comments. Maybe it just because I've misunderstood the concept of inheritance and static members. — momocow, Jun 06 '18 at 06:41

score 1 · Accepted Answer · answered Jun 06 '18 at 18:21

Is it a bug for JavaScript extends?

No, it works exactly as designed.

So where did class B actually find its inherited propA property? Through which part of the prototype chain?

Let us clarify two things first:

Functions are objects, which implies that they have a prototype. By default that's Function.prototype, which is where methods like .call and .apply are defined.
"Static members" are just properties on the function object

When doing

class B extends A {}

then a new function object for B is created, which has the value of A as its prototype, not Function.prototype and hence all properties of A are accessible through B.

We can easily verify this:

class A {}
class B extends A {}
console.log(Object.getPrototypeOf(B) === A);

Thanks for your answer, I think its more detailed than Isaac's one. Give me some time to have it digested and maybe it'll be a more appropriate answer to my question. — momocow, Jun 07 '18 at 03:14

score 0 · Answer 2 · answered Jun 06 '18 at 06:37

0

This is a very good link to understand how static works with the below code as example given.

class Triple {
  static triple(n) {
    if (n === undefined) {
      n = 1;
    }
    return n * 3;
  }
}

class BiggerTriple extends Triple {
  static triple(n) {
    return super.triple(n) * super.triple(n);
  }
}

console.log(Triple.triple());        // 3
console.log(Triple.triple(6));       // 18

var tp = new Triple();

console.log(BiggerTriple.triple(3));
// 81 (not affected by parent's instantiation)

console.log(tp.triple());
// 'tp.triple is not a function'.

To direct answering your question:

Static method calls are made directly on the class and are not callable on instances of the class. Static methods are often used to create utility functions.

answered Jun 06 '18 at 06:37

Isaac

12,042
16
52
116

I don't get how this answers the OP's question. But maybe I don't understand their question. – Felix Kling Jun 06 '18 at 18:18
I have to admit that maybe I have accepted an answer too fast. But the tooltip of the grey check (before it turned to green) tells me "Click to accept this answer because it solved your problem or **was the most helpful in finding your solution** (click again to undo)". At the point, he showed me a trustable page for me to find the answer to my question, "Is it a bug that ES6 static members are inherited by child classes ". – momocow Jun 07 '18 at 03:11
@momocow: You may remove the answer mark as you see fit. I'm a new `JS` developer coming SO is just for the sake of finding challenges. My answer may not be perfect but just trying to provide one – Isaac Jun 07 '18 at 03:14
@Isaac Your answer did help me at that moment therefore you earned a green check but only until a more appropriate answer comes out. thx anyway. – momocow Jun 07 '18 at 03:19

ES6 static members are inherited by child classes

2 Answers2