函数

第五单元、 函数

5-1 函数的概念和作用

概念：函数就是定义一次但是可以调用执行任意多次的JS代码块。

作用：a) 使程序变得更简短而清晰 

函数作用

		   b) 有利于程序维护

		   c) 可以提高程序开发的效率

		   d) 提高了代码的复用性、可读性等

将一个可以操作的行为动作定义好，可以在任何时候任意多次的重复操作这个行为而不需要编写重复的代码

/*12月1号。中午12：10分*/
        var step1 = "进门";
        var step2 = "找位置";
        var step3 = "点餐【小面】";
        var step4 = "吃饭";
        var step5 = "埋单";
        var step6 = "走人";

        document.write(step1 + "-"+ step2 + "-" + step3 + "-" + step4 + "-" +step5 + "-" + step6);

        /*12月4号，聚餐*/
        var step1 = "进门";
        var step2 = "找位置";
        var step3 = "点餐【火锅】";
        var step4 = "吃饭";
        var step5 = "埋单";
        var step6 = "走人";

        document.write(step1 + "-"+ step2 + "-" + step3 + "-" + step4 + "-" +step5 + "-" + step6);

        /*
        上面的代码，出现了大量的重复
            一部分代码[step1~step6]实现了一个相同的行为/操作
                但是由于这个行为，不定时的会执行，每次执行的时候，都要重复这些代码。对于开发人员来说~工作压力有点大
            模拟现实生活，相同的行为操作，被包含在一个代码块中，个代码块定义一个变量名称，使用这些代码的时候，通过变量名称直接使用

            类似上面的吃饭的过程，将整个吃饭的代码，包含在一对大括号里面[代码块]
                使用function进行定义，function后面紧跟着一个变量名称[就是给代码块定义的名字]
                通过代码块的名字，就可以让代码块中的代码执行

                >>> 一旦代码放到了function代码块中，代码不会立即执行。而是通过 代码块 名称执行的时候才会执行

                ————————————————————————————————————————————————————————————————————————————————
>>>将一部分要重复使用的代码，包含在一个function定义的大括号中。方便重复使用

>>> function包含代码块之后，这个东西，就称为【函数】

>>> 函数的定义: 函数定义好之后，不会立即执行。
function 函数名称() {
// 函数中需要执行的代码
}

>>> 函数的调用：通过函数名称，调用执行函数中的代码
函数名称();

>>> 函数名称的命名规则：和变量一模一样

——————————————————————————————————————————————————————————————————————
*/
        function eat() {
            var step1 = "进门";
            var step2 = "找位置";
            var step3 = "点餐【火锅】";
            var step4 = "吃饭";
            var step5 = "埋单";
            var step6 = "走人";

            document.write("该吃饭了：" + step1 + "-"+ step2 + "-" + step3 + "-" + step4 + "-" +step5 + "-" + step6 + "<br />");
        }

        document.write("------------------------------");
        eat();// 早餐调用eat，让eat中的代码开始执行

        eat();// 午饭，第二次执行

        eat();//晚饭

5-2 函数的定义

• javascript中通过function关键字来声明定义一个函数

• 声明函数有两种方式：1、直接声明。 2、赋值式声明。 3、构造函数声明

  // 直接声明
  function 函数名称() {
  函数中要执行的代码;
  }

  // 赋值式声明
  var 函数名称 = function () {
  函数中要执行的代码;
  }

• 函数定义好之后，函数中的代码在程序运行过程中不会执行；

• 通过函数名称调用函数，调用时执行函数中的代码；

  /*
  关于函数：就是一个可以执行的行为动作
  就是包含了一堆代码的代码块
  今天的课程安排：
  >>> 复习
  >>> 函数介绍
  >>> 函数的声明【重点】
  >>> 函数的调用【重点】
  >>> 事件的概念【了解】
  >>> 常见事件【了解】
  >>> 不同的函数【重点】
  >>>> return关键字
  >>> 函数调用函数
  >>> 函数递归【比较重的重点】
  >>> with关键字【了解】

        1. 定义函数
        2. 调用函数
         */
        /*
        1. 定义函数有两种方式
            重点：函数一定是有名称的，方便调用
         */
        /*第一种，直接使用function 函数名称(){}进行定义*/
        function play() {
            document.write("晚上开黑!!!!!");
        }
        /*第二种，通过把函数保存在一个变量中，进行定义*/
        var eat = function() {
            document.write("中午吃饭，四喜丸子~~~");
        }
        /*
        2. 函数的调用
            通过函数的名称，调用函数
            通过函数名称调用函数时，函数名称();
         */
        play();
        eat();
  

5-3 函数的命名

• 函数名的命名规则：和变量一模一样

5-4 函数的调用

• 函数的调用：通过函数名称，调用执行函数中的代码

函数名称();

5-5 函数参数

5-5.1 形式参数

5-5.2 真实参数

/*
        函数：就是一个可以操作的行为
            小明，去从外面把门关上！：关门
         */
        // 1. 这样的函数，在执行的过程中，不需要给函数提供资源、函数执行完成也不需要汇报结果
        function closeDoor() {
            document.write("门关上了，小明走了！<br />");
        }

        // 2. 吃饭的行为，饭[函数执行需要的资源]
        // 这样的函数，在执行的过程中，需要提供资源，才能正常执行。
        // 函数名称后面的圆括号中，可以传递函数执行时需要的数据，这样的数据称为：参数
        // 定义函数的时候，括号中传递的是参数[变量]，这个变量没有具体的数值，只是在名义上需要这样的一个资源
        // 定义在函数括号里面的参数[函数要执行需要这么一个东西，但是没有确定的东西]：形式参数
        function eat(food) {
            document.write("吃饭了，吃的是" + food + "<br />");
        }

        closeDoor();// 没有参数的函数调用
        // 函数调用时，括号中参数的位置，传递的是具体的数据：实际参数
        eat("米饭");//有参数的函数调用：实际操作的过程中【调用函数的时候】，就需要传递一个具体的数据让函数使用
        eat("四喜丸子");
        eat(1234);



/*
        计算两个数字的加减乘除
        要求：封装函数实现
            函数要执行，需要什么资源：【第一个数字 、 操作符号 、 第二个数字】

         1.是否需要参数？
         2.需要什么样的参数？

         计算函数：
            需要参数：因为要对数据进行运算 【如果没有参数，要运算什么数据不清楚】
            需要神马样的参数：要进行两个数据的加减乘除运算
                第一个参数：数字
                第二个参数：运算符号
                第三个参数：数字
            参数的位置
                函数参数的位置，和调用函数时传递的数据的位置，一一对应
                function calculate(num1, opra, num2)
                         calculate(1,    "+",   2);
                function calculate(num1, num2, opra)
                         calculate(1,    2,    "+");
         */
        /**
         定义一个用于计算连个数字运算结果的函数
         参数 num1 第一个数字
         参数 opra 操作符号
         参数 num2 第二个数字
         */
        function calculate(num1, opra, num2) {
            switch(opra) {
                case "+" :
                    document.write(parseInt(num1) + parseInt(num2));
                    break;
                case "-":
                    document.write(num1 - num2);
                    break;
                case "*":
                    document.write(num1 * num2);
                    break;
                case "/":
                    document.write(num1 / num2);
                    break;
                default:
                    document.write("系统正在升级，暂时不支持你的运算~~~");
            }
        }

        // 调用函数
        calculate(1, "+", 99);
        document.write("<br />");
        calculate(2, "*", 100);
        document.write("<br />");
        calculate(3, "=", 300);

5-5.3 arguments（只在函数里面有效）

arguments对象包含了函数运行时的所有参数

arguments，计算机中表示参数的意思，在js中就是表示一堆参数组成的数组。

5-6 再说变量——作用域

5-6.1 再说js中的变量声明

• 使用var关键字声明的变量
• 不使用var关键字声明的变量

5-6.2 作用域

概念：所谓作用域，其实就是指某个变量有效可用的范围

• 全局变量

• 局部变量
  全局作用域

  像这样在全局中定义a变量，为全局变量，在任何地方都能访问到这个a变量。
  因为js中没有块级作用域，所以在 if 或是 for 这样逻辑语句中定义的变量都是可以被外界访问到的。
  局部作用域
  局部作用域也可以称之为函数作用域。
  function fn () {
  var c = 2;
  }

  console.log(c); // 报错，c变量未定义
  

  局部作用域中定义的变量，只供局部作用域调用，外界无法访问。

5-6.3 变量提升(预解析)

函数中声明变量并且赋值，声明部分会提升到函数中的第一行，赋值部分在原来的位置不变

5-7 函数返回值（作为重点）

return 作用：1.中断代码的运行2.返回函数中的值。

  /*
        return关键字
            位置：经常出现在函数中
            作用：返回一个结果
            注意：一旦函数中，执行了return[函数执行完成],return后面的代码，就不会执行了。

        函数：表示一个行为操作
            有些行为，执行完即可。关门的行为
            有些行为，必须汇报执行的结果：帮我拿一下快递。
                函数执行完成之后，必须拿回一个执行的结果
        函数：添加return，return后面可以返回数据
                return后面返回的数据，称为 函数的【返回值】
        完整函数
            function 函数名称(参数列表){
                // 函数中的代码
                return 返回值;
            }
        就会有几种不同的函数区别：
        >>> 不需要参数，不需要返回值的函数
            function 函数名称() {
                // 函数中的代码
            }
        >>> 需要参数，不需要返回值的函数
            function 函数名称(参数){
               // 函数中的代码
            }
        >>> 不需要参数，需要返回值的函数
            function 函数名称() {
                // 函数中的代码
                return 返回值;
            }
        >>> 需要参数，需要返回值的函数
            function 函数名称(参数) {
                // 函数中的代码
                return 返回值;
            }

        >>>> 什么时候定义函数！
            出现重复代码的时候【重复代码封装成函数】
            出现相同功能的代码的时候【功能封装成函数】
        >>>> 什么时候时候函数需要参数！
            函数执行需要资源数据的时候
        >>>> 什么时候，函数需要返回值！
            函数执行的结果，在后面的代码中需要使用！摇骰子返回的结果，需要前进
         */
        function t() {
            document.write("函数执行中....");
            document.write("函数执行中....");
            document.write("函数执行中....");
            document.write("函数执行中....");
            return "hello";// 函数执行完之后，return表示返回的意思，返回了一个字符串
        }

        var x = t();// 执行函数

        document.write(x);

5-7 预解析

预解析过程：

1.把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。

2.把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。

3.先提升var，在提升function

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);
var a = 1;

下面给大家举个栗子，理解一下预解析机制

var num = 123;
function fn(){
    console.log(num);
    var num = 123;
}
fn();//调用fn函数
/*
此时控制台打印的是undefined,解释一下
Js解析代码时，把函数的声明还有变量的声明提升到当前作用域的最前面，所以代码就变成：
*/
//var num;
//num = 123;
//function fn(){
//  var num;  //从这里可以看出num只是声明而没有定义赋值
//  console.log(num);  //输出的时候必然是undefined
//  num = 123;
//}