JavaScript第四天学习总结—— 函数

函数的概念

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

方法：实现了某个功能的一段代码

• alert()：将内容以对话框的形式弹出到界面上
• 函数就是方法，都可以理解为一个工具

面向对象的三大特征：封装，继承，多态

属性、方法、函数举例：

• .length 属性
• .toString() 方法
• String() 函数

函数的使用

使用步骤：声明函数和调用函数

声明函数

语法：

// 声明函数
function 函数名() {
   
    //函数体代码
}

注意：function 是声明函数的关键字,必须小写

注意：由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

例子：

function sayHi() {
   
    console.log('hi~~');
}

调用函数

语法：

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

注意：调用的时候千万不要忘记添加小括号

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

口诀：函数不调用，自己不执行

例子：

function sayHi() {
   
    console.log('hi~~');
}
sayHi();

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

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

再理解：函数将功能封装好，调用者不用关心里边是如何实现的，只管使用。比如alert()。

例子：封装计算1-100累加和

/* 
   计算1-100之间值的函数
*/
// 声明函数
function getSum(){
   
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
   
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

函数的参数

函数参数语法

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参

而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

形参：函数定义时设置的未知参数

实参：函数调用时传入的真实数据

参数	说明
形参	形式上的参数 函数定义的时候传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用的时候传递的参数 实参是传递给形参的

• 参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

函数参数的语法：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) {
    // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

1. 函数调用的时候实参值会传递给形参
2. 形参简单理解为：不用声明的变量
3. 实参和形参的多个参数之间用逗号（,）分隔

例子：

// 字符串与变量拼接
var str = '今年我18岁了';
var age = 18;
var str = '今年我'+age+'岁了';

//写死的函数
function cook() {
   
    console.log('酸辣土豆丝');
}	
//通过参数写活的函数
function cook(aru) {
    //形参：相当于声明了一个变量：var aru;  
    console.log(aru);
}
cook('酸辣土豆丝');//实参，相当于给变量赋值：aru='酸辣土豆丝' 
cook('大肘子');
var aru = '烩面'
cook(aru);

案例-利用函数求任意两个数的和以及累加和

// 1. 利用函数求任意两个数的和
function getSum(num1, num2) {
   
    console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
// 2. 利用函数求任意两个数之间的和
function getSums(start, end) {
   
    var sum = 0;
    for (var i = start; i <= end; i++) {
   
        sum += i;
    }
    console.log(sum);
}
getSums(1, 100);
getSums(1, 10);
// 3. 注意点
// (1) 多个参数之间用逗号隔开
// (2) 形参可以看做是不用声明的变量

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

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为underfuned，结果为NaN

注意：在JavaScript中，形参的默认值是undefined（形参其实就是变量，所以跟变量默认值一样）

小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔

函数与for循环对比

for循环： 避免重复代码的书写，将重复代码（循环体）连续不间断的执行 （for循环执行重复代码，是一瞬间立马执行完）

函数：避免重复代码的书写，将重复代码（函数体），可以间断调用（放到一个公用的js文件中，很多html都可以使用） （只有调用才会执行）

函数的返回值

return 语句

使用原因：希望函数将值返回给调用者，此时通过使用 return 语句就可以实现

语法：

// 声明函数
function 函数名（）{