第五章 javascript函数（function）的介绍和使用

一、函数的基本概念

1. 函数的概念
   • 函数，即功能。将实现了某个功能的代码，集中起来，通过函数语句进行封装，封装之后，可以选择直接执行或行为 的 代码段。
   • 函数是一种数据类型：function
     • 对象：数据的打包，函数：代码的打包
2. 函数最大的意义：封装功能
3. 函数的特点：
   • 重复使用
   • 选择使用
   • 忽略细节

二、函数的使用

1. 创建函数
   • 声明式：使用function关键字创建函数
     • function 函数名(){}
     • var 变量名
   • 赋值式：配合变量，赋个函数值，将函数作为一个值或表达式使用
     • var 变量名 = function(){}
     • 将函数作为值使用

// 固定语法：
// function 函数名(){}
    // function：声明关键字，用来声明函数
    // 函数名
    // ()：参数，函数的入口
    // {}：函数体，内放置要封装的代码
function fn(){
	console.log("hello js");
}

2. 使用函数 - 执行函数
   • 直接执行：函数名()
     • 任何正在执行空间下，任意位置，只要函数名后有小括号，函数都会立即执行
   • 行为执行：
     • 事件源.on事件类型 = 函数名;
       • btn.onclick = fn
     • 事件源.on事件类型 = 函数值;
       • btn.onclick = function(){}
3. 根据函数的写法，做函数分类
   • 有名函数
     • 声明式创建的函数：function 函数名(){}
     • 正常函数，可以正常使用
   • 无名函数
     • 没有名字的函数：function(){}
     • 无法直接使用，只能作为 值 或 表达式 使用
       1. 作为赋值式创建函数的值：var fn = function(){}
       2. 作为事件处理函数使用：btn.onclick = function(){}
       3. 作为函数的参数使用，叫回调函数：fn( function(){} )
       4. 作为函数的返回值使用，叫闭包函数：
          • function fn(){ return function(){} }
       5. 作为匿名函数的函数体：(function(){})()
   • 匿名函数：(function(){})()
     • 会自动执行
     • 用来生成新的作用域

四、函数的入口 - 参数

1. 实参：写在函数执行时的小括号内，用来发送参数，类似于值
2. 形参：写在函数创建时的小括号内，用来接收参数，类似于变量
3. 关系：类似于变量赋值，实参传给了形参，实参赋值给了形参，形参保存了实参
4. 个数：任意个
   • 形参和实参数量一致：从左向右，一一对应
   • 形参多，实参少：多出来的形参是undefined
   • 形参少，实参多：多出来的实参没有形参接收，可以找arguments获取
5. 类型：任意类型
   • 当参数为另一个函数时，作为参数的这个函数，叫回调函数
6. arguments
   • 是函数内部专用的一个内置对象，用来接收所有实参
   • 数组的形式，有索引（从0开始）和长度（xxx.length）
   • 借助循环遍历arguments中所有的数据
7. arguments和形参的应用场景
   • 当函数的参数个数确定时，使用形参
   • 当函数的参数个数不确定时，使用arguments

五、函数的出口 - 返回值

1. 返回值的意义：将函数内部的执行结果，在函数外部获取到，方便二次使用，或另作他用
2. 如何创建返回值：
   • 关键字：return
   • 语法：return 要返回的数据或变量
3. 函数如果没有return，返回的是undefined，如果有return，返回的是return后的数据
4. 个数：一个
   • 一个函数只能执行一次return，一个return只能返回一个数据
5. 类型：任意类型
   • 当返回值为另一个函数时，返回的这个函数，叫闭包函数
6. return的功能
   • 给函数返回值
   • 结束当前函数
7. 返回值的应用场景
   • 需要在外部获取函数内部数据的时候，需要给函数添加返回值
   • 做功能的函数可以不需要返回值
   • 做数据处理的函数必须要有返回值
8. 返回值，返回到哪？返回到函数的执行语句身上，整个函数的执行语句，就是函数执行后的返回值

六、函数的应用

1. 封装 打印n行m列表格的功能 函数
2. 封装 计算任意三个数字的和 函数
3. 封装 计算任意个任意数字的和 函数
4. 封装 计算任意个任意数字的积 函数
5. 封装 计算任意个任意数字的平均数 函数
6. 封装 计算任意两个数字的（和，差，积，商，余）的 函数
   • fn( 10, 3, “+”)
   • fn( 10, 3, “-”)
   • fn( 10, 3, “*”)
   • fn( 10, 3, “/”)
   • fn( 10, 3, “%”)
7. 封装 任意三个不同数字比大小，并从小到大的顺序打印的 函数
   • 穷举法：列出所有可能性
   • 参数
8. 封装 已知一个四位数，要求每位加5之后和10取余代替该数字，第一位和第四位交换，第二位和第三位交换，传入四位数，返回处理之后的数字 函数
   • 参数
   • 返回值

七、作用域

1. 作用域：变量或函数生效的区域
2. 分类
   • 全局作用域：不属于任何一个函数的区域
   • 局部作用域：属于某个函数的内部区域
   • 作用域可以嵌套：父子作用域
   • 作用域没有嵌套：兄弟作用域
3. 作用域的使用规则
   • 父作用域不可以操作子作用域中声明的变量
   • 子作用域可以操作父作用域中声明的变量
   • 兄弟之间不能互相操作对方内部声明的变量
   • 作用域链的规则：多层作用域嵌套时
     • 在某个作用域内使用变量时，会先在自身作用域查找，找不到，向上层作用域查找，依次到全局作用域，任意一层找到了，就使用，停止查找，直到全局都没找到，…
       • 获取：报错
       • 赋值：自动创建到全局
         • 类似于不声明变量，直接赋值
         • 不符合逻辑的做法，是一种缺陷，在下个版本的严格模式中被修复，修复成报错
4. 变量的生命周期
   • 局部变量：跟随局部作用域的创建声明，局部作用域的结束被释放
     • 朝生暮死
   • 全局变量：跟随程序的执行，一直存在
   • 一般情况下，推荐使用局部，尽量少用全局
     • 小技巧：利用匿名函数包裹整个代码文件，将所有的变量和使用函数都放在匿名函数内
     • 匿名函数：(function(){})()
       • 自动执行
     • 注意：匿名函数前后最好加上分号

八、声明提升

1. var声明的变量
   • 提前到当前作用域最开始的位置声明，原位赋值
2. function声明的函数
   • 提升到当前作用域最开始的位置，整体提升
3. 赋值式创建函数
   • var fn = function(){}
   • 提升的是var声明的变量，没有提升函数
4. var声明的变量和function声明的函数重名了（重名自身就是错误声明）
   • var提升的更高
   • 所以function覆盖了var声明的空间
   • 最终是function生效
5. 练习

九、函数事件执行

1. 语法：
   • 元素.on事件类型 = 函数名
   • 元素.on事件类型 = 无名函数
2. 获取元素：js选择器：id选择器
   • var ele = document.getElementById(“id名”)
3. 事件类型：行为类型：动作类型
   • 鼠标类：任意元素
     • 左键单击：click
     • 左键双击：dblclick
     • 右键单击：contextmenu
     • 按下：mousedown
     • 抬起：mouseup
     • 进入：mouseover / mouseenter
     • 离开：mouseout / mouseleave
     • 移动：mousemove
   • 键盘类：只能加给能获取焦点的元素
     • 按下：keydown
     • 抬起：keyup
   • 表单类：表单控件
     • 获取焦点：focus
     • 失去焦点：blur
     • 输入：input
     • 内容改变：change
     • 提交：submit
     • 重置：reset
   • 浏览器：window
     • 加载：load
     • 滚动：scroll
     • 改变大小：resize
4. 测试事件时注意以下问题：
   • 事件源，事件的触发方式，事件触发之后的效果体现
   • 谁的什么事件，如何触发，触发之后有什么效果

十、递归

1. 其实就是一种函数的调用方式：在函数内部执行自身
2. 递：向内执行
3. 归：向外返回
4. 递归必须要有一个递的终点、归的起点，否则会成为死递归，等同于死循环，瞬间浪费大量性能，造成程序崩溃，计算机卡死
5. 递归的特点
   • 浪费性能
   • 内存泄漏
   • 利用递归的思想解决重复执行的问题，可以节省大量代码
6. 不建议使用

十一、练习

1. 递归：斐波那契数列（兔子问题）
   • 1,1,2,3,5,8,13,21,34,55
   • 使用递归计算第n位是多少
2. 利用递归计算任意数字的阶乘
3. 使用递归计算：偶数：1/2+1/4+1/6+…+1/n，奇数：1+1/3+1/5+…+1/n
4. 封装 计算任意个数值的最大值并返回 函数
5. 封装 计算任意个数值的最小值并返回 函数
6. 封装 已知两个，个位数，计算两个个位数之间的所有整数，能组成的奇数的函数
   • 如：2，6
   • 2，3，4，5，6
   • 打印出：23，33，43，53，63，25，35，45，55，65
7. 封装 选择器 函数
   • $(“.btn”)
   • $(“#box”)
8. 测试事件执行函数（选做）
9. 学生后台测试试卷（只是测试，非考试）
10. 第一周结束了
11. 注意总结，复习