Archive for the ‘JavaScript’ Category

The cat ate my Scope

Posted July 17, 2008
Filed under: JavaScript, Tips | Tags: , , , ,
* Leave a Comment

If you are one of these JavaScript developers who likes to use an Object Oriented approach, using JavaScript constructors, I’m sure you have had a lot of headaches when you have tried to call some object’s method from setInterval() or setTimer() JavaScript functions. The problem is that when your method is called, it is called from the window object scope, losing your object’s one.

To avoid this problem we will introduce a solution in two steps, the first is to obtain a reference to your object instance, which is enough for some needs, and the second is to call your method from the object’s scope, which is needed to access the private part of your object. Here we go:

1. Remember that in JavaScript functions can have properties too, so you can save your object instance in a property of your favourite method and then access this property trought arguments.callee object which is a reference to the current function. See the following example:

//Object constructor
var MyObject = function(){
  this._periodicMethod = function(){
    var objectInstance = arguments.callee._scope;
    //Do the timed action over the objectInstance..
  }
  this._publicMethod._scope = this;

  //Set the timer
  window.setInterval(this._publicMethod,10000); //Call the method every 10 seconds.
}

2. Using this method you have obtained a reference to your object, so you can already access its public interface. That could be enough for some uses, but sometimes we need to update private parts of our objects, so we actually need to operate from within the object. To ensure your method is working with the correct scope you can add the following check to your method code:

this._periodicMethod = function(){
  if(this != arguments.callee._scope){
     return arguments.callee.apply(arguments.callee._scope,arguments); 
  }
  //Do the private stuff…
}

Take care with this last method, as it won’t work with older navigators (IE 5.0 or less) whose don’t support the apply method. You can see other techniques to recover your scope in this blog, but this one is the fastest and easier.

Object oriented JavaScript

Posted July 10, 2008
Filed under: JavaScript, Tips | Tags: , ,
* Comments (2)

JavaScript was not invented in an Object Oriented way as most programmers know it, that is there is no concept of ‘class’ in JavaScript. Anyway we can use and create objects as a list of key and values in the next way:

{
  field: ‘value’,
  operation: function(){
    //Do something
  }
}

We can go a step beyond simulating the constructors we all know from other languages, the trick is to create functions which make object instances for us. The first thing we have to know is that in JavaScript every function has a context object called this, and the second is that it exists a new operator to create new function instances. Using both concepts we can construct a function which acts as a class. An example is better than a thousand words, I think its enough clear:

var MyClass = function(constructorParam){      

  this.publicField = constructorParam;

  this._privateField = constructorParam; //Note the _ symbol to make it private

  this.publicMethod = function(param1,param2){
    this._privateMethod(param1); //The function can only be called from within object’s functions
     //Do something else..
  }

  this._privateMethod = function(param1){
    //Do something private
  }
}

Once that code is included in your page you can use your fake class to work in JavaScript in a fashionable object oriented way:

var myInstance = new MyClass(’some value’,’some other value’);
var theSomeValueString = myInstance.publicField;
myInstance.publicMethod(theSomeValueString,‘a third value’);

I wish this trick help you to mantain your AJAX code a bit more organized. See you soon!