西北马二最代码的gravatar头像
西北马二最代码 2017-09-17 12:49:15
JavaScript实现函数重载

版权声明:本文为博主原创文章,未经博主允许不得转载。

    昨天在一篇博客中,我们复习了基础的利用c++和Java语言实现函数重载,现在我们学习如何利用JavaScript语言实现函数重载!

    那么在开始之前,我们先来思考几个问题:JavaScript是弱类型语言,它能否实现函数重载?

    假若它能够实现函数重载,但是我们知道JavaScript是弱类型语言,在给它传递参数时,参数的类型和个数都是不受严格控制的,它不像c++和Java这些强类型语言,对参数的个数和类型都有严格意义上的判断,那么它经过怎么样的处理,才能实现对函数重载过程中传递的参数的类型和传递的参数的个数的判断呐?

    接下来,我们就带着这几个问题,一起来探讨JavaScript语言实现函数重载的过程。

    首先,我们要有一个大概清晰的思路:

     1、在JavaScript中调用同名函数的问题;

     2、函数中特殊的参数arguments;

     3、如何利用arguments实现函数重载。  

一、JavaScript中调用同名函数

    (1)、我们知道,在JavaScript中,如果在一段JavaScript代码中存在着多个同名的函数,那么在实际调用的过程中,JavaScript只调用最后一个函数,所以我们知道,JavaScript语言中,没有直接实现函数重载,在多个同名函数的调用过程中,即便你传入了不同数量的参数,那也无济于事,因为在调用过程中,JavaScript不看参数个数,只关注函数名的前后顺序;

    例如:

function example1(arg1){
    alert ("参数1:" + arg1);
}
function example1(arg1,arg2){
    alert ("参数1:" + arg1+"参数2:" + arg2);
}

//函数调用
function test(){
    example1(1);
}

    在上面的例子中,我们调用了example1(1)并且只在里面传递了一个参数,但是在实际调用过程中,我们看到实际上调用的是example1(arg1,arg2),它并没有看我们只传递一个参数而调用只有一个参数的方法;

二、函数中特殊的参数arguments

    (1)、首先我们来了解一下这个arguments参数,就像在上面例子中显示的一样,当我们想要为多个同名函数传递较多参数时,它只调用方法体中最后一个函数,那么我们如何处理,才能获取到传递的其他的参数呐,这个时候我们就要用到这个特殊的arguments参数,说它特殊,那它到底特殊在哪里呐?

    (2)、arguments参数详解:在每个JavaScript的函数中,都带有一个仅在这个函数范围内产生作用的变量----arguments,它是一个包含传递给函数的所有参数的伪数组,也就是说,arguments中包含了所有传递给函数的参数,那么为什么要说它是一个伪函数呐?因为在arguments中的数组,你是不可以进行修改的,并且无法用push进行新的参数的添加,但是它有一个length属性,可以便于我们进行参数的访问,也可以让我们知道有多少个参数被传递进来。

    例如:

function myPost(name,who){
    if(arguments >= 2){
        alert (who + "叫" + name);
    }else{
        alert ("谁叫:" + name); 
    }
}

三、JavaScript进行传入参数类型的判断

    (1)、如果我们在调用函数时没有传入参数,那么name和who肯定都会报undefined的错误,我们可以用typeof name = 'undefined'进行参数类型的判断,也可以进行是否传入了参数的判断。

     例如:

function myPost(name){
    if(typeof name === 'undefined'){
        alert ("ERROR:错误的信息输入!");
    }else{
        alert ("她叫做" + name);
    }
}

    (2)、javascript中的类型检查我常常用两种方法来判断:

           方法1:typeof 变量 == '类型名'。如下:

           var x = 123;

           typeof x == 'number' //true

           x = '123';

          typeof x == 'string' //true

          但是,对于Array和Object对象,typeof之后的值是一样的,都为Object。即 typeof [] == type new Object(),如此当我们想要判断一个对象是否为数组或我们自定义的对象时,这种方法就显得有点不够好了。

          方法2:利用构造函数来判断变量类型(变量.constructor == 构造函数)

          var num = 1, str = 'abcd', arr = [], obj = {}, tf = true, f = function(){};

          用typeof对它们分别进行求值后,得到的结果分别是:number、string、 object、 object、 boolean、 function

          如果分别调用它们的构造函 数,得到的结构分别是:Number、String、Array、Object、Boolean、Function

四、使用arguments进行JavaScript的函数重载的实现

   那么,接下来我们就利用上面讲述到的这些知识点,进行JavaScript语言的函数重载的实现:

function count(num1,num2){
    if(arguments.length == 1){
        //调用一个参数的方法
    }
    else if(arguments.length == 2){
         //调用两个参数的方法
    }else(){
         //调用其他方法
    }
}

//一下这段代码也是函数重载的实现,其原创链接为:http://blog.csdn.net/wangyongxia921/article/details/21116135

//设置CSS  
Base.prototype.css= function (attr, value) {  
for (var i = 0; i <this.elements.length; i ++)  
{  
if (arguments.length ==1) //如果传进一个参数,那么就是读取节点样式。  
{  
if (typeofwindow.getComputedStyle != 'undefined')  
{        //w3c标准  
returnwindow.getComputedStyle(this.elements[i], null)[attr];  
}  
else if (typeofthis.elements[i].currentStyle != 'undeinfed')  
{     //IE标准  
returnthis.elements[i].currentStyle[attr];  
}  
}  
Else //参数个数不为一,那么就设置节点样式。  
{
this.elements[i].style[attr]= value;  
}
}
return this;
} 

打赏
最近浏览
西北马二最代码  LV15 2017年9月17日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友