如何重载javascript中的函数?


103

经典(非js)重载方法:

function myFunc(){
 //code
}

function myFunc(overloaded){
 //other code
}

Javascript不允许使用同一个名称定义多个功能。这样,这样的事情就会出现:

function myFunc(options){
 if(options["overloaded"]){
  //code
 }
}

除了传递带有重载的对象之外,JavaScript中是否有更好的解决方法来实现函数重载?

传递重载会很快导致函数变得太冗长,因为每个可能的重载都需要一个条件语句。使用函数来完成//code这些条件语句的内部可能会导致带有范围的棘手情况。


1
然后您就在考虑javascript错误;如果您在重载和范围方面遇到问题,则可能应该使用不同的方法名称,因为这听起来像是在做另一项工作
joshcomley 2012年

@joshcomley-重载和作用域需要代码来处理。我只是在尝试确保我使用的代码尽可能高效。使用变通办法来处理范围很好,但是我更喜欢至少尝试使用最佳实践方法。
特拉维斯J

Answers:


126

Javascript中的参数重载有多个方面:

  1. 可变参数 -您可以传递不同的参数集(包括类型和数量),并且该函数的行为将与传递给它的参数相匹配。

  2. 默认参数 -如果未传递参数,则可以定义一个默认值。

  3. 命名参数 -参数顺序变得无关紧要,您只需命名要传递给函数的参数即可。

以下是有关这些参数处理类别的每个部分。

可变参数

由于javascript没有对参数进行类型检查或需要的参数数量,因此您只需执行一种实现myFunc(),即可通过检查参数的类型,存在或数量来适应传递给它的参数。

jQuery一直都在这样做。您可以将某些参数设为可选,也可以根据传递给它的参数在函数中进行分支。

在实现这些类型的重载时,可以使用几种不同的技术:

  1. 您可以通过检查声明的参数名称值是否为来检查是否存在任何给定参数undefined
  2. 您可以使用来检查总数或参数arguments.length
  3. 您可以检查任何给定参数的类型。
  4. 对于可变数量的参数,可以使用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的 $.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环境中,可以使用解构为上述传递的对象创建默认属性/值。此参考文章对此进行了更详细的讨论。

这是该文章中的一个示例:

function selectEntries({ start=0, end=-1, step=1 } = {}) {
    ···
};

这会为创建默认属性和值startendstep在传递给的对象上创建属性selectEntries()函数。

函数参数的默认值

在ES6中,Javascript为参数的默认值添加了内置语言支持。

例如:

function multiply(a, b = 1) {
  return a*b;
}

multiply(5); // 5

此处可以在MDN上使用方法的进一步说明。


因此,我应该坚持使用自适应功能,并接受将其作为实现功能重载外观的最佳实践吗?
特拉维斯J

2
@TravisJ-是的,适应性函数是Javascript中完成重载的方式。您的另一个选择是使用带有不同参数的单独命名的函数。如果两个实现没有共同点,那么任何一种都是可接受的做法。如果两个实现本质上是在做相同的事情,只是从不同的参数开始,那么我认为这会使您的界面更紧凑以使用自适应功能,并且使您有机会在两个相关的实现之间共享代码。
jfriend00 2012年

添加了一些代码示例,用英语和实际代码进行了解释。
jfriend00 2014年

尝试此最新版本的Safari时出现错误,意外令牌'=' resetProgressBar: function(display_errors, lockout = false)
尼克

@Nick-根据此ES6兼容性表,默认参数值应在Safari 10及更高版本中工作。在此MDN页面上,它在Safari中显示“不支持”。我没有Mac,因此无法自己进行测试。通常,它似乎是后来在许多浏览器中实现的ES6功能之一。例如,它看起来还不像iOS9。
jfriend00 '16

33

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,它将失败,因此更好的形式是使用模块模式和一些检查:

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,尽管它确实占用了master功能。我将在哪里使用此技术的一个常见示例是访问器/更改器方法:

function Foo() {} //constructor
Foo.prototype = {
    bar: function (val) {
        switch (arguments.length) {
        case 0:
            return this._bar;
        case 1:
            this._bar = val;
            return this;
        }
    }
}

这是一个很好的选择示例:)
Travis J

1
不错,我喜欢第二种技巧
Nick Rolando 2012年

8

从严格意义上讲,您不能执行方法重载。不喜欢java或中支持它的方式c#

问题是JavaScript本身不支持方法重载。因此,如果它看到/解析了两个或多个具有相同名称的函数,则只需考虑最后定义的函数并覆盖先前的函数。

我认为适合大多数情况的一种方法如下:

可以说你有方法

function foo(x)
{
} 

可以定义一个新方法,而不是用javascript无法实现的重载方法。

fooNew(x,y,z)
{
}

然后按如下所示修改第一个函数-

function foo(x)
{
  if(arguments.length==2)
  {
     return fooNew(arguments[0],  arguments[1]);
  }
} 

如果您有许多这样的重载方法,请考虑使用switch不仅仅是if-else语句。

更多详细信息)PS:上面的链接转到我的个人博客,其中包含有关此主题的更多详细信息。


这不是问题,这是一个功能。
inetphantom

4

我根据参数编号使用了一些不同的重载方法。但是我相信约翰·福塞特的做法也不错。在此示例中,代码基于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 :)

4

在javascript中,您可以只实现一次该函数,myFunc() 然后在不带参数的情况下调用该函数,然后检查选项是否为'undefined'

function myFunc(options){
 if(typeof options != 'undefined'){
  //code
 }
}

3

我试图为此处描述的问题开​​发出一种优雅的解决方案。您可以在此处找到演示。用法如下所示:

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

1
一个处理输入的功能,非常聪明。
特拉维斯J

3

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"

3

JS中的重载没有问题,重载函数时pb如何保持干净的代码?

您可以基于以下两点使用向代码来获得简洁的代码:

  1. 参数数(调用函数时)。
  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 ....   


2

由于JavaScript没有函数重载选项,因此可以使用对象。如果有一个或两个必需的参数,最好将它们与options对象分开。这是一个有关如何使用选项对象和填充值作为默认值(如果未在选项对象中传递值的情况下)的示例。

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 + "}";

}

是有关如何使用选项对象的示例


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>

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

0

您要实现的目标最好是使用函数的局部参数变量来完成。

function foo() {
    if (arguments.length === 0) {
        //do something
    }
    if (arguments.length === 1) {
        //do something else
    }
}

foo(); //do something
foo('one'); //do something else

您可以在此处找到有关其工作原理的更好解释。


那么碰撞检测呢?这是使用无参数函数或检查是否存在的好方法,但在涉及重载时,并不是最佳实践。
特拉维斯·J
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.