经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript函数的定义和基本使用方法
来源:jb51  时间:2022/6/27 9:03:03  对本文有异议

1.用函数语句定义

先给一个例子,该函数的功能是返回数组元素的和;

  1. function sumArray(arr) {
  2. var sum = 0;
  3. for(var i = 0,aLength = arr.length;i < aLength;i++) {
  4. sum += arr[i];
  5. }
  6. return sum;
  7. }

关键字function后面空一格,sumArray是函数的名字,其命名规范与变量名的命名规范相同:只能有字母、数字、下划线和美元符号,不能以数字开头,不能是关键字。

括号中是参数,又叫形式参数,只需要参数名就可以。参数可以是0个、1个或者多个,相互之间用,隔开,{}中间包含的是函数体。含有一条或者多条语句。函数体用来实现函数的功能。

关键字return后面是函数的返回值,函数也可以没有返回值。函数运行完return这句话这里就会退出运行,return下面的语句不再运行。返回值即函数的输出。

用这种方式定义的函数,在函数定义的前面和后面都可以调用该函数,只要函数和调用函数的语句在一个源文件里面就可以了。

2.用表达式定义

用表达式的方式定义函数,就是用赋值表达式把函数赋值给一个变量,这其实就是把函数看成一个变量。这个时候函数可以有名字,也可以没有名字,没有名字的函数叫做匿名函数。

带名字的;

  1. var funct = function getMax(a,b) {
  2. return a>b?a:b;
  3. };//注意这后面的分号不能少,因为我们定义的是一个变量!

和用函数语句定义不同的是,只能在函数定义语句之后调用该函数,且调用的时候只能用变量名funct,不能用函数名getMax,如:

  1. var funct = function getMax(a,b) {
  2. return a>b?a:b;
  3. };
  4. console.log(funct(1,2));//输出2

匿名函数;

所谓匿名函数就是关键字function之后直接是参数列表:

  1. var funct = function(a,b) {
  2. return a>b?a:b;
  3. };

这个函数没有名字,它被赋值给了变量funct,所以叫匿名函数。同样,也只能在这一语句之后调用该函数。

  1. var funct = function(a,b) {
  2. return a>b?a:b;
  3. };
  4. console.log(funct(1,2));//输出2

总结:用表达式定义函数是即拿即用的,定义了就只能在这一语句之后调用该函数

3.函数的调用

在实训四中,我们曾经介绍过对象可以有自己的方法,当然这也是函数。这种函数的调用和前面两关定义的函数有细小的区别。

  1. //函数的定义:求三个数的最大值
  2. function max(a,b,c) {
  3. if(a > b) {
  4. if(a > c)
  5. return a;
  6. else
  7. return c;
  8. }
  9. else {
  10. if(b > c)
  11. return b;
  12. else
  13. return c;
  14. }
  15. }
  16. //调用该函数
  17. var result = max(1,2,3);//result为3
  18. console.log(result);//输出3

调用函数的时候,需要传入和形参相同个数的的具体值,上面的函数有3个参数,所以下面调用的时候传入3个具体的值,1传给参数a,2传给参数b,3传给参数c。函数的返回值通过赋值符号=传给了变量result。如果函数体内没有return关键字,将返回undefined。

对象里定义的函数的调用:

  1. var ob = {
  2. id:1,
  3. getMax:function(a,b) {
  4. return a>b?a:b;
  5. }
  6. };
  7. var result = ob.getMax(2,1);//result值为2
  8. var result1 = ob["getMax"](2,1);//result1的值也是2

与上面的区别是,这里要定位到函数,需要使用对象名.函数名或者对象名["函数名"],其它相同。

4.未定义的实参

在大部分的编程语言里面,都会对调用函数时传入的实参个数和类型进行检查,而JavaScript既不检查实参的类型,也不检查实参的个数。
JavaScript中的实参会按照顺序从左到右依次匹配上形参,例如:

  1. function myFunction(a,b,c) {
  2. console.log(a);
  3. console.log(b);
  4. console.log(c);
  5. }
  6. myFunction(1,2,3);

实参1传入形参a,实参2传入形参b,实参3传入形参c。 当实参个数少于形参时,靠右的形参会被传入值undefined。如:

  1. function myFunction(a,b,c) {
  2. console.log(a);
  3. console.log(b);
  4. console.log(c);
  5. }
  6. myFunction(1,2);

实参1传入形参a,实参2传入形参b,undefined传入形参c。 如果只想给右侧的参数传入数据,可以给前几个实参传入undefined。如:

  1. function myFunction(a,b,c){
  2. console.log(a);
  3. console.log(b);
  4. console.log(c);
  5. }
  6. myFunction(undefined,1,2);

上面这两种做法不够严谨,最佳实践是给可能被传入undefined值的形参设定一个默认值。如:

  1. function getSum(a,b,c) {
  2. if(c === undefined)
  3. c = 0;
  4. console.log(a+b+c);
  5. }
  6. myFunction(1,2);

5.实参对象

JavaScript一切都是对象,实参也是一个对象,有一个专门的名字arguments,这个对象可以看成一个数组(类数组,不是真的数组),实参从左到右分别是arguments[0]、arguments[1]...,arguments.length表示实参的个数。

  1. //求参数的和
  2. function getSum() {
  3. var aLength = arguments.length;
  4. var sum = 0;
  5. for(var i = 0;i < aLength;i++) {
  6. sum += arguments[i];
  7. }
  8. return sum;
  9. }
  10. console.log(getSum(1,2,3,4,5))//输出15

这里的形参直接省略,使用arguments[i]表示。

6.对象作为参数

复杂的函数通常多达十几个参数,尽管JavaScript不做参数个数和类型的检查,但是调用时实参的顺序不能乱。开发人员需要检查每一个实参和形参的对应关系,这样效率很低。一种很好的解决方案是使用对象作为参数,函数会根据对象的属性名操作参数。

  1. function myFunction(obj) {
  2. console.log(obj.name);
  3. obj.number++;
  4. return obj.number;
  5. }
  6. myObj = {name:"myObj",number:34};
  7. myFunction(myObj);//输出myObj
  8. console.log(myObj.number);//输出35

7.函数对象作为另一个函数的参数

一个函数(为方便行文,称为a函数)可以作为另外一个函数(称为b函数)的参数,b函数最终可以返回一个具体的值。

从原理上来说,b函数在自己的函数体内调用了a函数,所以需要把a函数的名字作为实际参数传递给b函数。如下:

  1. //求最大值
  2. function getMax(a,b) {
  3. return a>b?a:b;
  4. }
  5. //求最小值
  6. function getMin(a,b) {
  7. return a<b?a:b;
  8. }
  9. //下面这个函数以函数作为参数,并最终返回一个值
  10. function getM(func,num1,num2) {
  11. return func(num1,num2);
  12. }
  13. getM(getMax,1,2);//返回2
  14. getM(getMin,1,2);//返回1

我们把a函数的名字(getMax或者getMin)传给b函数(getM()),然后在b函数内部调用传入的a函数,得到相关的结果。

总结

到此这篇关于JavaScript函数的定义和基本使用方法的文章就介绍到这了,更多相关JS函数定义和使用内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号