JavaScript OOP Tips

Recently I’ve been working on some general JavaScript classes to work with Ajax and XML. Due to the asynchonous nature of Ajax requests, I had to give the Ajax class the ability to communicate with other classes via callback functions.

Initially, I simply stored the callback function to use when the Ajax request was complete as a member of the Ajax class. At this point, my classes looked something like this (these aren’t “true” JavaScript classes; they’re just there to give you an idea of what the class structure looked like):

// Class to handle XML.
class XML
{
    XML(file)
    {
        // Start a new Ajax request, tell it to call this class's ajaxCallBack function when finished.
        this.ajax = new Ajax(file, this.ajaxCallBack);
    }

    ajaxCallBack(request, status)
    {
        // Process results here.
        this.getElements("search"); // When this was called, JS threw an error statying that this method was not a part of the class.
    }

    getElements(searchString)
    {
        // Get some elements from the returned XML here...
    }
}

// Class to handle Ajax.
class Ajax
{
    Ajax(fileToGet, callBackToUse)
    {
        // Make an Ajax request and assign it to a member variable of the Ajax class.
        this.callBack = callBackToUse;
        this.response = // ... 
    }

    onComplete()
    {
        this.callBack(/* args here */);
    }
}

This worked fine, until the ajaxCallBack() function tried to call another member of the XML class using the “this” keyword. To my surprise, “this” no longer pointed to the XML class, instead it pointed to the Ajax class! In the world of JavaScript, this does actually make sense. What happens is that when the Ajax class calls ajaxCallBack(), it becomes the “owner” of the callback function, not the XML class. This causes the “this” keyword to point to the Ajax class instead of the XML class, which is not the intended behavior.

So how do we solve this? We simply have to access the ajaxCallBack() function by referencing the XML class directly, which will then cause the “this” keyword to point to the XML class. In other words, we have to keep track of the XML class as the “parent” class, and then call its function like this:

 this.parentClass.ajaxCallBack();

Instead of like this:

 this.callBack();

The only reliable way that I have found to track the parent of a class in JavaScript thus far is to pass it into the class’s constructor and store it as a member of that class. It would be nice to be able to access the parent of a class directly, but I haven’t found a reliable way to do that yet.

So after modifying the class to store its parent it seemed as though I was done. However there was one more problem: I wanted the authors of other classes to be able to change the name of their callback function to whatever they wanted. This means that the callBack property of the Ajax class will not always be called “ajaxCallBack”. If I were writing another class, I could call it “jeremiahsAxajResult” for example.

This meant that I needed to dynamically call the function name of the parent class, and things like this.parentClass.this.callBack won’t work.

I decided to try a trick that I’d used before with dynamic form validation, where general validation can be used for different forms, whose field names are always different. To do this, instead of referring to each part of the form with object notation (document.formname.elementName) I referred to each part of the form with array notation (document.formname[“elementName”]). Using this trick, I could place a variable inside the array brackets and dynamically refer to any piece of the form that I wanted.

I tried this technique with my Ajax/XML classes and it worked, I could always use the callback function of the parent class, no matter what it was called. Now my function call looked like this:

 this.parentClass[this.callBack](request, status);

So the moral of the story is:

1. In JavaScript it can be difficult to access parent classes and properties in them and you have to be careful about where your functions are called from when using the “this” keyword.

2. In JavaScript you can access any member of any object using array notation, and this is a good trick when you dynamically reference parts of objects.