Javascript closure and pre post function handlers

Question

Regarding the question on SO How to overload the calling process of any function. The accepted answer is in fact not working as is. The problem lies in the fact the passed in variable "fn" is a string instead of a function. But if I changed fn() to NS[fn] (), it would create an infinite loop. Another way is to use a var inside the for loop to keep track of the old values of foo and bar, but it won't work too because of closure. I ended up adding a new array to keep track of the old functions as below:

NS = {
   foo : function(){ console.log('foo'); },
   bar : function(){ console.log('bar'); }
};

// <-- new code goes here

NS.foo();
NS.bar();

// new code below, that should go after definitions but before the calls

(function(){

   var pre = function(){ console.log('pre'); },
       post = function(){ console.log('post'); };

   var temp = new Array();//Added line 1

   for (var fn in NS) {
      temp[fn] = NS[fn];//Added line 2
     //original answer: NS[fn] = (function(fn){ return function(){ pre(); fn(); post(); }; })(fn);
      NS[fn] = (function(fn){ return function(){ pre(); temp[fn](); post(); }; })(fn);
   }

})();

NS.foo();//Added line 3
NS.bar();//Added line 4

My question is: are there other ways to do similar thing? I am not talking about a caller function as given by another answer to the quoted question. It is a good one. But I am just trying to find a different approach going the same way as the above given answer. Thanks a lot.

Ruan Mendes · Accepted Answer · 2012-03-26T16:59:46.253

You weren't passing the function into the anonymous block, you were just passing the name of the property holding it. Pass the whole function and it should work http://jsfiddle.net/mendesjuan/bpq8j/

(function(){

   var pre = function(){ console.log('pre'); },
       post = function(){ console.log('post'); };

   for (var propName in NS) {
      NS[propName] = (function(fn){ 
        return function(){ 
          pre(); 
          fn(); // could be fn.call(NS) if you need 'this'
          post(); 
        }; 
      })(NS[propName]);
   }

})();

I changed your code slightly, abstracting the idea of pre/post into a function. http://jsfiddle.net/mendesjuan/bpq8j/1/

function addPrePost(fn, pre, post) {
    return function() {
      pre();
      fn();
      post();
    }
}

(function(){
   var pre = function(){ console.log('pre'); },
       post = function(){ console.log('post'); };
   for (var propName in NS) {
      NS[propName] = addPrePost(NS[propName], pre, post);
   }

})();

Javascript closure and pre post function handlers

1 Answers1