How to call an instantiated class' function in javascript?

Question

To tell the true, i can call the function but just in hard-coded way. Instead of hard-coding the submit binding my getData function, i'd like to call the function by arguments. Please help me, how to do this.

Thanks.

formhandler = new xForm.Main(); // new formhandler
formhandler.setForm(this.formid); // fn.setForm(string) // configure the container, which has the form elements, or the form itself
modal = new xModal.Main(); // new modal handler
modal.setModal(this.modalid); // set modal element
modal.showModal(); // show
modal.bindClose(".cancel"); // bind closing classes
modal.bindSubmit(".submit", formhandler, "getData"); // bind submit to call formhandler.getData()

in the xModal.js

var xModal = xModal || {};

xModal.Main = function()
{
  var self = this;
  ...

this.bindSubmit = function(classname, a, b)
{
    this.closeclass = classname;
    $("#"+this.target).find(classname).click(function(){
        a.call(b); // edited after the original post, i forgot to replace the call's argument to b in the question excuse me for the inaccuracy
    });
}

this function should call the getData in the xForm (here is the snippet from xForm)

var xForm = xForm || {};

xForm.Main = function()
{
var self = this;
this.target = "";
this.data = {};

...

this.getData = function()
{
    getSingleElements();
    getMultiElements();
    return returnData();
}

Update:

I think i just found a method to do this, but please tell me if i made something uncorrectly, or you have a better solution for this problem (i'm pretty sure someone has)

I think, i have the correct method.

in the xForm i made a fn, which calls functions by parameters contains in the self (which is equals to this, actually)

var xForm = xForm || {};

xForm.Main = function()
{
var self = this;

this.callFn = function(func)
{
    return self[func].call(this);
}

...

then i call the fn from the another class (xModal)

var xModal = xModal || {};

xModal.Main = function()
{
var self = this;
this.bindSubmit = function(classname, a, b)
{
    this.closeclass = classname;
    $("#"+this.target).find(classname).click(function(){
        a.callFn(b);
    });
}

then i just have to tell the xModal this:

modal.bindSubmit(".submit", formhandler, "getData"); // bind submit to call formhandler.getData()

so now the modal class will call the args[1]'s args[2] function. also able to give more parameters to the call fn by apply method.

works fine at me, but i don't know, maybe you can help me in make this better.

geon · Accepted Answer · 2012-06-02 11:20:51Z

1

You bind a method name of a certain object to the submit event:

modal.bindSubmit(".submit", formhandler, "getData");

But you want to pass arguments to the method as well. This is not the Javascript way of doing it. Instead, just bind an anonymous function to the event, and call the method however you like from within this anonymous function:

modal.bindSubmit(".submit", function(){
    formhandler.getData("My arguments");
});

What you see in my example is an anonymous function passed as an argument. In Javascript, there is no distinction between a value like a string or an integer, and a function. A function can be assigned to a variable, and passed as an argument.

To make it more clear, you can also write it like this:

var eventHandler = function(){
    formhandler.getData("My arguments");
};

modal.bindSubmit(".submit", eventHandler);

This is called "first class functions", and are part of the "functional programming" paradigm.

Inside the event handler function, you still have access to the variables in the scooe it was created in, like the formhandler object. This is called a "closure".

Read up on this. It will boggle your mind at first, but it is really worth your time, as it will open your eyes to much simpler solutions.

From your example, I am not sure what the object modal is. If it is a jQuery element, my example should work right away, othewise, you would need to update your code to call the function passed in as the event handler, instead of calling a method on an object.

edited Jun 2, 2012 at 11:20

answered May 30, 2012 at 10:21

geon

8,5103 gold badges37 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Répás Over a year ago

I don't understand this, sorry. :( Please explain it.

geon Over a year ago

@Répás: I updated my answer to explain what the code does. Please test it, and accept my answer if it works for you.

Collectives™ on Stack Overflow

How to call an instantiated class' function in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related