Question

I’m using javascript and jQuery. I have a “problem” that my web app has different views, and one action (like mouse click) should do different things in the different views.

I’ve created an ActionManager that get’s notified when an click event is fired. This manager object knows about the current view. Now I wan’t the actionmanager to be able to trigger a function in different objects.

What I’ve done is that the manager gets an instance of the different objects. This is done via a registration when they are initialized, where they register what kind of event they wan’t to handle and what kind of view they are responsible for.

the problem is that I want to make this as generic as possible, so that the actionmanager doesn’t need to know about what the name of the function that is gonna be called is. Then the different instances can have different function names without letting the actionmanager to know about it. I could let the registration part store the function name for that event in that instance by sending a reference to the function, but then I can’t do this:

myfunc : function (myinstance, myfunction)
{
    myinstance.myfunction();
}

that will assume that myfunction() exists as a function in myinstance, and not use the real function name which could be “onMouseClick”.

Edit:
Explanation for others seeing this tread and wondering why: The reason for my eventmanager is that I want to only add one click event on the elements that need it, and not changing the click event code. I also want to only call one method and run the code in that method. I don’t want to call several methods and let the methods decide based on the view if they should run or not.

Answer 1

If myfunction is a string:

You can do this:

myfunc : function (myinstance, myfunction)
{
    myinstance[myfunction]();
}

A function on an object is simply a function object assigned to a property on that object. In JavaScript, you can access properties in one of two ways:

1. Using dotted notation and a literal for the property name, e.g. x = obj.foo;, or
2. Using bracketed notation and a string for the property name, e.g. x = obj["foo"];

They do exactly the same thing, but of course the second form is much more flexible — designed, in fact, for exactly the situation you’re describing.

If myfunction is an actual function object:

You can do this:

myfunc : function (myinstance, myfunction)
{
    myfunction.call(myinstance);
}

That calls myfunction and ensures that this = myinstance during the call. All JavaScript function objects have a call function and an apply function. They both do the same thing (call the function with a specific this value), but they differ in how you pass arguments to the function:

With call, you pass them as discrete arguments in the call call:

func.call(inst, arg1, arg2, arg3);

With apply, you pass in an array of arguments:

func.apply(inst, [arg1, arg2, arg3]);
//               ^----------------^---- note that this is an array

E.g.:

var a = [arg1, arg2, arg3];
func.apply(inst, a);

Example of all of the above

Live copy – Since you said you were using jQuery, I went ahead and used it for convenience, but none of the above is related to jQuery, it’s how vanilla JavaScript works.

var myinstance = {
  foo: "bar",
  myfunction: function(arg1, arg2) {
    display("<code>myfunction</code> called, <code>this.foo</code> is: " + this.foo);
    if (arg1) {
      display("<code>arg1</code> is: " + arg1);
    }
    if (arg2) {
      display("<code>arg1</code> is: " + arg2);
    }
  }
};

// Without arguments
callUsingString(myinstance, "myfunction");
sep();
callUsingFunction(myinstance, myinstance.myfunction);
sep();

// With arguments
callUsingStringWithArgs(myinstance, "myfunction", ["one", "two"]);
sep();
callUsingFunctionWithArgs(myinstance, myinstance.myfunction, ["one", "two"]);
sep();

function callUsingString(inst, func) {
  inst[func]();
}

function callUsingFunction(inst, func) {
  func.call(inst);
}

function callUsingStringWithArgs(inst, func, args) {
  // Easier using the function reference:
  callUsingFunctionWithArgs(inst, inst[func], args);
}

function callUsingFunctionWithArgs(inst, func, args) {
  func.apply(inst, args);
}

(display just appends a paragraph element to the page with the given text; sep just appends an hr element.)

More reading:

• Mythical methods
• You must remember this