Over the past few days, I’ve come across a couple of interesting JavaScript topics that others might find useful. For those of you not interested in all the gory details, I will give you the short list:
In JavaScript function calls, the “this” variable points to whatever class/function called the current function. Even if your function belongs to a class, the “this” variable will point to outside of the class if that function is called directly from somewhere else.
To my knowledge, there is no way to directly access members of a parent class in JavaScript. You have to pass a reference to the parent class to whatever child classes it creates.
In JavaScript you can access any member of an object with array notation (document.formname[“elementName”] for example). This is very useful for referencing parts of objects when you don’t necessarily know what they will be called.
Okay, with that out of the way, those of you interested in all the details can feel free to read on.
]]>
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:
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.
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.
]]>
It appears that the announcement of Google’s new Web browser, Chrome, was sent out bit early in comic book form. What got my attention, being a comic geek, was that the comic was drawn by none other than the awesome Scott McCloud, creator of Understanding Comics.
