A few things we learned about javascript

Hi – my name is Ramuns and I joined MightyFingers in October. I previously spent my time as a professional web developer doing mostly php (but for some reason also loads of javascript).

So we have been working really hard in the last few months and I figured that maybe I should share some of the things about javascript that we have learned.

Now obviously a single post cannot possibly convey all the different nuances of JS that have struck us in the last few months, so I’ll make it as a series of small things that you might or might not find useful.

Class.extend

Some of you might have heard about Class.extend – this is a neat way of doing classical OOP in javascript. Now there is one thing that is missing in the implementation given in the link above – support for getters and setters.

Obviously there is probably not a lot of chance that you will have to use getters and setters in javascript, but sometimes it just seems like the best/only solution to a particular problem, in that case with the original Class.extend you’re SOL.

But worry not – help is on the way – in fact it’s quite a simple fix really – all you have to do is add a bit of code:

// Copy the properties over onto the new prototype
for (var name in prop) {
      //check if we're setting a getter or a setter
      var p = Object.getOwnPropertyDescriptor(prop,name);
      if ( p.get || p.set ) {
            Object.defineProperty(prototype,name,p);
      } else {
            // Check if we're overwriting an existing function

Obviously you should add another closing bracket before the close of the for loop

Call this._super in a callback function

Now also when using Class.extend you can call the parent function quite easily – just call this._super(); But what happens in a case when you wish to call that parent function inside a callback? Well, then you’ll have a problem – let me illustrate:

var SomeClass = ParentClass.extend({
  someFunction : function(){
    //do some code here and for example make an ajax Call using jquery
    $.get('/some_url/',null,function(data){
      //now that data is loaded we can call the someFunction of ParentClass
      this._super(); //this will fail
    });
  }
});

Now obviously there are some things that are wrong with the code above – first – well the this variable in the callback is in fact the XMLHttpRequest Object not an instance of SomeClass, ok, so we can fix that:

var SomeClass = ParentClass.extend({
  someFunction : function(){
    var that = this; //save reference to the current this object, so that we can use it in the callback
    //do some code here and for example make an ajax Call using jquery
    $.get('/some_url/',null,function(data){
      //now that data is loaded we can call the someFunction of ParentClass
      that._super(); //this will _still_ fail
    });
  }
});

What? Why will this still fail – well for a simple reason – the _super() function is only defined at the time execution time of the extended function, and calling that._super() is just a call to some undefined function on the SomeClass object. But worry not – we can fix that as well:

var SomeClass = ParentClass.extend({
  someFunction : function(){
    var that = this, _super = this._super; //save references to both the current object and the someFunction of ParentClass
    //do some code here and for example make an ajax Call using jquery
    $.get('/some_url/',null,function(data){
      //now that data is loaded we can call the someFunction of ParentClass
      _super.apply(that); //this will do what you want
    });
  }
});

The important bit is that we use the apply method of the function object to set the correct “this” object for the saved _super function.

That’s it for today – in the next instalment of this series we’ll see how to tame your callbacks when working in node.js.