How can implement overloading in JavaScript/jQuery?

Question

Im trying to call functions with same signature.

Example: There are two functions with 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 calling function on click event of link

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

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

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

What's going wrong in functions?

`'OpenBox(this,\"abhishek\") return false;'` should be `'OpenBox(this,"abhishek") return false;'` — Ibu, Jun 24 '11 at 06:55
Read the answers to this question: http://stackoverflow.com/questions/456177/function-overloading-in-javascript-best-practices — James Allardice, Jun 24 '11 at 06:57
@lbu - escaping the quotation marks, though not necessary in this case, doesn't actually hurt does it? I'd be more concerned that there's no semicolon between the closing bracket and the return. — nnnnnn, Jun 24 '11 at 07:07
I would just like to point out for people reading this question as part of a search that what Abhishek has described is called method overloading, *not* polymorphism. Polymorphism is the ability to adhere to specific interfaces or contracts. Javascript, being a duck-typed language, has implicit polymorphism baked in. — Randolpho, Jun 08 '12 at 17:10

Mikola · Accepted Answer · 2013-04-18T23:55:03.457

mattn has the correct idea. Because javascript has no typing those functions are equivalent. What you could 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);
}

score 6 · Answer 2 · edited Jun 24 '11 at 07:07

6

javascript can't define duplicate function in same scope. check arguments.length are 2 or 5.

edited Jun 24 '11 at 07:07

mu is too short

426,620
70
833
800

answered Jun 24 '11 at 06:54

mattn

7,571
30
54

score 3 · Answer 3 · answered Oct 23 '14 at 20:18

in the polymorphism you can use a different signature method ,in javascript we can simulate polymorphism checking the type of the function parameter and execute certain 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);
  }    
}

Check this example in JSFIDDLE

score 3 · Answer 4 · edited May 23 '17 at 12:33

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

There are several ways around this, one if which is shown in Mikola's answer. An alternative is to pass in an object, and then check the contents of that object in the 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...
    }
}

Jacksonkr · Answer 5 · 2014-01-30T18:11:31.903

Once a function is defined in ecmascript, that name is locked. However, you can pass any number of parameters to that function so you do the rest of the work on the 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 in extra parameters that aren't in the function declaration. Do a console.log of arguments and you'll see everything in there. arguments is an object which can be accessed like / typecasted to an array.

yes Jackson right.. can I access all the parameter by arguments objects? — Abhishek B., Jan 29 '14 at 18:03

score 2 · Answer 6 · answered Jun 24 '11 at 06:59

2

@abshik ,

There is nothing like that which is similar to c# or java. Javasccript behaves this way

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

}

when you are calling this function you can call in the following ways

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

But sequence matters , so you can the function in the above ways.

answered Jun 24 '11 at 06:59

kobe

15,671
15
64
91

1

You can also call it with no arguments or 5+ arguments. – daniel1426 Feb 27 '14 at 21:48

score 2 · Answer 7 · answered Jan 16 '12 at 11:45

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

How can implement overloading in JavaScript/jQuery?

7 Answers7

Linked

Related