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