Function overriding is an important feature in any programming language. In advanced languages like .NET, Java, it can be accomplished easily through a set of key words. But this is not the same in JavaScript and this is where closures come to your rescue.
This article is not something new. Infact, it is a part of every JavaScript geek's toolkit, which does not have much exposure. So just wanted to throw some light on it. (If you are not very clear of closures, please visit this article and come back).
Let us take a vey simple example. Assume that you have a button, for which a click event is bound.
<input type="button" id="btnTest" value="Test Button"/>
var originalClick=function(e){
e.preventDefault();
console.log('original button click');
};
$(document).ready(function() {
$('#btnTest').click(originalClick);
});
Now, if there is some requirement change and you need to add extra functionality to this button click, then instead of messing up its method, you can extend the originalClick method using closures, like this:
(function() {
var extendedClick= originalClick;
originalClick= function() {
console.log('Extending Test Button click');
return extendedClick.apply(this, arguments);
};
})();
The above code is nothing but a self executing anonymous function (gets executed immediately after its definition). In the first line, we are storing the actual function in a variable 'extendedClick' (we'l use this later). Then we are creating a function with the same name as our original button click function (originalClick).
In the inner function, we are writing our extended logic and executing 'extendedClick' using .apply() method. (passing 'this' as first param to .apply() makes sure that the context is still the same as original method). So the entire code would be:
var originalClick=function(e){
e.preventDefault();
console.log('original button click');
};
(function() {
var extendedClick= originalClick;
originalClick= function() {
console.log('Extending Test Button click');
return extendedClick.apply(this, arguments);
};
})();
$(document).ready(function() {
$('#btnTest').click(originalClick);
});
Thats it! Your method is now overridden!! Ok, now let us see what exactly happened.
As per the definition of closure, we have 2 functions which are nested and extendedClick is a local variable. The outer function is a self executing one. During its execution, ‘extendedClick’ is obviously available inside the inner function ‘originalClick’, since it is defined in the parent context. The magic of closure comes after the outer anonymous function is executed. How?
When you click on button, the overwritten ‘originalClick’ function will be fired, which will print the console statement ‘Extending Test Button click’. Then the ‘extendedClick’ function, which has a copy of the first ‘originalClick’ function, will be fired. But why is it still accessible? The variable ‘extendedClick’ is private to the outer anonymous function, which means, it should have been destroyed after the outer function executed. But it is still accessible, which is the power of closure.
(Q) How can I override core jQuery methods using this concept?
(A) Ben Nadel explained it clearly in his article, which I happened to see while I started this article. It is the same concept, but still I wanted to write and explain in layman’s terms. Thanks to Ben for his great blog posts and for quick turn out in times of need.
Using this technique, you can override even $(document).ready function! This would help you the most when you are in a maintenance project and have to do bulk changes in code with minimal impact.
Happy coding :)