Classes in JS Q&A

questions-actor-player.js

class Actor {
 constructor (x, y, image = sun1) {
   this.x = x
   this.y = y
   this.image = image
 }
 render () {
   context.drawImage(this.image, this.x, this.y)
 }
}

/* Q: Can i override the existing x and y extended from Actor by stating them,
      A: TIMTOWTDI https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it
         Your solution works perfectly. The player will always spawn in a random location.
   Q: or should i put them inside super?
      A: The signature of the super class (i.e. Actor) construtor does not need to match
         the signature of the sub class (i.e. Player). Since you are forcing the x and y
         member properties to always be random, you could omit them from the
         arguments list of Player's constructor.
         E.g.
         ```js
         class Player extends Actor {
           constructor (image = player) {
             const x = getRandom(minX, maxX - image.width)
             const y = getRandom(minY, maxY - image.height)
             super (x, y, image)
             this.x = x
             this.y = y
           }
           // ...
         ```
   Q: or in the constructor() ?
      A: There's one small bug: There are not this.width nor this.height properties in
         your Actor nor Player classes... I think you meant this.image.height/width but
         those properties will only be available once the images have been loaded (long
         after setup() runs).
         Don't try to get this perfect. Just hard-code it for now. Learning where to take
         short cuts vs perfecting the code is an important part of real-world engineering.
   Q: or just leave it in render?
      A: No. The render function is only reading from our state (the actors array).
         The renderer never modifies anything in the state. It is a one-way data flow.
 */
class Player extends Actor {
 constructor (x, y, image = player) {
   super (x, y, image)
   this.x = getRandom(minX, maxX - this.width)
   this.y = getRandom(minY, maxY - this.height)
 }
 render () {
   context.drawImage(this.image, this.x, this.y)
 }
}

/*  Q: In the setup() function can i still access this.width and this.height?
    A: `this` refers to the instance of a class only in its constructor or methods.
       The properties of the `actor` instance can be accessed here as `actor.x` or
       `actor.y` as we do with any other object.
 */
function setup () {
 for (var i = 0; i < 10; i++) {
   var x = Math.random() * 100
   var y = Math.random() * 100
   var actor = new Actor(x, y)
   actors.push(actor)
 // }
 // The above comment makes this loop also add ten players ... oops?
 var player = new Player(0, 0)
 actors.push(player)
}