【JavaScript函数】

1 本节目标

• 说出为什么需要函数
• 根据语法书写函数
• 根据需求封装函数
• 说出形参和实参的传递过程
• 使用函数的返回值
• 使用arguments获取函数的参数

2 函数的概念

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

3 函数的使用

• 函数在使用时分为两步：声明函数和调用函数。

3.1 声明函数

// 1.声明函数
function 函数名() {
	// 函数体
}
// 举例：
function sayHi() {
	console.log('hi~~');
}
// 注意：
// function声明函数的关键字 全部小写
// 函数是做某件事情，函数名一般是动词 sayHi
// 函数不调用，自己不执行
1
2
3
4
5
6
7
8
9
10
11
12

3.2 调用函数

// 2.调用函数
函数名();
// 举例：
sayHi();
// 注意：
// 调用函数的时候千万不要忘记加小括号
// 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码
1
2
3
4
5
6
7

3.3 函数的封装

• 函数的封装是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
• 简单理解：封装类似于将电脑配件整合组装到机箱中(类似快递打包)。

4 函数的参数

4.1 形参和实参

• 函数的参数可以有，也可以没有，个数不限。
• 形参：函数定义的时候传递的参数，当前并不知道是什么，默认值为undefined。
• 实参：函数调用的时候传递的参数，实参是传递给形参的。
• 参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

// 在声明函数的小括号里面是形参(形式上的参数)
function 函数名(形参1,形参2...) {

}
// 在函数调用的小括号里面是实参(实际的参数)
函数名(实参1,实参2...);
1
2
3
4
5
6

4.2 执行过程

// 举例：
// 形参是接收实参的  隐含：aru = '酸辣土豆丝'; 形参类似于一个变量
function cook(aru) {
	console.log(aru);
}
cook('酸辣土豆丝');
1
2
3
4
5
6

4.3 注意点

• 多个参数之间用逗号隔开。
• 形参可以看作是不用声明的变量。

4.4 函数形参和实参个数不匹配问题

5 函数的返回值

5.1 return语句

• 有时我们希望函数将值返回给调用者，此时通过使用return语句就可以实现。
• 函数的返回值格式：

function 函数名() {
	return 需要返回的结果;
}
函数名();
1
2
3
4

• 代码体验：

function getResult() {
	return 666;
}
// getResult();  // getResult() = 666 实现赋值操作
console.log(getResult());

// 求任意两个数的和
function getSum(num1,num2) {
	return num1 + num2;
}
console.log(getSum(1,2));
1
2
3
4
5
6
7
8
9
10
11

5.2 函数返回值注意事项

• 函数返回值注意事项：
  1>return终止函数：return语句之后的代码不被执行。
  2>return的返回值：return只能返回一个值，如果用逗号隔开多个值，以最后一个为准。想要输入多个值，可以变相实现，比如利用数组、对象等方式。
  3>函数没有return，返回undefined：函数都是有返回值的。如果有return，则返回return后面的值；如果没有return，则返回undefined。

5.3 break,continue,return的区别

• break：结束当前的循环体(如for、while)
• continue：跳出本次循环，继续执行下次循环(如for、while)
• return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

6 arguments的使用

• 当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
• 只有函数才有arguments对象。
• arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
  1>具有length属性
  2>按索引方式存储数据
  3>不具有数组的push(),pop()等方法
  

7 函数的两种声明方式

• 利用函数关键字自定义函数

// 1.利用函数关键字自定义函数(命名函数)
function fn() {

}
fn();
1
2
3
4
5

• 利用函数表达式

// 2.函数表达式(匿名函数)
var 变量名 = function() {}
变量名();
var fun = function(aru) {
	console.log('我是函数表达式');
    console.log(aru);
}
fun('小王同学');
1
2
3
4
5
6
7
8

• 注意：
  1>fun是变量名，不是函数名；
  2>函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数；
  3>函数表达式也可以传递参数。