Javascript class passing parameters

Question

I have been creating several classes but I never had any that needed parameters on the class itself.

The following code works perfectly.

$(function()
{
   search.anotherFunction('a', 'b');
});

search = function()
{

   this.anotherFunction = function(param1, param2)
   {
      // do whatever
   };

   var public = { anotherFunction: anotherFunction }  

   return public;
}();

But now I would like to pass parameters inside search in order to avoid passing the same parameters to all the functions.

$(function()
{
   search('front/file.php').anotherFunction('a', 'b');
});

search = function(url)
{

   this.anotherFunction = function(param1, param2)
   {
      // use here the 'url' parameter
   };

   this.anotherFunctionB = function(param1, param2)
   {
      // use here the 'url' parameter
   };

   var public = { anotherFunction: anotherFunction,
                  anotherFunctionB: anotherFunctionB }  

   return public;
}();

This doesn't work and the console outputs the error.

Uncaught TypeError: object is not a function

It means that search isn't a function but yes a class name and therefore can't receive params?

anotherFunction: anotherFunction should be anotherFunction: this.anotherFunction. Same goes for anotherFunctionB. — haim770
– haim770, Commented Mar 29, 2015 at 13:56
did you try like this { anotherFunction: this.anotherFunction, anotherFunctionB: this.anotherFunctionB } — saravanakumar
– saravanakumar, Commented Mar 29, 2015 at 13:58
Guys the problem isn't the functions itself, is passing parameters to the class. — Linesofcode
– Linesofcode, Commented Mar 29, 2015 at 14:01
Curious as to why you've put that in a jQuery document.ready handler? Sometimes just using jQuery's plugin/widget factories is easier ! — adeneo
– adeneo, Commented Mar 29, 2015 at 14:03
@adeneo just to use as an example. In my real code I call the class inside a onClick event. — Linesofcode
– Linesofcode, Commented Mar 29, 2015 at 14:04

T.J. Crowder · Accepted Answer · 2015-03-29 14:23:36Z

To start with, the way you're creating your "classes" is incorrect, and ends up creating global variables: Inside the call to your anonymous function, because of the way you call it, this will refer to the global object*, so this.anotherFunction = ... will create a global variable called anotherFunction, because properties on the global object are global variables.

If you want to keep using your current pattern with minimal changes, then don't use this.xyz = ... with your functions, use var instead:

var search = function()
{
   var anotherFunction = function(param1, param2)
   {
      // do whatever
   };

   var public = { anotherFunction: anotherFunction }  

   return public;
}();

Also note that you were falling prey to The Horror of Implicit Globals by not declaring search; I've added a var to declare it.

Your second example, with the changes above, would work if you didn't call the outermost function and just assigned the function to the search variable, then called it later:

var search = function(url)
{

   var anotherFunction = function(param1, param2)
   {
      // use here the 'url' parameter
   };

   var anotherFunctionB = function(param1, param2)
   {
      // use here the 'url' parameter
   };

   var public = { anotherFunction: anotherFunction,
                  anotherFunctionB: anotherFunctionB }  

   return public;
}; // <== Note, no () here

Now search refers to a function, which we can call like this:

var x = search("http://example.com");
x.anotherFunction(...); // Will have access to the URL

* Why does this refer to the global object when you call your anonymous function? Because you call it without doing anything to set this to something else, and you're using loose mode. (I know you're using loose mode because if you were using strict mode, this would be undefined and so this.anotherFunction = ... would fail.)

Side note: I would recommend you stop using public as a variable name, as it's a future reserved word and has been since at least ES3.

vibhu · Accepted Answer · 2015-03-29 14:06:17Z

0

You can use JavaScript closures here. Check out the below approach:

search = function()
{
    return function (url) {
       this.anotherFunction = function(param1, param2)
       {
          // use here the 'url' parameter
       };

       this.anotherFunctionB = function(param1, param2)
       {
          // use here the 'url' parameter
       };

       var public = { anotherFunction: anotherFunction,
                      anotherFunctionB: anotherFunctionB }  

       return public;
    }
}();

search('front/file.php').anotherFunction('a', 'b');

answered Mar 29, 2015 at 14:06

vibhu

899 bronze badges

2 Comments

T.J. Crowder Over a year ago

He/she could do it like that (other than the this problem I mentioned in my answer, which is also present above), but it's got an unnecessary level of nesting. You don't need the outer function at all.

vibhu Over a year ago

the problem of this can definitely be rectified by the approach you mentioned. But since @Linesofcode of code mentioned to pass another param in Search I provided the option to do so through this approach

Collectives™ on Stack Overflow

Javascript class passing parameters

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related