经典（非js）重载方法：
function myFunc(){
//code
}
function myFunc(overloaded){
//other code
}
Javascript不会让同一个名称定义多个函数。因此，这样的事情出现了：
function myFunc(options){
if(options["overloaded"]){
//code
}
}
除了传递带有重载的对象之外，javascript中的函数重载是否有更好的解决方法？
传入重载会很快导致函数变得过于冗长，因为每个可能的重载都需要一个条件语句。使用函数来完成这些条件语句中的//code可能会导致范围棘手的情况。
答案 0 :(得分：107)
Javascript中的参数重载有多个方面：
变量参数 - 您可以传递不同的参数集（包括类型和数量），函数的行为方式与传递给它的参数相匹配。
默认参数 - 如果参数未通过，您可以定义参数的默认值。
命名参数 - 参数顺序变得无关紧要，您只需指定要传递给函数的参数。
以下是关于每个参数处理类别的部分。
因为javascript没有对参数或所需的参数数量进行类型检查，所以你可以只有一个myFunc()的实现，它可以通过检查参数的类型，存在或数量来适应传递给它的参数。
jQuery一直这样做。您可以将某些参数设置为可选，也可以根据传递给它的参数在函数中进行分支。
在实现这些类型的重载时，您可以使用几种不同的技术：
undefined来检查是否存在任何给定参数。arguments.length检查总数量或参数。arguments伪数组来访问arguments[i]的任何给定参数。以下是一些例子：
让我们看一下jQuery的obj.data()方法。它支持四种不同的使用形式：
obj.data("key");
obj.data("key", value);
obj.data();
obj.data(object);
每个人都会触发不同的行为，如果不使用这种动态形式的重载，则需要四个独立的功能。
以下是如何用英语辨别所有这些选项，然后我将它们全部合并到代码中：
// get the data element associated with a particular key value
obj.data("key");
如果传递给.data()的第一个参数是一个字符串而第二个参数是undefined，那么调用者必须使用此表单。
// set the value associated with a particular key
obj.data("key", value);
如果第二个参数未定义，则设置特定键的值。
// get all keys/values
obj.data();
如果没有传递参数，则返回返回对象中的所有键/值。
// set all keys/values from the passed in object
obj.data(object);
如果第一个参数的类型是普通对象，则设置该对象的所有键/值。
以下是如何在一组javascript逻辑中组合所有这些：
// method declaration for .data()
data: function(key, value) {
if (arguments.length === 0) {
// .data()
// no args passed, return all keys/values in an object
} else if (typeof key === "string") {
// first arg is a string, look at type of second arg
if (typeof value !== "undefined") {
// .data("key", value)
// set the value for a particular key
} else {
// .data("key")
// retrieve a value for a key
}
} else if (typeof key === "object") {
// .data(object)
// set all key/value pairs from this object
} else {
// unsupported arguments passed
}
},
这种技术的关键是确保您想要接受的所有形式的参数都是唯一可识别的，并且从不会混淆调用者使用的形式。这通常需要对参数进行适当排序，并确保参数的类型和位置有足够的唯一性，以便始终可以告诉您正在使用哪种形式。
例如，如果你有一个带三个字符串参数的函数：
obj.query("firstArg", "secondArg", "thirdArg");
您可以轻松地将第三个参数设置为可选，并且您可以轻松地检测到该条件，但是您不能仅使第二个参数成为可选项，因为您无法告诉调用者中的哪一个通过，因为没有办法确定第二个参数是第二个参数还是第二个参数被省略，所以第二个参数的位置实际上是第三个参数：
obj.query("firstArg", "secondArg");
obj.query("firstArg", "thirdArg");
由于所有三个参数都是相同类型，因此您无法区分不同参数，因此您不知道调用者的意图。使用此调用样式，只有第三个参数可以是可选的。如果你想省略第二个参数，它必须作为null（或其他一些可检测的值）传递，而你的代码会检测到：
obj.query("firstArg", null, "thirdArg");
这是一个可选参数的jQuery示例。两个参数都是可选的，如果没有传递则采用默认值：
clone: function( dataAndEvents, deepDataAndEvents ) {
dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
return this.map( function () {
return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
});
},
这是一个jQuery示例，其中参数可能缺失，或者三种不同类型中的任何一种，它们为您提供了四种不同的重载：
html: function( value ) {
if ( value === undefined ) {
return this[0] && this[0].nodeType === 1 ?
this[0].innerHTML.replace(rinlinejQuery, "") :
null;
// See if we can take a shortcut and just use innerHTML
} else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
(jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
!wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {
value = value.replace(rxhtmlTag, "<$1></$2>");
try {
for ( var i = 0, l = this.length; i < l; i++ ) {
// Remove element nodes and prevent memory leaks
if ( this[i].nodeType === 1 ) {
jQuery.cleanData( this[i].getElementsByTagName("*") );
this[i].innerHTML = value;
}
}
// If using innerHTML throws an exception, use the fallback method
} catch(e) {
this.empty().append( value );
}
} else if ( jQuery.isFunction( value ) ) {
this.each(function(i){
var self = jQuery( this );
self.html( value.call(this, i, self.html()) );
});
} else {
this.empty().append( value );
}
return this;
},
其他语言（如Python）允许传递命名参数作为传递一些参数并使参数独立于传递顺序的方法.Javascript不直接支持命名参数的特性。通常在其位置使用的设计模式是传递属性/值的映射。这可以通过传递具有属性和值的对象来完成，或者在ES6及更高版本中，您实际上可以传递一个Map对象。
这是一个简单的ES5示例：
jQuery＆＃39; $.ajax()接受一种用法，你只需要传递一个参数，这是一个带有属性和值的常规Javascript对象。您传递的属性确定将哪些参数/选项传递给ajax调用。有些可能是必需的，许多是可选的。由于它们是对象的属性，因此没有特定的顺序。实际上，可以在该对象上传递30多个不同的属性，只需要一个（url）。
以下是一个例子：
$.ajax({url: "http://www.example.com/somepath", data: myArgs, dataType: "json"}).then(function(result) {
// process result here
});
在$.ajax()实现中，它可以只查询传入对象上传递的属性并将其用作命名参数。这可以使用for (prop in obj)完成，也可以将所有属性放入包含Object.keys(obj)的数组中，然后迭代该数组。
当有大量参数和/或许多参数是可选的时，这种技术在Javascript中非常常用。注意：这会对实现函数负责，以确保存在最小有效参数集，并为调用者提供一些调试反馈，如果传递的参数不足则会丢失哪些内容（可能通过抛出有用错误消息的异常）
在ES6环境中，可以使用destructuring为上面传递的对象创建默认属性/值。这在this reference article中有更详细的讨论。
以下是该文章的一个例子：
function selectEntries({ start=0, end=-1, step=1 } = {}) {
···
};
这会为传递给start函数的对象的end，step和selectEntries()属性创建默认属性和值。
在ES6中，Javascript为参数的默认值添加了内置语言支持。
例如：
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5
进一步说明如何使用here on MDN。
答案 1 :(得分：30)
在JavaScript中重载函数可以通过多种方式完成。所有这些都涉及一个主函数，它可以执行所有进程，也可以代理子函数/进程。
最常见的简单技术之一涉及一个简单的开关：
function foo(a, b) {
switch (arguments.length) {
case 0:
//do basic code
break;
case 1:
//do code with `a`
break;
case 2:
default:
//do code with `a` & `b`
break;
}
}
更优雅的技术是使用数组（或对象，如果你没有为每个参数计数重载）：
fooArr = [
function () {
},
function (a) {
},
function (a,b) {
}
];
function foo(a, b) {
return fooArr[arguments.length](a, b);
}
前面的例子并不优雅，任何人都可以修改fooArr，如果有人向foo传递了2个以上的参数，它就会失败，所以更好的形式就是使用模块模式和一些检查：
var foo = (function () {
var fns;
fns = [
function () {
},
function (a) {
},
function (a, b) {
}
];
function foo(a, b) {
var fnIndex;
fnIndex = arguments.length;
if (fnIndex > foo.length) {
fnIndex = foo.length;
}
return fns[fnIndex].call(this, a, b);
}
return foo;
}());
当然，您的重载可能需要使用动态数量的参数，因此您可以使用fns集合的对象。
var foo = (function () {
var fns;
fns = {};
fns[0] = function () {
};
fns[1] = function (a) {
};
fns[2] = function (a, b) {
};
fns.params = function (a, b /*, params */) {
};
function foo(a, b) {
var fnIndex;
fnIndex = arguments.length;
if (fnIndex > foo.length) {
fnIndex = 'params';
}
return fns[fnIndex].apply(this, Array.prototype.slice.call(arguments));
}
return foo;
}());
我的个人偏好往往是switch，尽管它会增加主功能。我使用这种技术的一个常见例子是accessor / mutator方法：
function Foo() {} //constructor
Foo.prototype = {
bar: function (val) {
switch (arguments.length) {
case 0:
return this._bar;
case 1:
this._bar = val;
return this;
}
}
}
答案 2 :(得分：6)
严格意义上讲，您无法进行方法重载。与java或c#支持的方式不同。
问题是JavaScript本身不支持方法重载。因此，如果它看到/解析两个或多个具有相同名称的函数，它将只考虑最后定义的函数并覆盖之前的函数。
我认为适合大多数情况的方式之一是 -
让我们说你有方法
function foo(x)
{
}
您可以定义新方法
，而不是重载fooNew(x,y,z)
{
}
然后修改第一个函数，如下所示 -
function foo(x)
{
if(arguments.length==2)
{
return fooNew(arguments[0], arguments[1]);
}
}
如果您有许多这样的重载方法，请考虑使用switch而不仅仅是if-else语句。
（more details） PS：以上链接转到我的个人博客，其中包含有关此内容的其他详细信息。
答案 3 :(得分：4)
https://github.com/jrf0110/leFunc
var getItems = leFunc({
"string": function(id){
// Do something
},
"string,object": function(id, options){
// Do something else
},
"string,object,function": function(id, options, callback){
// Do something different
callback();
},
"object,string,function": function(options, message, callback){
// Do something ca-raaaaazzzy
callback();
}
});
getItems("123abc"); // Calls the first function - "string"
getItems("123abc", {poop: true}); // Calls the second function - "string,object"
getItems("123abc", {butt: true}, function(){}); // Calls the third function - "string,object,function"
getItems({butt: true}, "What what?" function(){}); // Calls the fourth function - "object,string,function"
答案 4 :(得分：4)
我正在使用基于参数编号的一些不同的重载方法。 不过我相信John Fawcett的做法也很好。 这里的示例代码基于John Resig（jQuery的作者）的解释。
// o = existing object, n = function name, f = function.
function overload(o, n, f){
var old = o[n];
o[n] = function(){
if(f.length == arguments.length){
return f.apply(this, arguments);
}
else if(typeof o == 'function'){
return old.apply(this, arguments);
}
};
}
可用性：
var obj = {};
overload(obj, 'function_name', function(){ /* what we will do if no args passed? */});
overload(obj, 'function_name', function(first){ /* what we will do if 1 arg passed? */});
overload(obj, 'function_name', function(first, second){ /* what we will do if 2 args passed? */});
overload(obj, 'function_name', function(first,second,third){ /* what we will do if 3 args passed? */});
//... etc :)
答案 5 :(得分：3)
在javascript中你可以只实现一次函数并在没有参数myFunc()的情况下调用函数然后检查选项是否为'undefined'
function myFunc(options){
if(typeof options != 'undefined'){
//code
}
}
答案 6 :(得分：3)
我试图为here描述的这个问题开发一个优雅的解决方案。你可以找到演示here。用法如下：
var out = def({
'int': function(a) {
alert('Here is int '+a);
},
'float': function(a) {
alert('Here is float '+a);
},
'string': function(a) {
alert('Here is string '+a);
},
'int,string': function(a, b) {
alert('Here is an int '+a+' and a string '+b);
},
'default': function(obj) {
alert('Here is some other value '+ obj);
}
});
out('ten');
out(1);
out(2, 'robot');
out(2.5);
out(true);
用于实现此目的的方法：
var def = function(functions, parent) {
return function() {
var types = [];
var args = [];
eachArg(arguments, function(i, elem) {
args.push(elem);
types.push(whatis(elem));
});
if(functions.hasOwnProperty(types.join())) {
return functions[types.join()].apply(parent, args);
} else {
if (typeof functions === 'function')
return functions.apply(parent, args);
if (functions.hasOwnProperty('default'))
return functions['default'].apply(parent, args);
}
};
};
var eachArg = function(args, fn) {
var i = 0;
while (args.hasOwnProperty(i)) {
if(fn !== undefined)
fn(i, args[i]);
i++;
}
return i-1;
};
var whatis = function(val) {
if(val === undefined)
return 'undefined';
if(val === null)
return 'null';
var type = typeof val;
if(type === 'object') {
if(val.hasOwnProperty('length') && val.hasOwnProperty('push'))
return 'array';
if(val.hasOwnProperty('getDate') && val.hasOwnProperty('toLocaleTimeString'))
return 'date';
if(val.hasOwnProperty('toExponential'))
type = 'number';
if(val.hasOwnProperty('substring') && val.hasOwnProperty('length'))
return 'string';
}
if(type === 'number') {
if(val.toString().indexOf('.') > 0)
return 'float';
else
return 'int';
}
return type;
};
答案 7 :(得分：2)
检查出来：
http://www.codeproject.com/Articles/688869/Overloading-JavaScript-Functions
基本上在你的课程中，你要为你想要重载的函数编号，然后通过一个函数调用添加函数重载，快速而简单。
答案 8 :(得分：2)
由于JavaScript没有函数重载，因此可以使用选项对象。如果有一个或两个必需参数，最好将它们与options对象分开。下面是一个示例，说明如果在options对象中未传递value，如何将选项对象和填充值用于默认值。
function optionsObjectTest(x, y, opts) {
opts = opts || {}; // default to an empty options object
var stringValue = opts.stringValue || "string default value";
var boolValue = !!opts.boolValue; // coerces value to boolean with a double negation pattern
var numericValue = opts.numericValue === undefined ? 123 : opts.numericValue;
return "{x:" + x + ", y:" + y + ", stringValue:'" + stringValue + "', boolValue:" + boolValue + ", numericValue:" + numericValue + "}";
}
here是关于如何使用选项对象
的示例答案 9 :(得分：2)
为此你需要创建一个函数，将函数添加到一个对象，然后它将根据你发送给函数的参数数量执行：
<script >
//Main function to add the methods
function addMethod(object, name, fn) {
var old = object[name];
object[name] = function(){
if (fn.length == arguments.length)
return fn.apply(this, arguments)
else if (typeof old == 'function')
return old.apply(this, arguments);
};
}
 var ninjas = {
values: ["Dean Edwards", "Sam Stephenson", "Alex Russell"]
};
//Here we declare the first function with no arguments passed
addMethod(ninjas, "find", function(){
return this.values;
});
//Second function with one argument
addMethod(ninjas, "find", function(name){
var ret = [];
for (var i = 0; i < this.values.length; i++)
if (this.values[i].indexOf(name) == 0)
ret.push(this.values[i]);
return ret;
});
//Third function with two arguments
addMethod(ninjas, "find", function(first, last){
var ret = [];
for (var i = 0; i < this.values.length; i++)
if (this.values[i] == (first + " " + last))
ret.push(this.values[i]);
return ret;
});
//Now you can do:
ninjas.find();
ninjas.find("Sam");
ninjas.find("Dean", "Edwards")
</script>
答案 10 :(得分：2)
您可以使用前进来获得干净的代码，具体取决于两件事：
参数类型（在函数中调用时）
function myFunc(){
return window['myFunc_'+arguments.length+Array.from(arguments).map((arg)=>typeof arg).join('_')](...arguments);
}
/** one argument & this argument is string */
function myFunc_1_string(){
}
//------------
/** one argument & this argument is object */
function myFunc_1_object(){
}
//----------
/** two arguments & those arguments are both string */
function myFunc_2_string_string(){
}
//--------
/** Three arguments & those arguments are : id(number),name(string), callback(function) */
function myFunc_3_number_string_function(){
let args=arguments;
new Person(args[0],args[1]).onReady(args[3]);
}
//--- And so on ....
答案 11 :(得分：0)
我喜欢在父函数中添加子函数，以实现区分相同功能的参数组。
var doSomething = function() {
var foo;
var bar;
};
doSomething.withArgSet1 = function(arg0, arg1) {
var obj = new doSomething();
// do something the first way
return obj;
};
doSomething.withArgSet2 = function(arg2, arg3) {
var obj = new doSomething();
// do something the second way
return obj;
};
答案 12 :(得分：0)
您尝试实现的目标最好使用函数的本地参数变量。
function foo() {
if (arguments.length === 0) {
//do something
}
if (arguments.length === 1) {
//do something else
}
}
foo(); //do something
foo('one'); //do something else
您可以找到有关其工作原理的更好解释here。
答案 13 :(得分：0)
如何使用扩展运算符作为参数？可以使用多个参数调用同一块。所有参数都添加到一个数组中，并且在方法内部您可以根据长度循环。
function mName(...opt){
console.log(opt);
}
mName(1,2,3,4); //[1,2,3,4]
mName(1,2,3); //[1,2,3]