Click here to Skip to main content
Click here to Skip to main content

Change functionality or behavior of a function in JavaScript

, 10 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.

Introduction

Some time in JavaScript we may need to exchange fundability of functions between them. Well truly speaking, it is obviously not the best practice. But sometime this tick may turn into benefits, if we use them in low counts and in controlled manner.

Background

Let's say we have two functions 'showFirstName' and 'showLastName'

Now we want 'showFirstName' to act exactly as 'showLastName', Means replace the functionality of 'showFirstName' with 'showLastName's. And this is just only for a certain period of time.

Using the code

here is our two functions,

function showFirstName(name){
    alert('first Name: ' +name);
}

function showLastName(name){
    alert('last Name: ' +name);
}

To assign functionality of 'showLastName' to 'showFirstName', we just have to do

showFirstName = (function(){
    return function(name){
        return showLastName(name);
    }
})();

After this exchange process if we call the 'showFirstName' it would work exactly like 'showLastName'

showFirstName('Nitol')    //alerts: 'last Name: Nitol', instead of 'first Name: Nitol' 

 

Need to be carefull !!!

- Once we made this exchange, 'showFirstName' would work as 'showLastName' all the time, from any scope.

- The default behavior of 'showFirstName' would be lost forever. Unlace we save its functionality to a variable, and at the end of our work,  reassign its  default using the variable.

/*backup showFirstName's functionality*/
var _realFunction = showFirstName;

/*apply functionality of function showLastName to showFirstName*/
showFirstName = (function(){
    return function(name){
        return showLastName(name);
    }
})();


//
//Do what we want to do
//


/*reset functionality of function showFirstName back to itself*/
firstName = (function(){
    return function(name){
        return _realFunction(name);
    }
})();

 

For quick review check http://jsfiddle.net/f4x6f/ or use

<input type='button' value='Show' id='btnShow'/>   shows current functionality of function showFirstName
<br>
<input type='button' value='Change' id='btnChange'/>   apply functionality of function showLastName to showFirstName
<br>
<input type='button' value='Reset' id='btnReset'/>   reset functionality of function showFirstName back to itself
<br>
var _realFunction = null;

function showFirstName(name){
    alert('first Name: ' +name);
}

function showLastName(name){
    alert('last Name: ' +name);
}

$(document).ready(function(){
    /*backup showFirstName's funcationality*/
    _realFunction = showFirstName;

    /*apply functionality of function showLastName to showFirstName*/
    $('#btnChange').click(function(){
        showFirstName = (function(){
            return function(name){
                return showLastName(name);
            }
        })();
        $('#btnShow').trigger('click');
    });   
     
    /*reset functionality of function showFirstName back to itself*/
    $('#btnReset').click(function(){
        firstName = (function(){
            return function(name){
                return _realFunction(name);
            }
        })();
        $('#btnShow').trigger('click');        
    });   

    /*shows current functionality of function showFirstName */
    $('#btnShow').click(function(){
        showFirstName('Dipon');
    });
});

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DiponRoy

Bangladesh Bangladesh
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 10 Jul 2014
Article Copyright 2014 by DiponRoy
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid