四、函数的基本概念和使用

一、函数的概念和特点

1. 函数的概念：由一堆代码组成，实现了某个功能，可以被直接调用或事件控制的代码段。在计算机中，可以将函数看做封装后的功能代码块

   比如生活中随处可见的家用电器：由一堆电路板，元器件，组装而成，能实现某一个或多个功能，可以由遥控器或开关控制的机器

2. 函数的特点

   • 选择执行：封装之后，可以选择在将来的其他程序中使用
   • 重复执行：封装之后，可以在不同的程序或功能中重复调用
   • 忽略细节：封装之后，每次使用函数时，都不需要考虑其内部实现

3. 组成

   • 名字
   • 功能代码
   • 入口
   • 出口

二、函数的创建和执行

1. 创建函数 - 打包的容器

   • 声明式：
     • 声明函数的关键字：function
     • function 函数名(){...}
       • function：声明关键字
       • 函数名：函数的名字，可以用来找到这个函数
       • ()：参数列表，函数的入口
       • {}：组成功能的代码，函数的执行语句
   • 赋值式：
     • 利用变量进行赋值
     • var 变量名 = function(){}

2. 函数的执行 - 使用这个容器内的功能

   • 直接执行：名字()
     • 如：printTable()
     • 注意：任何情况下，只要 名字() 都会作为函数执行，哪怕不是函数
   • 事件执行：事件源.on事件名 = 函数
     • 如：btn.onclick = printTable
     • 如：btn.onclick = function(){...}

3. 根据写法，函数的分类：

   • 有名函数：function fn(){...}
     • 正常函数，正常使用
   • 无名函数：function(){...}
     • 不完整函数，不允许直接使用，直接使用会报错，只能作为值使用
     1. 作为 赋值式创建函数 的值：var abc = function(){}
     2. 作为 事件处理函数 使用，被事件执行：btn.onclick = function(){}
     3. 作为 实参 使用（回调函数：当一个函数A作为参数传入另一个函数B中，作为参数的函数A是函数B的回调函数）：fn( function(){} )
     4. 作为 函数的返回值 使用（闭包函数：当一个函数A内部，又返回了另一个函数B，此时称函数B是函数A的闭包函数）：function fun(){ return function(){} }
     5. 作为 匿名函数的函数体 使用：(function(){})()
   • 匿名函数：(function(){})()
     • 会立即自动执行
     • 利用匿名函数，生成作用域（见下章）

4. 事件（执行函数）

   • 事件是一种行为，动作，交互的体现。需要通过某些行为主动触发，触发之后，执行对应的功能的过程

   • 鼠标类：

     • 单击: click
     • 双击: dblclick
     • 按下: mousedown
     • 抬起: mouseup
     • 移动: mousemove
     • 进入: mouseover / mouseenter
     • 离开: mouseout / mouseleave
     • 右键: contextmenu

   • 键盘类

     • 按下: keydown
     • 抬起: keyup
     • 按下并抬起: keypress

   • 页面或浏览器类

     • 滚动: scroll
     • 加载: load
     • 改变大小: resize

   • 表单类：

     • 获取焦点: focus
     • 失去焦点: blur
     • 改变内容: change
     • 输入: input
     • 提交: submit
     • 重置: reset

   • 绑定事件的方式：事件源.on事件名 = 事件处理函数。如：btn.onmousemove = function(){...}

     • 注意：当前事件应该添加给哪个事件源
     • 注意：当前事件应该怎样的行为触发

三、函数的参数 - 入口

• 在函数定义时，我们可能会提前在函数内提前定义不同的功能的执行方式，或将来可能会处理不同的数据。
• 在函数执行时，我们为了可以动态的向函数内部传输数据或不同的状态，让函数内部可以根据传入数据的不同，选择执行不同的功能，就此产生了参数

1. 参数的分类
   • 函数执行时，发送的参数，叫实参
   • 函数定义时，接收的参数，叫形参
   • 实参和形参的关系：实参传给了形参，形参保存了实参，实参赋值给了形参，类似于变量赋值，形参需要遵守变量的命名规范。

     function log(text){
             
             
     	console.log(text)
     }
     log("hello");		// hello
     log(365);			// 365
     

2. 参数的类型：函数自身没有对参数类型进行限制，可以传入任意类型的数据（已经指定了参数类型的函数除外）
3. 参数的个数：函数自身没有对参数个数进行限制，可以传入任意个数据（已经指定了参数个数的函数除外）
   • 当实参和形参的数量一致是：参数列表从左向右，实参和形参一一对应
   • 当形参比实参多时：多出来的形参没有接受到实参，表示没有赋值，为undefined
   • 当实参比形参多时：多出来的实参，没有被形参接收，可以使用arguments获取
4. arguments
   • 函数内部内置的类数组对象，用来接收当前函数所有的实参。
   • 因为arguments是一个类数组，所以具有数组索引和长度
     • arguments.length：数组的长度，实参的个数
     • 解析arguments每一个数据：配合索引n，n的取值范围为：0~length-1
       • arguments[n]

     function fn(){
             
             
         for(var i=0;i<arguments.length;i++){
             
             
             console.log(arguments[i])
         }
     }
     fn(4,25,16,785,345,"WORLD");
     

5. 关于参数的应用
   • 当函数的参数个数确定时，使用具体个数的形参接收即可

     // 编写函数，计算两个任意数字的和
     function sum(num1, num2){
             
             
     	console.log(num1 + num2);
     }
     sum(4,6);		// 10
     sum(5,9);		// 14
     sum(12,23);		// 35
     

   • 当函数的参数个数不确定时，可以使用arguments获取到所有的实参

     // 编写函数，计算任意个任意数字的和
     function sum(){
             
             
         var s = 0;
         for(var i=0;i<arguments.length;i++){
             
             
             s += arguments[i];
         }
         console.log(s);
     }
     sum(1,2);			// 3
     sum(4,2,6,2,8,1);	// 23
     sum(16,45,21,9);	// 91
     

四、函数的返回值 - 出口

• 当我们拥有一个处理数据的函数时，为了在函数外部能拿到函数处理的数据结果，并对数据进行二次使用或另做他用。我们给函数设置返回值，也就是添加函数的出口

1. 设置返回值 - 关键字：
   • return 要返回的数据或变量
   • return将函数内部的执行结果，返回到函数的执行语句上，并立即结束函数执行
   • 如果一个函数没有return，那么他的返回值是undefined

     function fn(){
             
             
     	return "hello";
     }
     console.log( fn() );		// hello
     
     function fun(){
             
             }
     console.log( fun() );		// undefined
     
     

2. 返回值的类型：函数自身没有对返回值类型进行限制，可以返回任意类型的数据（已经指定了返回值类型的函数除外）
3. 返回值的个数：因为return有结束函数的功能，所以，一个函数只能有一个返回值（如需返回多个数据，可以利用数组或对象对数据进行打包后，再做返回）

   function fn(){
         
         
   	console.log(1);
   	return "hello";
   	console.log(2);
   }
   fn();		// 1
   

4. 返回值的应用场景
   • 实现功能的函数：可以不需要返回值

     function log(text){
             
             
     	console.log(text);
     }
     // 简化了打印功能，不需要返回值
     log("hello");		// hello
     

   • 处理数据的函数：尽量添加返回值

     function sum(a,b,c){
             
             
     	return a+b+c;
     }
     // 计算指定数据累加和，将计算结果返回到函数外部
     console.log( sum(5,2,4) );	// 11
     

五、练习

1. 编写一个函数，计算两个数字的和／差／积／商／余。要求：使用传参的方式
2. 编写一个函数，计算三个不同数字的大小，按从小到大顺序打印。使用穷举法
3. 编写任意个任意数字的求 和 或 积 的函数
4. 编写一个函数，计算任意两个数字之间所能组成的两位数的奇数，数字必须是个位数
   比如： 计算0，3之间能组成的奇数个是01、21、03、13、23、31
5. 某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文