JavaScript: Inherit static object like static primitive

Question

I have the following Code:

class Base {
 static id = 5;
 static arr = [];
}

class A extends Base {}
class B extends Base {}

This gives every sub-class its own static id property:

A.id++;

console.log(A.id) : 6  (Only this one got increased)
console.log(B.id) : 5
console.log(Base.id) : 5

However this is not the case for Objects. When the Subclass gets created, a reference to Base-Class's Object is passed, instead of (in the case of Primitives) a simple copy. This gives the following result:

A.arr.push('a');

console.log(A.arr) : ['a']
console.log(B.arr) : ['a']     (I want this to stay empty)
console.log(Base.arr) : ['a']  (I want this to stay empty)

How would I have to change static arr = []; so that each sub-class gets its own static array?

Just put static arr = []; in class A and class B as well. — Bergi
– Bergi, Commented Aug 15, 2021 at 19:04
What are you using arr and id for? This smells like a design issue. What do your subclasses represent? — Bergi
– Bergi, Commented Aug 15, 2021 at 19:04
"I want to have a List of Running Instances" - well, you shouldn't store these in static properties of the respective class. What if you want to have a separate list of "running" instances for some other purpose (testing, representing remote games, etc)? Store these in your application, not on your class; that way you can create multiple applications from the same code. — Bergi
– Bergi, Commented Aug 15, 2021 at 19:18
Also notice that Game.arr should contain all running Game instances, no matter what subclass they have. If you want a separate list that contains only TicTacToe games, make a separate list. It's not the responsibility of the Game class to do that. — Bergi
– Bergi, Commented Aug 15, 2021 at 19:19
And last but not least, reconsider whether an inheritance hierarchy Game -> TwoPlayerRoundBasedGame -> TicTacToe is really the best design. Maybe they should be mere interfaces? Maybe they should be mixins? Maybe you should use composition instead? — Bergi
– Bergi, Commented Aug 15, 2021 at 19:20

Bergi · Accepted Answer · 2021-08-15 19:22:52Z

1

A.arr is as distinct from B.arr as A.id is from B.id. The issue is that A.id++ is equivalent to A.id = A.id + 1, which replaces the value of A.id with a new value. A.arr.push('a') does not replace the contents of A.arr, which is a reference to the same object in B.arr.

This has nothing to do with classes or static members. Observe:

let a = [];
let b = a;
a.push(1);
console.log('a refers to the same object as b; change that object, both a and b change');
console.log(`a=${a}; b=${b}`);
b = [...a, 2];
console.log('b refers to a different object from a');
console.log(`a=${a}; b=${b}`);

I assume you are asking how to assign a new object to every subclass. Since AFAIK JavaScript doesn't have subclass hooks, I believe the only way would be to do it manually for each subclass.

class Base {
  static arr = [];
}

class A extends Base {
  static arr = [];
}
class B extends Base {
  static arr = [];
}

A.arr.push(1);
B.arr.push(2);
console.log(`A.arr=${A.arr}; B.arr=${B.arr}`);

Another approach is to use a static getter to do it for you. For example, this might work:

class Base {
  static _arr = null;
  static get arr() {
    return (this._arr ??= []);
  }
}

class A extends Base {}
class B extends Base {}

A.arr.push(1);
A.arr.push('a');
B.arr.push(2);
B.arr.push('b');
console.log(`A.arr=${A.arr}; B.arr=${B.arr}`);

edited Aug 15, 2021 at 19:22

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Aug 15, 2021 at 18:56

Amadan

200k23 gold badges252 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebastian Simon Over a year ago

“A.arr is as distinct from B.arr” — A.arr === B.arr; they’re identical. Saying that they’re distinct is misleading.

Bergi Over a year ago

@SebastianSimon It's "as distinct as", a comparison. Notice that also A.id === B.id. Yes, they're identical.

FireFuro99 Over a year ago

Thank you! I also had the idea of using static getters, but static get arr() {return []}; didn't work. But yours works perfectly, thank you!

Collectives™ on Stack Overflow

JavaScript: Inherit static object like static primitive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related