Function invoked event in JS?

Question

Is it possible to bind a function to another function on invoke? So for example, it would go something like this:

function a(){...}
function b(){...}
b.bind("onInvoke","a");

So when b is called, a is also automatically called.

---

EDIT: OK OK, to clarify, this is not a question on chaining. The idea is to find an elegant way to do event binding. Observe the normal "non-elegant" way with normal function call-back:

function handler(){...}
function caller1(){handler(); ...}
function caller2(){handler(); ...}
function caller2(){handler(); ...}
// More callers all over your website everywhere else

That works right? But what if I have caller all over the place? It's hard to organize or change things.

Now observe the superior solution! (If one exist)

function handler(){...}
// Caller make no reference to handler on creation
function caller1(){...}
function caller2(){...}
function caller3(){...}
// Caller function are still all over the place, all over your website
// Event handler registered later in one location here, doesn't matter where they are phsically
caller1.bind("onInvoke",handler);
caller2.bind("onInvoke",handler);
caller3.bind("onInvoke",handler);

So very much like your normal HTML - JQuery event registration. You don't write onClick on every image the user might click on (which are all over the place), it would be way too troublesome to organize that! You just write one simple

 $("img").bind("onClick",click_handler);

for your entire site. This is the jist of what I am looking for, except for JS functions.

I hope that clarify things.

---

EDIT 2: Need to work with IE7!!! JavaScript 1.8.5 is great and everything, but nothing support it right now.

Answer 1

You can do that with an aspect-oriented approach. Here is a simple example:

Attach call to a() to function b():

var _b = b;
b = function(){
   _b();
   a();
}

Now call b():

b();

See it in action here: http://jsfiddle.net/eZ9wJ/

Answer 2

There are various solutions depending on how much you want to architect. A simple and flexible approach is to create a chaining utility function:

function chain() {
   var args = arguments;
   return function() {
      // loop through arguments and invoke all functions
      for(var i = 0; i < args.length; i++) {
         if(typeof args[i] == "function")
            args[i]();
      }
   }
}

What this is doing is returning a new function that will call the provided functions in sequence. Use it like this:

var myChain = chain(b, a);
myChain();

Answer 3

You can use callback:

function a(){
  // some code here
  b();
}
function b(){...}

Or observer pattern - http://www.michaelhamrah.com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

Answer 4

JavaScript 1.8.5 / ECMAScript 5 does indeed define a bind function, but it doesn't do what you describe above; it allows you to specify what the this context will be when it is invoked, and, optionally, allows you to hard-code certain arguments—curry.