This and that

Gotta catch them all.

In a recent Hack Reactor paired programming section I had the fortune of partnering up with an up and coming Pokémon Go star Hoon Bae.

We collaborated on a project requiring us to take a Functional JavaScript class and turn it into a Pseudo Classical implementation. We also needed to have three classes delegating to our original class. In our master class we used a mouseover event to turn all instances of the various dancing Pikachu classes into a Pikachu caught in a Poké Ball. This provided the most interesting learning experience for us. We were given reason to implement “this” in a new way. Underneath is the relevant parts of code needed for our mouseover event.

var Dancer = function(x, y, z){

 this.$node = $(‘<span class=”dancer”><img src=”assets/pikachucircleDancer_small.gif” id=”image”></span>’);

var that = this;

this.$node.mouseover(function() {
 that.catch();
 });

};

makeDancer.prototype.catch = function(){
  this.$node.stop();
  this.$node.children('img').attr("src", "assets/pokeball.gif");
};

Storing this as the variable “that” in one scope allowed us to use “that” in a new context without any confusion about the context we were referencing. The takeaway for us was simplifying our use of this to quickly be able to “catch” our Pikachu in a Poké Ball upon mouseover.

Link to Hoon Bae’s Post: