We have the following case: we need to execute an array of functions. The second one has to execute after the first one finishes, the third after the second and so one. The scenario gets a bit more complicated when wee need some delay between functions. So we have to execute function 1, then after it finishes, wait for 200 ms, and execute function 2, then after another 500 ms execute function 3 and so on.

So the code is the following:

function runSequence(arr, scope, delay){
	arr.push(function(){});
	delay = delay || 0;

	var i = 0,
             len = arr.length;

	for(;i < len-1; i++){
		(function(index, thisObject){
			arr[index] = function(){
				var isFn = !!thisObject.call,
					fn = isFn? thisObject : thisObject.fn,
					fnScope = isFn? scope: thisObject.scope,
					fnDelay = isFn? delay : thisObject.delay,
					fnToExecute = function(){ fn.call(this); arr[index+1](); }

                                fnScope = fnScope || this;
				fnDelay? setTimeout(function(){ fnToExecute.call(fnScope) }, fnDelay) : fnToExecute.call(fnScope);
			}
		})(i, arr[i]);
	}

	arr[0]();
}

We can do the following:

runSequence([
	{ fn: function(){ console.log('executed immediately') }, delay: 0 },
	{
          fn: function(){ console.log('this was after 1500 ms, with scope: ', this.name) },
          delay: 1500,
          scope: {name: 'sequence running'}
        },
	{ fn: function(){ console.log('this was after 2s ') }, delay: 2000 }
], this)
/*
 * The first and the last functions above are executed in the scope of the code executing the runSequence function
 * The second function is instead called with the scope being the passed object, {name: 'sequence running'}
 */

or the following:

runSequence([
	function(){ console.log('first after 200ms') },
	function(){ console.log('yet another 200 ms') },
	function(){ console.log('the last fn at 200ms') }
], this, 200)
/*
 * A shorter form of the runSequence function call, with functions running at equal timeouts, in the passed 'this' scope
 */

This function can be useful when processing large amounts of data that would otherwise block the browser, or in cases when one would need to trigger ajax calls with a certain delay in between. I’m sure that there are other cases when this could prove useful.
In the case of processing large amounts of data, one could use this to fill up a (non-paginated) grid with data, in chunks of, say, 200 records.

Do you find this pattern useful?

Or do something smart. Like call the slice method from Array.prototype on the arguments, something like:

//this makes a copy of the arguments and returns a true array
Array.prototype.slice.call(arguments, 0) 

//pushes the value '5' in the arguments
Array.prototype.push(arguments, 5)
//this is not valid: arguments.push(5)

Well, maybe most of you expert JavaScript programmers have thought about this, and this is not a news. But, let’s share from our experience to the more novice/newcomers to JavaScript and show them the beauty of this language!

JavaScript is a great language! It’s expressive! It’s powerful! That’s why we love JavaScript.

Ext.ns('myapp.cars');

(function(){
    var Car = Ext.extend(Object,{
	color: 'red',
	description: {
	    gears: 4,
	    year: 1980
	},

	constructor: function(config){
	    console.log("car constructor");
	    Ext.apply(this, config)
	},

	getColor: function(){
	    return 'actual color ' + this.color;
	},

	getMake: function(){
	    throw 'unimplemented method';
	}
    })

    myapp.cars.Car = Car;
})()

// ---- another file here: myapp.cars.Bmw.js
Ext.ns('myapp.cars');

(function(){

    var BmwCar = Ext.extend(myapp.cars.Car,{

	color: 'blue',

	constructor: function(config){
	    BmwCar.superclass.constructor.apply(this, arguments)
	},

	getMake: function(){
	    return "This is a BMW"
	}
    })

    myapp.cars.Bmw = BmwCar;
})()

First of all notice

(function(){
     // your code here
})()

We never want to populate our global “namespace” of JavaScript objects. So, we put all our code in a anonymous function, which is not only defined, but also executed. We will export only what’s needed, that is, the public API of our app.
Second, notice

Ext.ns('myapp.cars');

outside of our anonymous-function-that-hides-it-all. It is a shorthand for Ext.namespace. What it does is the following: it creates an object myapp, if it doesn’t exist. Then, it creates a property on this object (the newly created or the existing one) named cars, only if it doesn’t exist. I recomend putting a call to Ext.ns('...') at the beginning of every js file, and then, in the anonymous function call, attach what you need to into this public namespacing object. So all your files should look something like

Ext.namespace('myapp.package.subpackage');
(function(){
    var MyClass = // class definition
    ....
    // end of class definition

    //in this way we "export" MyClass to be visible publicly
    myapp.package.subpackage.MyClass = MyClass
})()

Now let’s see our class hierarchy. Use Ext.extend to extend from an existing Object. If you don’t have a specific superclass you want to extend, just extend Object. Then, as a second parameter, provide an object literal, which can contain properties and/or functions. All these properties/functions will be placed in the prototype of your newly created class, overriding (if it is the case) the properties in the prototype of the base class. Notice Ext has a special function, named constructor, which is called when objects are instantiated. If you define a constructor in the subclass, don’t forget to call the superconstructor of the base class (if you want – and probably you do).

constructor: function(config){
   BmwCar.superclass.constructor.apply(this, arguments)
}

Notice how methods from the base class are called: <current_class>.superclass.<method_name>.apply(this, arguments). You could also call it with call and other arguments, but in this way, you just forward the existing arguments, whithout having to explicitly name them.
In this example, in the constructor of the Car class we use a very powerful feature in JavaScript and ExtJS, dynamically applying properties to objects

constructor: function(config){
    console.log("car constructor");
    Ext.apply(this, config)
},

Take all the properties given in the config and apply them to the car object. For instance, you could have a code like:

var bmw = new myapp.cars.Bmw({
	color:'black',
	getColor: function(){
	    return "my custom color";
	}
});

Not only does Bmw overrides the color attribute for the car, but this bmw instance in particular overrides the color attribute to ‘black’. Also override the getColor method. This gives a tremendous flexibility, allowing more than one level of overriding! Subclass overrides superclass, and object instance(of subclass) overrides subclass. So basically you can end up building custom bmw instances, each having it’s own implementation of getColor. Generally you won’t do method overriding at instance level, but you will want to override values in the properties of an instance. So calling your constructor with a config object is very useful when wanting to set values of multiple fields at once.

Another interesting feature is overriding a method at instance level, and also using the previous implementation of the method. Take a look:

var bmw = new myapp.cars.Bmw({
	color:'black',
	getColor: function(){
	    console.log('getColor: ');
            //use previous implementation - notice apply
	    return myapp.cars.Bmw.prototype.getColor.apply(bmw) + ' custom color';
	}
});

Notice the call to the getColor method from the prototype of the Bmw class, applied to the current instance, in order to keep the context of the method call.
All these features of prototypal inheritance with JavaScript in general and ExtJS in particular, allow a great flexibility and many levels of customization.

To recap, don’t forget that when you override a method, if you want to use the implementation in the base class, you have to use something like:

 var BmwCar = Ext.extend(myapp.cars.Car,{
    getMake: function(){
        //use implementation in the superclass and forward any arguments
        BmwCar.superclass.getMake.apply(this, arguments)
    }
})

where superclass is a property set by ExtJS when creating the class, for easy reference to the superclass.

Pitfalls

There are some pitfalls you should be aware of. These appear because of the nature of the prototypal inheritance.
Don’t forget that when you write:

var subclass = Ext.extend(MySuperclass, {
    property1: value1,
    property2: value2,
    method1: function(){ ... },
    method2: function(){ ... }
});

all the properties of the config object given as the second argument to the Ext.extend function go into the prototype of the subclass. Let’s have some examples to see what can happen. Suppose for this example the myapp.cars.Car implementation above and the following Bmw implementation:

var BmwCar = Ext.extend(myapp.cars.Car,{
	model: {
	    name: 'sedan'
	}
})

Now make the following tests:

var bmw = new myapp.cars.Bmw();
var secondBmw = new myapp.cars.Bmw();

secondBmw.color = "orange";
secondBmw.model = { name: 'hatchback'}

//typical behavior
console.log(bmw.color); // outputs "red"
console.log(bmw.model); //outputs Object { name="sedan"}

var bmw = new myapp.cars.Bmw();
var secondBmw = new myapp.cars.Bmw();

//NOTICE change of model name also affects the first bmw instance
secondBmw.model.name = 'hatchback'
console.log(bmw.model); //outputs Object { name="hatchback"}

So we modify the model.name attribute on the secondBmw and it gets propagated to the first bmw instance. Why? Well, the model object belongs to the prototype of the Bmw class, so it is shared between all the bmw instances. Any change in properties of this object affects all instances of the class!
But notice in the first test, changing the model object doesn’t affect all instances of Bmw. This is because the instruction

secondBmw.model = { name: 'hatchback'}

changes the model property on the secondBmw instance to refer to a whole new object, independent of the class prototype.
So you have to be warned. It’s okay to put in the prototype properties which are JavaScript primitive types (strings, numbers), but you have to take special care when dealing with objects! They are allowed, but you should be aware of the facts explained above and handle with care.

This is a summary of prototypal JavaScript inheritance with ExtJS. Play with it, try it, use it!
Have fun!

Well, let’s do something practical now. I want to intercept every log message in my js application. As people usually use Firebug (and if you’re not using it… well, you should, so start right here), the javascript code is populated with console.log or console.warn messages. Say we want to execute a function before and after console.log is called. Test the following code within firebug.

var backup = console.log;

function beforeLog(){
    backup('before log:',arguments);
}

function afterLog(){
    backup('after log:',arguments);
}

console.log = function(){
    beforeLog.apply(this,arguments);
    backup.apply(this,arguments);
    afterLog.apply(this,arguments);
}

console.log('hello','world');

In the first place, make a backup to the function we want to intercept.

Second, just redefine the function… and we usually want to execute the old function (so here is where we need the backup) and perform some additional things as well. Placing the code at the beginning of your coolest app changes the behaviour of all the log messages you have.

I found this useful when going from a development environment to a live environment. The best choice would be to use a build system to comment out (or even better, delete) all the console.log() calls. But a quick fix when going live is the following:

if (!window.console){
   /*
    * for users who do not have firebug installed,
    * just define a "mock" console object
    */
    window.console = {};
}
window.console.log = function(){};
console.log('hello world'); // call to an empty function

This is just a simple use of dynamically changing the behaviour of existing code. What about you? How do you intercept function calls? Waiting for some nice suggestions.