Eventmanager That Calls Other Objects' Functions

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 c

Solution 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 argumentscallUsingString(myinstance, "myfunction");
sep();
callUsingFunction(myinstance, myinstance.myfunction);
sep();

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

functioncallUsingString(inst, func) {
  inst[func]();
}

functioncallUsingFunction(inst, func) {
  func.call(inst);
}

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

functioncallUsingFunctionWithArgs(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

Solution 2:

If myFunction is a string you can do it this way.

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

But if myFunnction is a function object, you have to call that function. Where the this object within the myFunction references to myinstance.

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

You can do it this way, but why don't you use the .bind() and the .trigger() to handle events? DEMO http://jsfiddle.net/DnjRs/