CODEWITHSUNDEEP
javascript
Linesofcode
Linesofcode

Reputation: 5891

Javascript class passing parameters

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?

Upvotes: 0

Views: 1217

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074048

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.

Upvotes: 3

vibhu
vibhu

Reputation: 89

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');

Upvotes: 0

Related Questions