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

Stella981
• 阅读 680

一、函数基本概念

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

二、JavaScript函数的分类

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

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

三、函数的调用方式

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

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

      var myVar=函数名;

      myVar(实际参数...);

四、函数返回值

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

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

函数测试代码:

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

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

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

 五、函数的深入使用

5.1、可变参数

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

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

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

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

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

运行结果:

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后面的括号里先是传递给函数的参数,然后用一个逗号(,)隔开然后是这个函数要执行的功能的代码

看下面的一段代码:

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

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

这段代码:

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

和下面这段代码:

1 function square (x,y){
2      var sum;
3      sum = x+y;
4      return sum;
5 }

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

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

在静态函数里是:

1 function square (x,y){
2       var sum;
3       sum = x+y;
4       return sum;
5 }

而在动态函数里是:

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

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

 1 <script type="text/javascript">
 2     var a = "var sum;";
 3     var b = "sum = x + y;";
 4     var c = "return sum;";
 5     var square = new Function ( "x", "y", a+b+c);
 6     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是三个字符串,字符串相加得到的还是字符串。

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

例如:

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

 1 <script type="text/javascript">
 2     var a = "var sum;";
 3     var b = "sum = x + y;";
 4     var c = "return sum;";
 5     var square = new Function ( "x", "y", a+b+c);
 6     alert(square (2,3));
 7     b = "sum = x -y;";
 8     square = new Function ( " x", "y",a+b+c);
 9     alert(square (2,3));
10  </script>

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

  我们在程序运行的过程中,把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、匿名函数

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

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

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

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

5.4、JavaScript不支持函数的重载

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

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

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

 1  <script type="text/javascript">
 2     function Test(a){
 3         alert(a);
 4     }
 5     function Test(a,b){
 6         alert("HelloWorld!");
 7     }
 8     function Test(a,b){
 9         alert(a+" "+b);
10     }
11 
12     Test(20);//调用的是最后定义的那个Test方法
13     Test(30,50);//调用的是最后定义的那个Test方法
14 </script>

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

运行结果:

  JS引擎调用一个函数时,是根据函数名来调用的,如果有多个函数名相同的函数,那么JS引擎则只认最后定义的那个,调用时以最后定义的那个函数为准!

  JS的函数没有专门的函数默认值的语法,但是可以不给参数传值,不传值的参数值就是undefined。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Lua基础(对象)
:和.区别.   stu{id100,name"Tom",age21}成员变量   function stu.toString()成员函数    return stu.id .. stu.name .. stu.age   endprint(stu
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这