什么是Javascript函数重载?

ECMAScript函数重载

什么是函数重载?

重载其实是把多个功能相近的函数合并为一个函数,重复利用了函数名。

为什么要使用函数重载?

以jQuery为例,假如jQuery中的css( )方法不使用重载,那么就要有5个不同的函数,来完成功能,那我们就需要记住5个不同的函数名,和各个函数相对应的参数的个数和类型,显然就麻烦多了。

ECMAScript函数不能像传统意义上那样实现重载,是因为ECMAScript函数没有签名,因为其参数是由包含零个或多个值的数组 arguments命名参数 来表示的。而在其他语言中(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数的类型和数量)不同即可。

示例

function overload(a){
    console.log('only one param')
}

function overload(a,b){
    console.log('two params')
}

// 在支持重载的编程语言中,eg: java
overload(1);     //only one param
overload(1,2);  //two params


// 在 JavaScript 中,因为后定义的函数覆盖了前者
//所以仅有第二个函数生效,类似变量的重新赋值
overload(1);      //two params
overload(1,2);    //two params

如何实现?

方法一

使用 arguments 对象判断入参数量

function overload () {
  if (arguments.length === 1) {
    console.log('only one param')
  }
  if (arguments.length === 2) {
    console.log('two params')
  }
    ... // 其他情况的处理逻辑
}

overload(1);      //only one param
overload(1, 2);  //two params

这个例子很简单,通过判断入参的数量进行不同的执行逻辑,在参数较少时还能接受,一旦参数较多时,写起来就很麻烦了

方法二

通过入参的数据类型判断, 以jQuery的 css( ) 方法为例

// name 表示属性名
// value 表示属性值
css: function( name, value ) {
    return access( this, function( elem, name, value ) {
        var styles, len,
        map = {},
        i = 0;

  // 判断属性名是不是数组
  // 是数组就遍历,调用jQuery.css 方法传入每个属性名,获取样式
    if ( Array.isArray( name ) ) {
        styles = getStyles( elem );
        len = name.length;

        for ( ; i < len; i++ ) {
            map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
        }
        return map;
    }

    // 如果value 不等于 undefined 就调用jQuery.style 方法设置样式
    // 如果value 等于 undefined 就调用jQuery.css 方法获取样式
    return value !== undefined ?
        jQuery.style( elem, name, value ) :
        jQuery.css( elem, name );
    }, name, value, arguments.length > 1 );
}

jQuery.access()方法,这个方法可以获取 或 设置,一个或者多个属性值, 为 css( ) 方法判断第一个参数是字符串还是对象。
jQuery.style( ) 方法:在DOM节点上读取或设置样式属性

在css( )方法中,如果有传第二个参数,也就是有要设置的属性值时,那就会调用 jQuery.style( ) 方法设置样式

jQuery.css()
在DOM元素上读取DOM样式值

小结

虽然 ECMAScript 并没有真正意义上的重载,但是重载的效果在ECMAScript中却非常常见,比如 Array 的 splice()方法,
再比如 Number 的parseInt()方法。

文中提到的实现重载效果的方法,本质都是对参数进行判断,不管是判断参数个数,还是判断参数类型,都是根据参数的不同,来决定执行什么操作的。
虽然,重载能为我们带来许多的便利,但是也不能滥用,不要把一些根本不相关的函数合为一个函数,那样并没有什么意义。

引用自我自己的博客

猜你喜欢

转载自blog.csdn.net/weixin_47039451/article/details/107521899