JS中的函数

1、为什么需要函数:

// 虽然for也能实现一些简单的 重复操作，但是 比较具有局限性。

// 我们js 里面，也有非常多的相同代码，可能需要大量重复使用。 此时我们可以利用函数。

1.1 为了解决代码的重用！(代码的复用 )

1.2 减少代码量

2、函数的封装:

// 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口( 把代码写在函数中, 通过函数名()就可以指定函数里面的代码 )

// 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

3、什么是函数:

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

// 函数是可以被命名的，它是为了解决某些功能的代码段！

// 可以被命名：表示函数是可以有名字的，也是可以没有名字的。

// 代码段：函数体

4、函数的分类:

// 分为系统内置函数和自定义函数

// 系统内置函数就是js给我们提供的函数,我们可以直接使用

// 自定义函数就是程序员根据需求自定义封装的函数

5、定义函数(声明函数):

5.1 语法 :

function 函数名( 形参1,形参2 ,形参3... ){

函数体;

return 返回值;

}

5.2 结构说明:

1. function是定义函数的关键字, 区分大小写

2. 函数名可以自定义,但是有规则和规范,跟变量名的规则和规范一样的 由a~z A~Z 0~9 _ $组成 不能以数字开头 不能使用js中的关键字和保留字

3. ()里面的是形参列表,形参就是形式参数, 形参可以省略 "形参的作用是为了接收调用函数的时才能确定的值" 形参其实就是一个变量,接收值使用的 形参是在函数中使用的; 在()里面写形参的时候,不需要加上var关键字; 形参如果没有接收到实参值的时候,默认形参的值undefined

4. 函数体就是封装在函数中的代码块, 函数体被封装到函数里面以后, 函数体代码不会执行 函数体代码需要函数被调用以后才会执行 函数被调用几次, 函数体就会执行几次

5. return 返回值, 是向函数的调用者返回指定的值 return语句可以省略

6、调用函数语法:

// 函数名( 实参1, 实参2, 实参3 ... )

7、结构说明

7.1 实参就是实际参数, 实参可以省略; "建议遵循定义函数的时候有多少个形参,我们在调用函数就传递多少个实参"

// 先写功能代码,实现功能,再封装成函数

7.2 函数形参和实参数量不匹配时:

// 1. 函数调用的时候实参不是必需的,javascript允许在调用函数的时候省略实参

// ❤❤❤实参个数等于形参个数

// 实参个数比形参个数少

// 实参个数比形参个数多

// 2. 通过 函数名.length 可以得到形参的个数

// 3. 不能省略前面的参数,只能省略后面的参数;如果一定要省略前面的参数,可以传入undefined

7.3 return关键字

7.3.1 一般在函数体里面不会有输出语句，只会有一个return关键字，将我们要输出的内容返回给"函数的调用者"。

7.3.2 return关键字是在函数体里面使用

7.3.3 如果函数体中没有return返回值, 或者只写return关键字,没有return具体值, 那么函数的调用者将得到undefined

7.3.4 return它在函数体使用有两层含义：

// 第一层含义: 当函数体里面遇到了return关键字以后，当前的这个return后面的函数体就不会再往下进行执行了。

// 第二层含义:它会向"函数的调用者"返回数据 (重点) 返回值

7.3.5 return后面如果想返回多个值, 但是多个值使用逗号隔开, 那么只能得到最后一个值

7.3.6 return后面如果想返回多个值, 我们可以把多个值放在一个数组或者对象中

7.4 函数中的arguments对象

// arguments是一个关键字,只能在函数中使用, 它的取值是一个对象,所以也称之为arguments对象 arguments的值也是一个伪数组 "会把所有实参放在一个伪数组中" 伪数组就是类似数组一样 有length长度属性 有下标 但是它不是真正的数组 不能使用数组对象的内置方法

// arguments对象用在形参个数不确定的时候

8、同名函数覆盖问题:

8.1 在同一个<script>标签里面

定义多个相同函数名的函数的时候,后面定义的函数会覆盖前面定义的函数

// JS运行的时候,会分为预解析阶段和代码执行阶段

// 预解析阶段主要负责检查语法,变量提升,函数提升等

// 代码执行阶段,就是按一定的顺序,执行我们的JS代码

8.2 在不同的外部js文件中, 定义多个相同函数名的函数, 在同一个页面中引入这些js文件, 后面引入的js文件定义的函数会覆盖前面引入js文件定义的函数

8.3 不同script标签

块中的定义的同名函数互不影响

9、匿名函数

9.1 什么是匿名函数？ 没有名字的函数 称之为匿名函数

9.2 匿名函数的使用

// 匿名函数需要"赋值给变量"或者"赋值给事件" 或者 "立即调用这个匿名函数"

9.3 调用匿名函数

匿名函数赋值一个变量

9.4 语法:

// 变量名();

// 把匿名函数赋值给一个事件(DOM知识)

// 事件被触发以后,就会执行相应的函数

9.5 立即调用的函数表达式( IIFE ):

// 也可以叫自调用匿名函数 , 简称 IIFE ( Immediately-invoked function expression )

// 自调用匿名函数使用场景: 只需要执行一次，不需要重复调用

// 在定义函数之后，就会立即调用该函数,语法如下:

;(function(){

函数体

}());

// 或者

;( function(){

函数体

} )(); 

// 注意:两种写法最后的分号都是必须的。如果省略分号，遇到连着两个 IIFE，可能就会报错。

10、其他定义函数的方式:

❤❤❤10.1 "函数声明方式" function 关键字 (命名函数) 用的多

语法:

function 函数名( 形参1, 形参2, 形参3...){

函数体;

return 返回值;

}

❤❤10.2 "函数表达式" 其实就是把匿名函数赋值给一个变量 用的多 

10.3 构造函数 new Function() 用的不多 了解即可

语法:

var 函数名 = new Function("形参1", "形参2", ..., "函数体");

// 注意: new Function()定义函数的时候, new Function()里面的参数都是字符串