如何在 JavaScript/jQuery 中实现重载?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6464386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 20:46:32  来源:igfitidea点击:

How can implement overloading in JavaScript/jQuery?

javascriptjavascript-eventsoop

提问by Abhishek B.

I 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){}

当我点击上面的链接时,它正在调用函数OpenBox(obj1,obj2,obj3,obj4,obj5){}

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

它应该是 call function OpenBox(obj1,obj2){} 代替。

What's going wrong in functions?

函数出了什么问题?

回答by Mikola

mattn has the correct idea. Because javascript has no typing those functions are equivalent. What you could do is something like this:

mattn 有正确的想法。因为 javascript 没有输入这些函数是等效的。你可以做的是这样的:

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

回答by mattn

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

javascript 不能在同一范围内定义重复的函数。检查arguments.length是 2 或 5。

回答by James Allardice

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).

你不能在 JavaScript 中重载函数。相反,将使用该函数的最新定义版本,这就是为什么在您的情况下调用具有 5 个参数的版本(最后 3 个只是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):

有几种方法可以解决这个问题,Mikola 的回答中显示了一种方法。另一种方法是传入一个对象,然后在函数中检查该对象的内容(请参阅此问题):

function foo(a, b, opts) {

}

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

Another option is to check arguments.length:

另一种选择是检查arguments.length

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

回答by Joe Francis

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

问题是您正在尝试重载一个函数,但 Javascript 不支持该函数。我认为您最好的选择是改用多态性。查看这篇文章了解更多详情:http: //www.cyberminds.co.uk/blog/articles/polymorphism-in-javascript.aspx

回答by Hymansonkr

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.

一旦在 ecmascript 中定义了一个函数,该名称就会被锁定。但是,您可以向该函数传递任意数量的参数,以便在内部完成其余工作。

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.logof argumentsand you'll see everything in there. argumentsis an objectwhich can be accessed like / typecasted to an array.

有趣的提示:您可以传入不在函数声明中的额外参数。做一个console.logarguments你会看到那里的一切。arguments是 anobject,可以像 / 类型转换为array.

回答by Yonatan Alexis Quintero Rodrig

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.

在多态中你可以使用不同的签名方法,在javascript中我们可以模拟多态检查函数参数的类型并执行某些任务。

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

JSFIDDLE 中检查此示例

回答by kobe

@abshik ,

@abshik,

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

没有什么类似于 c# 或 java 的东西。Javascscript 的行为方式是这样的

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.

但是顺序很重要,因此您可以通过上述方式实现功能。