JS函数重载解决方案

　JS的函数定义可以指定形式参数名称，多多少少我们会以为js至少可以支持参数个数不同的方法重载，然而遗憾的是这仅仅是一个假象，js所有的参数都是以arguments传递过去的，这个参数类似于数组，在函数调用的时候，所有的实参都是保存在了这个数据结构里面，我们定义函数的时候所指定的形式参数其实是为这个数据结构里面的数据定义一个快捷的访问方式。也就是说js所有的函数都是支持无限个参数的，加上数据类型是弱类型，那么JS的函数除了名称就真的没有方法区别了？

　　办法总是有的，我们可以利用JavaScript中的特殊对象arguments来模拟函数重载。用它来判断传入参数的个数或类型以区分重载。

1.根据参数个数重载

js判断传入参数数量可以用arguments.length这个属性来判断；


1

2

3

4

5

6

7

8

9

10

11

12

13

<script type="text/javascript">

function add() {

    if (arguments.length == 1) {

        alert(arguments[0] + 10);

    }

    else if (arguments.length == 2) {

        alert(arguments[0] + arguments[1]);

    }

}

//函数调用

add(10);

add(10, 20);

</script>

2.根据参数类型重载

判断变量类型的3种方法：
1.用 typeof 语句判断变量类型，typeof语句返回类型对应的字符串。
2.用 instanceof 语句判断变量类型，instanceof语句返回true/false。
3.用 constructor 属性判断变量类型，这个属性返回用来构造该变量的构造函数引用。
对照表：可以看出用 typeof 不能准确的判断出具体的类型，所以我们用 constructor 来进行判断。

typeof string number object function boolean object object
constructor String Number Object Function Boolean Array User Define

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script type="text/javascript">

function add()

{

    if (arguments.length == 0) return 0;

    var sum=0;

    for(var i=0; i<arguments.length; i++){

        if(arguments[i].constructor == Number){

        //或者改为：if(arguments[i] instanceof Number)

        //或者改为：if(typeof(arguments[i])=="number")

        sum += arguments[i];

      }

    }

    return sum;

}

//函数调用

alert(add(10));

alert(add(10,20));

</script>
时间： 2024-11-13 13:32:05

JS函数重载解决方案的相关文章

浅谈JavaScript函数重载

上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来.不过那天晚上,还是很惊喜的接到了HR面电话.现在HR面试的结果还没有出来,听说要等到下周二才出,所以再好好等几天哈. 前面说了这多的废话,现在是时候和伙伴们分享一下面试干货哈.因为二面问到的内容还挺多的,所以这里就不全部列举出来了.这里只讨论一下函数的重载. 下面是面试时的对话,“面”指面试官,“我”就是我~ 面:你能说说JS怎么实现函数的重载吗?

js中没有函数重载,怎样实现函数重载的功能?

js中没有函数重载,javasript中使用可选参数:arguments实现相同的功能.. 函数在定义的时候可不定义参数: <script type="text/javascript" > function say() { for (var i = 0; i < arguments.length; i++) { alert(arguments[i].toString()); } } </script> 调用:<input type="but

从两个角度理解为什么 JS 中没有函数重载

函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表(参数个数.类型.顺序)的函数,这组函数被称为重载函数.重载函数通常用来声明一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于程序的可读性有很大的好处. 但是在 JS 如果不通过一些方法是无法实现重载的,可以从以下两个角度去理解. 1. 方法签名 方法签名指的是函数的名称加形参列表,并且通过函数的名称或者形参列表都可以区分出是不同的函数. JS 中通过形参是没有办法区分出不同的函数的,只能通过函数的名称区分出

[js高手之路]性能优化技巧 - 缓存与函数重载实战

所谓缓存,通俗点讲就是把已经做过的事情结果先暂时存起来,下次再做同样的事情,不用再重新去做,只要把之前的存的结果拿出来用即可,很明显大大提升了效率.他的应用场景非常广泛.如: 1.缓存ajax结果,大多数网站都会有产品推荐功能,比如按热销推荐,简单低效的做法,每次点击切换的时候,都要通过ajax去数据库中取出结果,其实他的结果并不是要实时去获取,完全可以用缓存技术保存起来,减少数据库处理压力 2.单例模式,也是缓存的应用 一.缓存原理与应用 我们先来一个的简单例子,比如,判断一个数是不是素数,普

原生js函数的伪重载

一.我们在学习java的时候,其中方法有一个比较的重要的特性重载,根据传入的参数的个数来执行不同的方法,而方法其根据签名来判断,而JavaScript却不能根据方法的签名来进行重载,只能通过参数的个数的来进行实现伪重载. 在函数体中有个对象arguments,记录调用函数的传入的参数的对象: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <bo

3.3 js函数

1.函数语法: 函数声明的方式:function 函数名(参数1,参数2-){//函数体;}函数调用:函数名(参数1,参数2-); 函数内不一定都指定返回值. 如果需要指定返回值,可用 return 跟上要返回的值来指定返回值. 位于return语句后面的代码在 return 语句所在的作用域下都不执行(如果 return 语句在一个函数体内,那么这个 return 语句所在的作用域便是这个函数体内). 如果return语句后面没有跟返回值,那么返回值为undefined.适用于不需要返回值的场

js函数动态传参

js函数体内可以通过arguments对象来接收传递进来的参数,利用这一对象属性可以动态传参. function box() { return arguments[0]+' | '+arguments[1]; //得到每次参数的值 } alert(box(1,2,3,4,5,6)); //传递参数 arguments对象的length属性可以得到参数的数量. function box() { return arguments.length; //得到6 } alert(box(1,2,3,4,5

JavaScript的函数重载

java语言中函数的重载和重写可谓是很重要的概念,所以在写js的时候时不时的会想到这种用法,重写先不说,这里只说重载.. <script language="JavaScript"> function test(one) { alert("上面"); } function test(one,two) { alert("下面"); } </srcipt> 如上代码,调用的时候会发现无论你传几个参数,都只会弹出"下面

JS 函数中的arguments,call,apply

JS 函数定义的时候的参数和调用时的关系调用时实际传递的参数可以比定义的参数多或者少,见下面的两个例子 <script> function test(a,b,c){ console.log(a); } test('a'); test('a','b','c'); </script> <script> function test(a){ console.log(a); } test('a'); test('a','b','c'); </script> JS的方法