Converting old school javascript entity into ES6 class

Question

Suppose I have a class like this:

let initPack = { player: [] };
let Player = function(param) {
  let self = {
    id: param.id,
    x: param.x,
    y: param.y
  }

  self.update = function() {
    self.x += 1;
    self.y += 1;
  }

  self.getInitPack = function() {
    return {
      id: self.id,
       x: self.x,
       y: self.y
    }
  }

  Player.list[self.id] = self;
  initPack.player.push(self.getInitPack());
  return self;
}

Player.list = {};

If I want to rewrite this to ES6 classes and put it into a separate file in node.js, such as:

module.exports = class Player {
  constructor(param) {
     this.id = param.id;
     this.x = param.x;
     this.y = param.y;
  }

  update() {
     this.x += 1;
     this.y += 1;
  }

  getInitPack() {
    return {
      id: self.id,
       x: this.x,
       y: this.y
    }
  }
}

How can I rewrite the rest of the class to make it work like the previous one? There are some static members and use of external variables in the original file. But I am not sure how to do that correctly in ES6.

How do you intend to handle initPack? Do you want it also to be a "static field" of Player? — castletheperson
– castletheperson, Commented Sep 4, 2016 at 6:14
Possible duplicate of Modern way to create static or Class variable for Javascript class — castletheperson
– castletheperson, Commented Sep 4, 2016 at 6:22
@4castle That's the problem I want to solve. initPack was not a static member but a global variable which was used in somewhere else in the project. Each time I instantiate a Player object it will be pushed into the static list and its initial data will be pushed into initPack's player array. Do I have to use an init method in the class? That seems a bit odd because now I have to init the class before I can use static members. — newguy
– newguy, Commented Sep 4, 2016 at 6:32
You can put the Player.list[self.id] and the push statement in the constructor. Just replace self with this. — castletheperson
– castletheperson, Commented Sep 4, 2016 at 6:37
There isn't any syntactic sugar for static properties in ES6. That custom init function is a workaround, but notice that it gets called and deleted from the class immediately after the class declaration, so you don't have to worry about initializing the static members later. — castletheperson
– castletheperson, Commented Sep 4, 2016 at 6:39

Bergi · Accepted Answer · 2016-09-04 11:27:49Z

1

You would put these things just inside the constructor or next to the class as you did before.

class Player {
  constructor(param) {
    this.id = param.id;
    this.x = param.x;
    this.y = param.y;

    Player.list[this.id] = this;
    initPack.player.push(this.getInitPack());
  }
  update() {
    …
  }
  getInitPack() {
    …
  }
}
Player.list = {};
const initPack = { player: [] };

module.exports = Player;

You should however notice that such global singleton storages are an antipattern, and even if you really need them you should better decouple them from the construction.

answered Sep 4, 2016 at 11:27

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

newguy Over a year ago

Yes I notice that. So I am looking for an OO way for this problem. I don't want to use global variable in a class module.

Bergi Over a year ago

Make an extra class for the lists and packs then and give them an addPlayer method that either takes a player instance as an argument or creates it. Instantiate the store where you need it (e.g. once per game).

Collectives™ on Stack Overflow

Converting old school javascript entity into ES6 class

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related