JSP基本语法(2)函数

函数

函数就是一个工具，可以将代码放在里面，随时执行，简单的说就是将可以实现某种功能的代码块封装起来！
注：函数是一等公民

函数的定义

第一种定义方式： 函数声明
function 函数名() {
    要执行的代码   
}
第二种定义方式： 函数表达式
var 变量 = function() {
    要执行的代码
}
注： 第二种方式的本质 其实是定义了一个变量，并将这个函数的地址交给该变量。于是，函数名就是这个变量名。

函数的调用

函数声明定义出来的函数，调用时，既可以在函数之前，也可以在函数之后。
函数表达式定义的函数，调用时，只能够在后面调用。

预解析

JS引擎执行代码的阶段： 通读代码 执行代码

在通读代码阶段，引擎会先查看是否有语法错误，如果有，就报错。如果没有，则在这个过程中，就会将代码中所有的通过var声明的变量和通过function声明的函数提升到代码的最前面。这个提升行为，就是发生在预解析阶段。

所以，切记，以后读代码的第一反应，就是变量和函数的提升。

函数的参数

函数整体由 关键字 函数名 形参列表 函数体组成
形参列表中，可以放置“形式参数”。简称：“形参”。

    // 定义一个函数，计算两个数字的和
    function sum(num1, num2) {
        // 形参num1 "代表" 将来函数执行的时候，要传递的一个参数
        // 形参num2 "代表" 将来函数执行的时候，要传递的另一个参数
        console.log(num1 + num2);
    }
    // 函数执行了
    sum(1, 2); // 输出3

当函数执行的时候，是否需要传递参数，要看函数是否有形参。那么在函数执行的时候传递的参数，叫做实际参数，简称实参。

注： 就像洗碗机一样，我们有了洗碗机(函数), 还需要把“碗”放进去，还需要把“洗洁精”放进去，这样，按下开关(调用函数)时，才可以最终得到一个干净的碗。那么这里的“碗”和“洗洁精”等内容，就是“实际参数”。而洗碗机放碗的位置，和放洗洁精的位置，就是“形式参数”。

一个比较复杂的学习方法

1. 看别人的代码和注释
2. 把注释删掉，自己写注释
3. 把代码删掉，看自己的注释写代码
4. 注释和代码都和删掉，自己写思路
5. 看着自己的思路写代码

弗曼学习法

1. 准备一个你要记忆的知识点
2. 想办法把这个知识点讲给别人听
3. 在讲的过程中出现问题了，重新回顾知识点
4. 无限精简自己的语言

函数的参数关系

当函数定义时，可以定义形参，当函数执行时，可以传递实参。

如果函数在执行时，传递的参数与形参不一致，分类如下

当形参比实参多： 
    多余的形参的值为undefined

function sum(a, b) {
    console.log(a);
    console.log(b); 
}
sum(10); // a是10 b是undefined

当形参比实参少：
    没有形参接收多余的实参

function sum(a, b) {
    console.log(a);
    console.log(b);
}
sum(10, 11, 12); // a是10 b是11 12没有形参来接收

arguments

arguments是函数内部的一个成员，只有在函数执行的时候才会存在。可以使用它来获取本次函数在执行时，所有传递的实参。
arguments.length可以获取实参的个数。

function sum() {
    console.log(arguments);
    console.log(arguments.length);
}
sum(1); // => [1]  arguments.length => 1
sum(2); // => [2]  arguments.length => 1
sum(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]  arguments.length => 5

arguments是一个类数组对象，也叫做伪数组对象。可以使用 arguments[数字] 来获取对应的值。 数字是 从0开始 的。 这个数字，也可以叫做 下标 或者 索引

function sum() {
    console.log(arguments[2]);
}
sum(1, 2, 3, 4); // => 3
sum(1, 2); // => undefined

return关键字

作用：该关键字是用于在 函数内部 返回内容 并 中止函数执行 的。

// 中止函数执行
function demo() {
    console.log(1);
    console.log(2);
    console.log(3);
    return;
    console.log(4);
    console.log(5);
}
demo(); // 只会输出1 2 3 而不会输出4 5 因为遇见了return

// 返回内容
var a = 10;
var b = 11;
function sum(num1, num2) {
    return num1 + num2;
}
// 进行计算
var result = sum(a, b);
// 使用结果
console.log(result); // 21

注：return关键字只能够在函数内部出现。

函数的定义过程

1 在内存中开辟一个空间
2 把代码放进去
3 把空间的地址交给函数名

函数的调用过程

1 根据函数名称找到内存空间
2 将实参的值传递给形参
3 开始解析内存空间中的代码
4 执行代码

作用域

作用域: 指的是变量起作用的范围 
作用域的划分规则: 只有全局作用域和函数的私有作用域
作用域是根据书写的单词和语法来确定的,所以又叫做词法作用域.
所以,通常我们把代码写完,就可以确定每一个作用域的范围.
注: script标签之间是全局作用域 多个script标签共享同一个作用域 但是每一个script标签中的变量 函数,它们的提升,只能够在本script标签的范围之内.
注: 浏览器在加载script标签的代码的时候,是一个执行完,再去加载执行后面的一个.

    <script>
        var a = 10;
    </script>
    <script>
        console.log(a); // 输出10
    </script>


    <script>
        console.log(a); // ReferenceError: a is not defined
    </script>
    <script>
        var a = 10;
    </script>

函数的属性

函数的属性之一: name  它是函数的名称 函数的名称不论是表达式还是声明 都是变量的名字
函数的属性之二: length  它是函数的形参的个数 

    function demo(a, b, c) {

    }
    console.log(demo.name); // "demo"
    console.log(demo.length); // 3


    var fun = function() {

    }
    console.log(fun.name); // "fun"
    console.log(fun.length); // 0

递归函数

递归函数指的是函数自己再函数体内部调用自己.

注: 无停止条件的递归 就是死循环 写递归函数,先写停止条件

    // a变量一定要定义在函数外部 
    var a = 0;
    function demo() {
        a++;
        if (a >= 10) {
            return;
        }
        demo();
    }
    demo(); // 循环让a自加10次 之后就停止

作用域的特点

作用域的机制

作用域是针对变量的起作用的范围。
而变量又分为“使用变量”和“赋值变量”

使用变量

又叫做访问变量 出现在表达式中，赋值语句右侧。 
var a = b;   (b就是使用变量)

访问变量规则： 当访问变量的时候，会先查看当前作用域中是否存在该变量，如果有，就使用。如果没有，就将会向上一层级作用域中寻找。依次向上，直到找到，或者到了全局作用域中还没有找到，就会报错。（一般就是就近和向上原则）

赋值变量

也叫做修改变量 只出现在赋值语句左侧
a = 1;

赋值变量规则： 当对一个变量进行赋值的时候，会先查看当前作用域中是否存在该变量，如果有，就赋值。如果没有，就向上一层级查找。依次向上，直到找到，或者到了全局作用域中还没有找到，就会在全局作用域中悄悄的声明这个变量并赋值。(但是js引擎提升变量和函数的时候，只是提升var声明的变量)

千万不要使用这个特点 切记，切忌。

// 当前是全局作用域
var num = 100; // 在全局作用域中定义的变量

// 定义一个函数
function demo() {
    var num = 101; // 这是在函数作用域中定义的变量
    console.log(num);
}
// 执行函数
demo(); // 101 
console.log(num);//100

解释： 当在函数内部访问变量num的时候，先看当前作用域中是否有num 找到了！ 于是就用101 输出101，如果在函数内部没有使用var 声明num的话，函数内部找不到，就会在全局中去找，此时的全局中有var声明的变量num，就会为num重新的赋值为101；

var num = 100; // 在全局作用域中定义的变量
// 定义一个函数
function demo() {
    // var num;  // 因为声明提升的原因 代码其实是这样子的
    console.log(num); 
    var num = 101; // 这是在函数作用域中定义的变量 虽然定义是在这里 但是提升了
}
// 执行函数
demo(); // undefined

解释：依旧是作用域的问题，但是因为输出代码在前面，所以有些同学可能会误以为会输出100 但是不要忘记 预解析！！！就近原则，和向上查找；

var num = 100; // 在全局作用域中定义的变量
// 定义一个函数
function demo() {
    var num = 101; 
}
// 执行函数
demo();
// num是多少
console.log(num); // 100

解释：作用域的问题，因为输出的代码是在全局作用域中的，所以会直接访问全局中的变量 而与函数内部的变量无关

var num = 100; // 在全局作用域中定义的变量
// 定义一个函数
function demo() {
    num = 101; 
}
console.log(num); // 100
// 执行函数
demo();
// num是多少
console.log(num); // 101   

读代码：

1 提升
2 给全局中的num赋值为100 
3 执行函数
    将num赋值为101  问题的关键在于：修改的这个num到底是不是全局中的？ 
        答案就是： 依旧是就近原则， 如果当前作用域中有声明的num变量 
        就修改它 如果没有向上寻找 如果找到了就修改它 如果没有找到再向上寻找 
        重复这个过程 直到找到或者到了全局作用域中还没有找到，就会在全局中偷偷地声明这个变量并赋值

// 如果一个变量没有通过var声明 就直接赋值  
num = 101; // 这种不经过声明就直接赋值而且还不会报错的特点属于JS的糟粕之一。一定不要使用。
console.log(num); // 101

console.log(num);
num = 101;

这种情况下会报错 因为num没有经过定义就被使用

疑问:
console.log(num)在使用num
难道 num = 101 不是在使用num吗？

为什么第一条console代码就会报错 而num = 101就不会报错？

因为第一个是在“访问”变量 而第二个是在“赋值”

function demo() {
    num = 11;
}
demo();
console.log(num);

解读： 当demo执行的时候， num = 11 被执行 先查找num是否在当前作用域中存在，结果发现没有

没有就向上寻找，到达了全局作用域，也没有，于是就在全局作用域中，声明了该变量 所以当输出num时候，已经声明并赋值完毕
所以可以输出

当demo不执行的时候，就不会执行到这条代码 于是整个过程不会发生， num就没有被声明在全局 此时输出num时，是在访问num变量
会报错

递归函数

<script>
        // 递归指的是函数自己调用自己
        // 如果函数中没有停止条件，就是死循环
        // 写递归先写停止条件

        // 使用递归书写阶乘
        // 分析：
        // 阶乘 是从1 乘以 2 一直乘到该数字自己
        // 1 * 2 * 3 * 4 * 5 * 6
        // 写一个函数 该函数接受一个数字 返回这个数字乘以 它-1 的乘积
        // function demo(num) {
        //     if (num === 1) {
        //         return num;
        //     }
        //     return num * demo(num - 1);
        // } 
        // 第一次执行  demo(6) 这个函数返回的是 6 * 5 * 4 * 3 * 2 ;
        // demo(5) 返回的是 ;
        // demo(4) 返回的是 ;
        // demo(3) 返回的是 3 * 2;
        // demo(2) 返回的是2 
        // var result = demo(6);
        // console.log(result);
        // demo(1);

        // 斐波那契数列
        // 1 1 2 3 5 8 13 21 34 55 89 ... 
        

        // var result = fibonaqi(11); // => 89
        // console.log(result);
        // 1 1
        // 2 1
        // 3 fibonaqi(2) + fibonaqi(1)
        // 4 fibonaqi(3) + fibonaqi(2);
        // 5 fibonaqi(4) + fibonaqi(3);

        function fibonaqi(num) {
            if (num === 2 || num === 1) {
                return 1;
            }
            return fibonaqi(num - 1) + fibonaqi(num - 2);
        }

        fibonaqi(3); // => fibonaqi(2) + fibonaqi(1)  等价于 1 + 1  结果为2
        fibonaqi(4); // => fibonaqi(3) + fibonaqi(2)  等价于 2 + 1  结果为3
        fibonaqi(5); // => fibonaqi(4) + fibonaqi(3)  等价于 3 + 2  结果为5
        fibonaqi(6); // => fibonaqi(5) + fibonaqi(4)  等价于 5 + 3  结果为8
        

    </script>