What if? ES5 Classes

Hopefully this will be the first of many blog posts talking about the what ifs in JS. These will cover, normally I would do this but lets say I did this non standard convention for coding. What happens then?

Today we will be covering what happens when are working with JS classes and are not following normal conventions as to truly understand why we use classes the way we do in ES5

So to get started we will look at the code below

  /**
    Constructor function
  */
  function SpaceShip() {
  }

  /**
    Alteration of prototype by adding two methods
  */
  SpaceShip.prototype.shoot = function() {
    console.log("SHOOTING");
  };
  SpaceShip.prototype.beamMeUpScotty = function() {
    console.log("Teleporting");
  };
  var ship1 = new SpaceShip();
  

So as you can see we have a normal class called SpaceShip with two methods. So the first thing we want to look at is the difference between using the new keyword or not.

So the first thing to understand about the keyword new is that it creates an object, then gives it the prototype of SpaceShip.prototype, executes the constructor function with this set to the created object, and finally it returns the newly created object.

So my next question is, if we remove the new keyword to make the code look like this.

    var ship2 = SpaceShip();//undefined
  

Well looking at the value of ship2, as we would expect it has a value of undefined since we are not returning anything in the constructor function.

This made me wonder about what if a return value was specified in the constructor, what would happen to ship1 and ship2. So I modified the constructor code to look like this.

    function SpaceShip() {
      return "laserParts";
    }
    var ship1 = new SpaceShip();//Same object as before
    var ship2 = SpaceShip();//laserParts
  

Ok so nothing we did not expect from this, good. So now what if we were to try and run the methods with and without the new keyword.

    ship1.shoot();//SHOOTING
    ship2.shoot();//TypeError: ship2.shoot is not a function
  

Great so it looks like the new keyword with ship1 will allow the methods to be seen and accessed and as for poor ship2, it is simply a string of laserParts that does not have any of the methods we specified at the top for how a space ship should operate.

The last thing I was wondering about was the use of variables. So if I changed the constructor to have variables and I attempted to access them, then what would that look like for the methods and trying to access the public variables. So I modified the code to look like this.

    /**
      Constructor function
    */
    function SpaceShip() {
      this.holodeck = "occupied";
    }

    /**
      Alteration of prototype by adding one method
    */
    SpaceShip.prototype.getHolodeckStatus = function () {
      return this.holodeck;
    };
    var ship1 = new SpaceShip();
    var ship2 = SpaceShip();
    ship1.getHolodeckStatus();//occupied
    ship2.getHolodeckStatus();//TypeError: Cannot read property 'getHolodeckStatus' of undefined
  

So above I added a holodeck to the ship via a variable and simply created a method that returns whether I can go use the holodeck or not. It looks like as we expected, ship1 was able to return me the status because again it is a SpaceShip object, where as ship2 was undefined since I was not returning anything from the constructor and was not able to give me a report on its holodeck, because it was not a space ship.

So there you have it folks a quick study in some of the what if sanity checks for ES5 classes. Beam me up Scotty.