How to implement overloading in JavaScript / jQuery?

Question

I am trying to call functions with the same signature.

example: There are two functions with the same name:

<script> var obj1,obj2,obj3,obj4,obj5; function OpenBox(obj1,obj2){ // code } function OpenBox(obj1,obj2,obj3,obj4,obj5){ // code } </script> 

When I call a function on a link click event

 <a id='hlnk1' href='#' onclick='OpenBox(this,\"abhishek\"); return false;'> Open Box </a> 

When I click on the link above, it calls the OpenBox function (obj1, obj2, obj3, obj4, obj5) {}

It should be an OpenBox call function (obj1, obj2) {} Instead.

What happens in the functions?

Answer 1

mattn has the right idea. Since javascript does not print, these functions are equivalent. What you can do is something like this:

 function OpenBox_impl1(obj1,obj2){ // code } function OpenBox_impl2(obj1,obj2,obj3,obj4,obj5){ // code } function OpenBox(obj1, obj2, obj3, obj4, obj5) { if(arguments.length == 2) return OpenBox_impl1(obj1, obj2); else return OpenBox_impl2(obj1,obj2,obj3,obj4,obj5); } 

Answer 2

javascript cannot determine duplicate function in the same scope. check arguments.length - 2 or 5.

Answer 3

@abshik,

There is nothing like what looks like C # or java. Javasccript behaves this way

 function Test(arg1 ,arg2 , arg3, arg4) { } 

when you call this function, you can call the following methods.

 Test(arg1); Test(arg1,arg2); Test(arg1,arg2,arg3); Test(arg1,arg2,arg3,arg4); 

But the sequence matters, so you can use this function above.

Answer 4

You cannot overload functions in JavaScript. Instead, the latest version of the function will be used, so in your case, the version with 5 parameters is called (the final 3 are just undefined ).

There are several ways to get around this: one, if it is shown in Mikola's answer. An alternative is to pass an object and then check the contents of that object in a function (see this question ):

 function foo(a, b, opts) { } foo(1, 2, {"method":"add"}); foo(3, 4, {"test":"equals", "bar":"tree"}); 

Another option is to check arguments.length :

 function foo(a, b) { if(arguments.length > 2) { var arg3 = arguments[3]; //etc... } } 

Answer 5

The problem is that you are trying to overload a function but not supported by Javascript. I think your best option is to use Polymorphism. Check out this article for more details: http://www.cyberminds.co.uk/blog/articles/polymorphism-in-javascript.aspx

Answer 6

Once a function is defined in ecmascript, this name is locked. However, you can pass any number of parameters to this function to do the rest of the work inside.

 function foo(arg1, arg2) { // any code that is needed regardless of param count if(arg2 !== undefined) { // run function with both arguments console.log(arguments); } else if(arg1 !== undefined) { // run function with one argument } else { // run function with no arguments } } foo(1); foo(1,2); foo(1,2,3); 

Interesting note: you can pass additional parameters that are not in the function declaration. Make console.log of arguments and you will see everything there. arguments is an object that can be accessed, for example, / typecasted to an array .

Answer 7

in polymorphism you can use a different signature method, in javascript we can simulate polymorphism, checking the type of function parameter and the execution of a specific task.

 var input = document.getElementById('data'); polymorphism(input); polymorphism('Hello word 2'); polymorphism('hello word 3', 5); function polymorphism(arg,arg1){ var string = null; var sqr = 0; if(typeof arg === 'string'){ string = 'arg type String: \n'+arg; }else if (arg.tagName && arg.tagName === 'INPUT'){ string = 'arg type Input: \n'+arg.value; } if(arg1 && typeof arg1 === 'number'){ sqr = arg1*arg1; alert(string + ' and sqr = '+sqr); }else { alert(string); } } 

This example is shown in JSFIDDLE