JavaScript学习总结(七)——JavaScript函数(function)

转载自 JavaScript学习总结(七)——JavaScript函数(function)

一、函数基本概念

　　为完成某一功能的程序指令(语句)的集合，称为函数。

二、JavaScript函数的分类

　　1、自定义函数(我们自己编写的函数)，如：function funName(){}

　　2、系统函数(JavaScript自带的函数)，如alert函数。

三、函数的调用方式

　　1、普通调用：functionName(实际参数...)

　　2、通过指向函数的变量去调用：

　　　　　　var myVar=函数名;

　　　　　　myVar(实际参数...);

四、函数返回值

　　1.当函数无明确返回值时，返回的值就是"undefined"。

　　2.当函数有返回值时，返回值是什么就返回什么。

函数测试代码：

<script type="text/javascript">var str="window.alert('孤傲苍狼');";eval(str);//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。/*自定义函数*/function test(str){alert(str);}window.alert(test);//输出test函数的定义//函数的调用方式1test("孤傲苍狼");//函数的调用方式2var myFunction=test;myFunction("白虎神皇");window.alert(myFunction);/*当函数无明确返回值时，返回的也是值 "undefined"*/var retVal=test("test");//test函数执行完之后，并没有返回值，因此retVal变量接收到的返回值结果是undefinedalert("retVal="+retVal);//输出undefined</script>

五、函数的深入使用

5.1、可变参数

　　函数的参数列表可以是任意多个，并且数据类型可以是任意的类型，JavaScript的函数天然支持可变参数，JavaScript有一个arguments变量可以访问所有传到函数内部的参数。

范例：JavaScript使用arguments创建参数可变的函数

<script type="text/javascript">/*add函数是一个参数可变的函数*/function add(){var result=0;for(var i=0;i<arguments.length;i++){//alert(arguments[i]);result+=arguments[i];}return result;}alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数alert("add()="+add());//调用add函数时不传入参数alert("add(1,\"HelloWorld\")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数</script>

运行结果：

5.2、javascript创建动态函数

　　JavaScript支持创建动态函数，动态函数必须用Function对象来定义（Function是javascript中的一个对象，是固定不变的，规定Function对象的"F"必须大写，当是function的时候，我们知道是定义函数的时候所使用的一个关键字：function funName(x，y)，当是Function的时候（F大写的时候），我们知道是javascript中的对象）

　　创建动态函数的基本格式：var 变量名 = new Function("参数1"，"参数2"，"参数n"，"执行语句");

　　使用new关键字（new是javascript中一个关键字，也是固定的，我们在定义动态函数的时候必须要使用new来创建这个Function对象）

　　我们先定义一个变量： var 变量名，在这里，变量名是随便的，然后我们再使用new关键字创建一个Function对象，然后再把这个对象赋值给这个任意的变量，也就是：var 变量名 = new Function("参数1"，"参数2"，"参数n"，"执行语句");Function后面的括号里先是传递给函数的参数，然后用一个逗号（，）隔开然后是这个函数要执行的功能的代码

看下面的一段代码：

<script type="text/javascript">var square = new Function ("x","y","var sum ; sum = x+y;return sum;");alert("square(2,3)的结果是："+square(2,3));
</script>

　　square是动态创建的函数，在Function对象后面的括号里的每一部分内容都必须是字符串形式的，也就是说都必须用引号（""或者是''）括起来，第一部分是传递给这个动态函数的第一个参数“x”，第二部分是传递给这个动态函数的第二个参数“y“，第三部分是这个函数要完成的功能的代码，这个函数要完成的功能是定义一个变量sum，让sum等于传递给这个函数的两个参数x和y的和，然后返回他们相加以后的值（return sum），调用后运行结果如下：

这段代码：

var square = new Function ("x","y","var sum ; sum = x+y;return sum;");

和下面这段代码：

function square (x,y){var sum;sum = x+y;return sum;
}

是一摸一样的，只不过一个是动态函数，一个是静态函数。

那下面我们就来想一下，为什么要用动态函数呢，动态函数有什么特殊的地方有什么优点呢？

在静态函数里是：

function square (x,y){var sum;sum = x+y;return sum;
}

而在动态函数里是：

 new Function ("x","y","var sum ; sum = x+y;return sum;");

　　我们可以看到，每一个句子两边都加上了引号"x"还有"y"还有"var sum ; sum = x+y;; return sum;"这些两边都加上了引号，也就是说在new Function后面的小括号里面的每一个语句两边都是有引号的，也就是说他们都是以字符串的形式表示和被调用的，而字符串又是可以由变量来定义或者是改变的，也就是说，我们可以定义变量，让变量的值等于这些字符串：

<script type="text/javascript">var a = "var sum;";var b = "sum = x + y;";var c = "return sum;";var square = new Function ( "x", "y", a+b+c);alert(square (2,3));7 </script>

在这里，我们定义了变量a，b，c，我们让a="var sum;"，让b="sum = x+y;"，让c = "return sum;"

　　这样：var square = new Function ("x","y","var sum ; sum = x+y;return sum;");

　　我们就可以写成：var square = new Function ( " x", "y",a+b+c);因为a，b，c是三个字符串，字符串相加得到的还是字符串。

　　我们为什么要把代码分成一小段一小段的代码呢？，把一个字符串分成了若干个独立的字符串的优点就在于我们可以通过修改其中的某些字符串来随时改变函数的作用。

例如：

<script type="text/javascript">var a = "var sum;";var b = "sum = x + y;";var c = "return sum;";var square = new Function ( "x", "y", a+b+c);alert(square (2,3));b = "sum = x -y;";square = new Function ( " x", "y",a+b+c);alert(square (2,3));</script>

　　我们在程序运行的过程中，把b = "sum = x+y;";改成了"sum = x-y;";这样我们再把修改了值以后的变量b，放到var square = new Function ( "x", "y", a+b+c);中，

那("x","y","var sum ; sum = x+y;return sum;");就变成了：("x","y","var sum ; sum = x - y;return sum;");我们把传递给这个动态函数的参数2和3放进去，就变成了2-3，结果是-1。

5.3、匿名函数

var f1 = function(i1, i2) {return i1 + i2;
}
alert(f1(1,2));

　　这种匿名函数的用法在JQuery中的非常多

alert(function(i1, i2) { return i1 + i2; }(10,10));

　　直接声明一个匿名函数，立即使用。用匿名函数的好处就是省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突，一旦命名冲突以最后声明的为准。

5.4、JavaScript不支持函数的重载

　　JavaScript没有方法重载的说法，如果两个方法名字一样，即使参数个数不一样，那么后面定义的就会覆盖前面定义，调用方法时永远是调用后定义的那个。

用如下的代码证明JavaScript不支持函数的重载：

<script type="text/javascript">function Test(a){alert(a);}function Test(a,b){alert("HelloWorld!");}function Test(a,b){alert(a+" "+b);}Test(20);//调用的是最后定义的那个Test方法Test(30,50);//调用的是最后定义的那个Test方法
</script>

运行结果：