脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS函数重载

JS函数重载的解决方案

 更新时间：2014年05月13日 15:29:36   作者：  
在面向对象的编程中，很多语言都支持函数重载，能根据函数传递的不同个数、类型的参数来做不同的操作，JS对它却不支持，需要我们额外做些小动作。

在面向对象的编程中，很多语言都支持函数重载，能根据函数传递的不同个数、类型的参数来做不同的操作，JS对它却不支持，需要我们额外做些小动作。
　　
　　在JS的函数执行上下文中有一个名为arguments的有意思的变量，它以数组的形式存储了函数执行时传递过来的所有参数，即使函数定义没有定义这 么多个形参。还有一个特别之处就是跟Array类型相比，arguments变量有且只有一个length属性，Array的方法，例如push、pop 等，它并不具备，它只是一个“伪数组”：具有length属性，存储的数组能够用数组访问符[]来访问，并且是只读不可写。

一、对于不同个数参数的重载
　　这里应该很明白，直接用arguments函数的length属性来判断就可以了。


复制代码 代码如下:

<script type="text/javascript">
function talk(msg,handler){
     var len = arguments.length;
    //传递过来一个参数的时候执行
    if(len==1){
    alert("Function say:"+msg);
    }
    //传递过来两个参数的时候执行
    else if(len==2){
         handler(msg);
     }
}
talk("demo");
talk("demo",function(w){alert("Handler say:"+w);});
</script>

二、对于不同类型的参数的重载 
　　对于JS这样一种动态类型的语言，这种变量声明的随意性淡化了严格的变量类型在开发人员脑子里的重要性（PS:同样是基于ECMA体系的，AS就引入 了变量声明的强制类型），很多意想不到的BUG其实都是由这种变量类型的自动转换造成的。其实JS提供了很准确的方法让我们来严格检测变量的类型，比较通 用的就是typeof方法和constructor属性。

1、typeof variable 返回变量类型

复制代码 代码如下:

temp = "say"; //string
temp = 1; //number
temp = undefined; //undefined
temp = null; //object
temp = {}; //object
temp = []; //object
temp = true; //boolean
temp = function (){} //function
alert(typeof temp);

    通过上面的测试你可以看出来，对于null,Object,Array返回的都是object类型，而使用下面的方法就可以解决这个困扰。

2.constructor属性检测变量类型

    JS中每个对象都有constructor属性，它是用来引用构造此对象的函数，通过对这个引用的判断就可以检测变量类型了。

复制代码 代码如下:

temp = "say";
temp.constructor==String; //true
temp= {};
temp.constructor == Object;//true
temp= [];
temp.constructor == Array;//true

    通过上面的测试已经很容易的把Array和Object类型的变量区分开了。下面我们来对自定义的对象做个测试看看会发生什么。

复制代码 代码如下:

//自定义对象
function Ball(){}
//实例化一个对象
var basketBall = new Ball();
basketBall.constructor==Ball; //true

    这可以说明constructor属性对于自定义的对象一样适用。

　　在弄清楚了上面两个方法的适用以后再来回到JS函数重载的模拟上来，下面这个例子是根据参数类型来重载。

复制代码 代码如下:

function talk(msg){
     var t = typeof msg;
     if(t=="string"){
            alert("It's a string");
    }
    else if(t=="number"){
            alert("It's a number");
     }
}
talk(10); //It's a string
talk("demo"); //It's a number

附上一个很巧妙的严格检测参数类型和个数的函数：

复制代码 代码如下:

//依据参数列表来严格地检查一个变量列表的类型
function strict( types, args ) {
     //确保参数的数目和类型核匹配
     if ( types.length != args.length ) {
            //如果长度不匹配，则抛出异常
           throw "Invalid number of arguments. Expected " + types.length + ", received " + args.length + " instead.";
    }
    //遍历每一个参数，检查基类型
    for ( var i = 0; i < args.length; i++ ) {
          //如JavaScript某一项类型不匹配，则抛出异常
          if ( args[i].constructor != types[i] ) {
                throw "Invalid argument type. Expected " + types[i].name +", received " + args[i].constructor.name + " instead.";
          }
     }
}

//上述方法的使用
function doFunction(id,name){
     //检测参数个数和类型
     strict([Number,String],arguments);
  ..
}

您可能感兴趣的文章:

相关文章

  • 原生JS实现Ajax跨域请求flask响应内容

    原生JS实现Ajax跨域请求flask响应内容

    这篇文章主要为大家详细介绍了JS实现Ajax跨域请求flask响应内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JS 组件系列之BootstrapTable的treegrid功能

    JS 组件系列之BootstrapTable的treegrid功能

    这篇文章主要介绍了JS 组件系列之BootstrapTable的treegrid功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06
  • zeroclipboard复制到剪切板的flash

    zeroclipboard复制到剪切板的flash

    虽然网上实现Ctrl + C的JS代码已经有很多了，但我还是向大家推荐一个比较好的插件zeroclipboard，兼容所有浏览器
    2010-08-08
  • JavaScript检测弹出窗口是否已经关闭的方法

    JavaScript检测弹出窗口是否已经关闭的方法

    这篇文章主要介绍了JavaScript检测弹出窗口是否已经关闭的方法,涉及javascript中window属性的closed属性的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript对象原型链原理解析

    JavaScript对象原型链原理解析

    这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • JavaScript编写猜拳游戏

    JavaScript编写猜拳游戏

    这篇文章主要为大家详细介绍了JavaScript编写猜拳游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 简单实现jQuery轮播效果

    简单实现jQuery轮播效果

    这篇文章主要教大家如何简单实现jQuery轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 小程序获取周围IBeacon设备的方法

    小程序获取周围IBeacon设备的方法

    这篇文章主要为大家详细介绍了小程序获取周围IBeacon设备的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • js获取地址栏参数的两种方法

    js获取地址栏参数的两种方法

    这篇文章主要为大家详细介绍了js获取地址栏参数的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js实现鼠标滑过文字链接色彩变化的效果

    js实现鼠标滑过文字链接色彩变化的效果

    这篇文章主要介绍了js实现鼠标滑过文字链接色彩变化的效果,涉及javascript鼠标事件及样式操作的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05

最新评论