1. 函数的概念

1.1 什么是函数

函数具有某种特定功能的代码块。
函数其实本质也是一种数据，属于对象数据类型。

1.2 为什么要有函数

1）解决代码的冗余问题，形成代码复用。
2）可以把整个代码项目，通过函数模块化。
3） 封装代码，让函数内部的代码对外部不可见。

2. 函数的组成

函数的声明：
day05 - 图1
函数的调用：
image.png
函数由如下部分组成：

  • 函数名，命名规则同变量名一致。
  • 函数体， 函数的内容，代码块。
  • 参数， 分为形参和实参。

  • 返回值， 函数调用表达式的结果

    定义函数的三种方式

  • function关键字方式/字面量方式 ```html function 函数名() {

} function 函数名(参数) {

}

  2. - 表达式方式
  3. ```html
  4. var 函数名 = function(){
  6. }
  7. var 函数名 = function(参数) {
  9. }
  • Function构造函数方式
    1. var 函数名 = new Function('函数体');
    2. var 函数名 = new Function('参数', '函数体')

    4 函数调用

    1) 在函数名后面加上 () 就是对函数的调用，函数内的代码会执行。
    2) 函数名后面不加() 不会调用函数，函数内的代码也不会执行；函数名本质上是个变量名，通过函数名可以引用到函数本身。

    5 函数的返回值

    5.1 返回值

    1）函数名() 被称之为函数调用表达式， 表表达式的值就是函数的返回值。
    2）在函数体内，return 右边的表达式（或变量、直接量）便是函数的返回值。
    3）函数体内没写 return 或者 return 的右边是空的，默认默认会返回 undefined。
    4）return 除了设置返回值外，还可以结束函数的执行，return 之后的代码不会执行。

    5.2 那些函数需要些返回值

    什么样的函数需要写返回值？
    如果函数的作用是进行某种计算，得到的计算结果最后以返回值的形式返回。
    什么样的函数不需要返回值？
    函数的功能是实现某个具体的操作（界面操作），无需返回值。

    6 函数的参数

    6.1 形参和实参

    形参： 声明函数的时候，给的参数， 类似于变量名；在声明函数的时候，参数是没有值。
    实参：调用函数是给的参数； 实参会按照顺序赋值给形参。

    6.2 形参和实参的数量问题

    正常情况下，实参数量应该等于形参数量。
    如果实参数量大于形参数量， 多出来的实参，将被忽略。
    如果实参数量小于形参数量， 有的形参没有对应的实参，取默认值 undefined。

    6.3 形参的默认值

    JS函数允许形参有默认值，有默认值的形参，在调用函数的时候，可以没有与之对应的实参！
    如何实现形参的默认值？
    1. function demo(a, b=默认值) { } 
    2. 注意： 有默认值的形参一定要放在后面！
    es6才可以这么写，那问题来了，如果es6前应该怎么去设置默认值
    day05 - 图3
    image.png

    6.4 arguments

    arguments 只能在函数内使用。

arguments 是一个类数组对象，具有数组的一些特性。

arguments可以获取所有的实参，所以我们想获取实参的话有两种方式：①用形参；②使用arguments。

用途：如计算所有参数和，取参数中的最大值，取参数中的最小值，求所有参数平均数。

  1. /**
  2.  * 取所有参数里面的最大值
  3.  */
  4. function max() {
  5.   //设置遍历 默认值的最大值
  6.   var res = arguments[0];
  7.   // 循环比较
  8.   for (var i = 0; i < arguments.length; i ++) {
  9.     if (arguments[i] > res) {
  10.       res = arguments[i];
  11.     }
  12.   }
  13.   // 返回结果
  14.   return res;
  15. }
  17. /**
  18.  * 取所有参数里面的最小值
  19.  */
  20. function min() {
  21.   var res = arguments[0];
  22.   // 循环比较
  23.   for (var i = 0; i < arguments.length; i ++) {
  24.     if (arguments[i] < res) {
  25.       res = arguments[i];
  26.     }
  27.   }
  28.   // 返回结果
  29.   return res;
  30. }
  1. /**
  2.  * 取所有参数的和
  3.  */
  4. function total() {
  5.   var res = 0;
  6.   for (var i = 0; i < arguments.length; i++) {
  7.     res += arguments[i];
  8.   }
  9.   return res
  10. }
  11. console.log(total(1, 2, 3, 4, 5))
  14. /**
  15.  * 取所有参数的平均数
  16.  */
  17. function average() {
  18.   var res = 0, ave = 0;
  19.   for (var i = 0; i < arguments.length; i++) {
  20.     res += arguments[i];
  21.   }
  22.   ave = res / arguments.length;
  23.   return ave
  24. }
  25. console.log(average(1, 1, 4));

7 函数的嵌套

函数体内是可以再嵌套函数的。

8 自调用函数 IIFE(Immediately Invoked Function Expression)

8.1 匿名函数

没有名字的函数称之为 匿名函数。

  1. function() {
  2.     //匿名函数
  3. }

匿名函数声明完之后要立即调用，否则没有意义。

8.2 自调用函数

函数声明完立即调用，称之为自调用函数，也叫立即调用函数，英文简称 IIFE，英文全称 Immediately Invoked Function Expression。

  1. // 函数允许匿名，但是匿名的函数要立即使用
  2. // 自调用函数，立即调用函数
  3. (function(){
  4. console.log('哈哈哈，我被调用了');
  5. })();
  7. // 自调用函数 传参
  8. (function(a, b){
  9. console.log(a+'和'+b+'跳舞');
  10. })('曹操', '刘姥姥');
  13. // 当然不匿名的自调用函数也是可以的，不过没有意义
  14. (function fn(){
  15.   console.log('fn 被调用了');
  16. })();
  19.  (function(){})();
  21.   ~function(){}();
  23.   +function(){}();
  25.   -function(){}();
  27.   !function(){}();

注意：
两个连续的自调用函数，之间必须加分号，告诉浏览器是不同的函数，否则会有语法错误。
或者，在后面的自调用函数前加 ! 等没有副作用的一元运算符。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>函数的练习</title>
  6. </head>
  7. <body>
  8. <button id="red">红色</button>
  9. <button id="green">绿色</button>
  10. <button id="blue">蓝色</button>
  11. <button id="pink">粉色</button>
  13. <script>
  14.     /*
  15.     * 当点击不同的按钮的时候 让页面加载相应的颜色
  16.     * 改变屏幕的颜色 就是控制body的背景颜色
  17.      */
  18.     var oBody=document.getElementsByTagName("body")[0];
  19.     var oRed = document.getElementById("red");
  20.     var oGreen = document.getElementById("green");
  21.     var oBlue = document.getElementById("blue");
  22.     var oPink = document.getElementById("pink");
  24.     function changeColor(col){
  25.         oBody.style.backgroundColor = col;
  26.     }
  27.     oRed.onclick=function () {
  28.         changeColor("red");
  29.     }
  30.     oGreen.onclick=function () {
  31.         changeColor("green");
  32.     }
  33.     oBlue.onclick=function () {
  34.         changeColor("blue");
  35.     }
  36.     oPink.onclick=function () {
  37.         changeColor("pink");
  38.     }
  40. </script>
  41. </body>
  42. </html>