JS的函数

函数：就是封装了一段可被重复执行的代码块。通过此代码块可以实现大量代码的重复使用

函数的创建

1. 声明式函数
   语法: function 名字( ) { }
   function: 就是一个声明函数的关键字
   名字: 就是你给这一段空间自定义的一个名字, 命名规则和命名规范同变量名
   (): 存放参数的位置, 现在先不说, 一会详细讲, 必须写
   { }: 就是你存放的一段代码

	//定义一个函数 - 声明式function fn() {console.log('我是声明式函数')}

2. 赋值式函数
   语法: var 名字 = function ( ) { }
   var: 定义变量的关键字
   名字: 就是我们给这个函数起的一个自定义名称
   =: 赋值
   function: 表示一个函数
   ( ): 写参数的位置, 必须写, 一会再说时干啥的
   { }: 存放一段代码的

	// 定义一个函数 - 赋值式var fn = function () {console.log('我是赋值式函数')}

函数的调用

1. 直接调用
   当你定义好一个函数以后
   如果你想让这个函数内部的代码执行一下
   直接写 -> 函数名( )
   函数名: 你要让哪一个空间里面的代码执行
   ( ): 就是调用的意思
2. 依赖行为调用( )
   需要给一个元素绑定一个行为
   在 js 里面获取一个页面元素有一个简单的办法, 就是直接使用 id 名称
   在一个页面里面, 一个元素的 id 名称可以直接被当作一个 js 的变量来使用
   这个 id 名表示的就是这个元素
   暂时添加一个点击行为, 就是 onclick
   元素.onclick -> 表示当点击这个元素的时候
   给他赋值为一个函数名称就可以了
   不需要写小括号, 因为我不是让你直接执行
   而是当点击的时候在执行

调用时机上的区别

当你调用一个函数的时候, 方式都是一样的
但是调用的时机, 取决于你使用哪种方式定义函数

声明式函数(function fn() {})
可以在声明之前调用, 也可以在声明之后调用

赋值式函数(var fn = function () {})
只能在声明之后调用, 声明之前调用会报错

函数的参数

1. 形参
   就是写在函数定义时候的 () 里面的
   可以写多个, 多个的时候中间用 逗号(,) 分隔
   就是一个只能在函数内部使用的变量
   至于这个变量(形参) 的值是什么, 由函数的实参决定
2. 实参
   就是写在函数调用的时候的 () 里面的
   可以写多个, 多个之间使用 逗号(,) 分隔
   是一个准确的数据
   用来给对应的形参赋值的

 function fn(a) {	// a 就是一个只能在函数内部使用的变量名console.log(a)}fn(100)		// 这个位置的小括号里面的内容叫做实参, 是用来给形参赋值的

函数参数的个数关系

1. 形参和实参一样多
   按照从左到右的顺序一一进行赋值

     function fn(a, b, c) {console.log(a)console.log(b)console.log(c)}fn(1, 2, 3)

=
2. 形参比实参多
前面的一一对应的关系, 多出来的形参, 没有实参进行赋值
在函数内部使用的时候, 就是一个没有赋值的变量, 就是 undefined

 function fn(a, b, c) {// 在这个函数里面, c 就相当于定义了一个变量, 但是没有被赋值// c 在使用的时候就是 undefinedconsole.log(a)console.log(b)console.log(c)}fn(1,2,3)

3. 实参比形参多
   前面的一一对应的关系, 多出来的实参, 在函数内部没有形参接收
   相当于你白写了多出来的实参, 在函数内部不能直接使用

function fn(a, b, c) {// 我在这里不能直接使用传递进来的 200 300 400 500// 但是不会报错console.log(a)console.log(b)console.log(c)}fn(1, 2, 3, 100, 200, 300)

arguments

函数内部的一个特殊的变量, arguments
在每一个函数内部, 都有一个天生的变量
不需要我们取定义, 直接就能拿来使用
这个变量叫做 arguments
表示所有实参的集合

  详解 arguments会把所有的实参按照从左到右的顺序依次排好给每一个实参一个编号(索引 / 下标)这个编号(索引 / 下标) 是从 0 开始的, 依次递增当你需要获取到这里面的某一个的时候你只要写 arguments[编号] 就能得到某一个准确的值arguments 还有一个属性叫做 length表示 arguments 这个集合的长度, 也就是里面有多少个数据值是一个 number 数据类型的数字如果你想得到这个属性就写 arguments.length使用循环遍历整个 arguments 获取到每一个数据因为 arguments 的索引(下标) 是按照从 0 开始依次叠加的顺序我们的循环刚好也可以给我提供一组有规律的数字所以我们可以使用循环的方式来遍历 arguments循环遍历的时候为什么要小于 length当 length === 5 的时候, 我们要的索引数字是 0 1 2 3 4for (var i = 0; i < 5; i++) {} 得到的 i 分别时 0 1 2 3 4当 length === 7 的时候, 我们要的索引数字是 0 1 2 3 4 5 6for (var i = 0; i < 7; i++) {} 得到的 i 分别是 0 1 2 3 4 5 6什么时候使用 arguments 什么时候使用形参因为函数是我们提前定义好的, 为了更好的书写代码, 为了以后多次调用当我们定义函数的时候, 我就能确定以后我使用的时候的实参的个数我们推荐使用形参的方式来获取, 因为方便当我们定义函数的时候, 我不能确定以后我使用的时候的实参的个数我们推荐使用 arguments 的形式来获取, 因为灵活// 循环遍历 arguments

function fn() {// 五个数据的索引分别是 0 1 2 3 4console.log(arguments)// 使用循环提供一个从 0 ~ 4 的数字// 循环的结束位我们应该根据 arguments 的 length 来决定for (var i = 0; i < arguments.length; i++) {// console.log(i) // i 得到的就分别时 0 1 2 3 4// 当 i === 0 的时候, 使用 arguments[0]// 当 i === 1 的时候, 使用 arguments[1]// 当 i === 2 的时候, 使用 arguments[2]console.log(arguments[i])}}fn('我是1', '我是2', '我是3', '我是4', '我是5')

  function fn() {// arguments 不需要定义, 直接使用就行console.log(arguments)console.log(arguments[0]) // 我要获取 arguments 里面索引为 0 的那一项console.log(arguments[1]) // 我要获取 arguments 里面索引为 1 的那一项console.log(arguments[2]) // 我要获取 arguments 里面索引为 2 的那一项console.log(arguments[3]) // 我要获取 arguments 里面索引为 3 的那一项console.log(arguments.length) // 我要获取 arguments 这个集合的长度}fn('hello', 'world', 100, 200)