鸿蒙应用开发-第二章-函数(上)

Tips：这个只是作者的学习笔记，仅作参考  

一.概念

 函数可以理解为是一个具备某功能的工具,是实现某功能的一段代码.具体用法就是将要运行的代码使用function包裹，而后需要时再进行调用

        例如下：

    function fn(n) {
        // 九九乘法表
        for (var a = 1; a <= n; a++) {
            for (var b = 1; b <= a; b++) {
                document.write(b + '*' + a + '=' + a * b)
                document.write('&nbsp;')
            }
            document.write('</br>')
        }
    }
    fn(5)

        但也不是非得自己去定义函数的内容，因为js中本身就存在可供我们使用的函数，其名为内置函数，由我们自己进行定义的函数名为自定义函数 

（一）内置函数、 

        js中本身就存在的,供我们随时使用

            Number()
            String()
            Boolean()
            isNaN()
            typeof()
            console.log()
            document.write()
            prompt()
            confirm()
            数字.toString()
            数字.toFixed()
            .......

 （二）自定义函数、

         语法：

            function 函数名(){
                代码段
            }

        例如下：

    function fn(n) {
        for (a = 1; a <= n; a++) {
            console.log('靓仔正');
        }

    }
    fn(2)

二.函数的调用

        (一)定义语法

         当我们定义好函数，并在页面中刷新的时候，会发现这段代码并没有被执行。因为函数定义好后，是不会自动执行的，需要我们进行调用。

function 函数名(){
	代码段
}
# function是一个关键字，函数名自定义，定义规则和变量的定义规则相同

        (二).函数的调用

         语法:其实就是将函数内部的代码执行

        函数名()

        调用的语法很简单，这样我们以后还需要执行函数中的代码的时候，就不用再重写那么多的代码了，只需要简单的将原来定义好的函数进行调用即可。

        例如下:

// 定义函数:求两个数的和
function fn(){
    var a = 1;
    var b = 2;
    var c = a + b;
    console.log(c);
}
// 函数定义好以后，不会自动执行，需要手动调用
fn();
fn()//可以重复调用
//代码功能不够强大,引出下面的内容

        (三).带参数的函数

如果有形参没有被赋值,默认就是undefined
形参实际上就是函数内部定义好的一个变量,没有赋值就相当于一个变量没给值

    // 带参数的函数
    // fn(a,b)-形参-形式上的参数,在函数内部用来占位置的
    function fn(a, b) {
        var c = a + b
        console.log(c);
    }
    // 实参-实际参数,实际上用的参数,用来给形参赋值
    fn(1, 2)

三.函数的本质

         当我们去调用函数的时候,通过函数的名称就可以调用到,那说明我们在定义函数的时候,函数就已经保存起来了,所以下面才能调用起来

        以下是函数定义在内存中的体现

    function fn() {
        console.log(123);
    }
    fn()
    console.log(fn);//把函数这段代码原样输出
    console.log(typeof (fn));//function(函数) - 这是我们学习的第六种数据类型

    // 函数是一个数据,也是一个具体的数据值,那么是否可以把函数赋值给变量?
    // var a = function fn() {
    //     console.log(1234);
    // }
    fn()//当函数赋值给一个变量的时候,调用函数名无效
    a()//当函数赋值给一个变量时,调用函数是-变量名()

        变量跟函数的区别:
        定义变量后,只知道创作了空间,可以没有数据,函数定义之后,会创建空间并放入数据
        变量只能进行运算,函数只能进行调用 

四.匿名参数

         既然函数的定义与变量的定义过程差不多,那函数的定义就可以像变量一样进行

    var a = function fn() {
        console.log(1234);
    }

         这是定义一个变量，将函数代码放到变量空间中，这样的函数也是可以正常进行调用的，就使用变量的名称就行：

        Tips:当函数赋值给一个变量的时候,调用函数名无效

        当函数赋值给一个变量时,调用函数是-变量名()

    fn()//fn is not defined
    a()//1234

        说明当一个函数赋值给一个变量的时候,函数的名字就没有意义了,所以我们可以将函数名省略

    var a = function() {
        console.log(1234);
    }

         这种没有名字的就是匿名函数

        但是匿名函数不能单独存在,会报错,会被认定为几行代码进行解析,而不是一个整体

    function () {
        console.log(1234);
    }

        解决办法:用个括号包起来

    (function (a, b) {
        var c = a + b
        console.log(c);
    })(a,b)

        下面那个括号干什么用?

        其实可以理解为用于传参的的括号

    var d = function (a, b) {
        var c = a + b
        console.log(c);
    })
    d(a,b)

         匿名函数的作用
        作用1：将没有名字的函数赋值给一个变量
        作用2：将匿名函数用一个小括号括起来，后面再加小括号，这个匿名函数就已经调用了
        这种匿名函数一边定义顺便调用的情况 - 自调用函数

自调用函数不是非得()包住,在函数前加!或者~都行

!function(){
    console.log(14);
}()

~function(){
    console.log(14);
}()

五.带返回值的函数

         之前的函数，在调用后，就是将函数中的代码执行了，没有得到一个结果，如果我们希望函数调用后得到一个结果，在后续的代码中，需要用到这个结果，例：

    // 要求:求三门成绩的和
    function add(ch, math, eng) {
        var result = ch + math + eng
        return result
    }
    add(20, 40, 50)
    console.log(add(20,30,40));// undefined

         再例:

    // 要求:求出三门成绩的平均值
     var avg = result / 3
     console.log(avg);
    // 函数内部的代码是一个独立的区域,跟外面不相通
     var avg = add(20, 30, 40) / 3
     console.log(avg);//NaN

    总结:return的数据给到函数外面使用的时候,谁调用函数就给谁使用return出去的值

        但是什么时候需要return返回值呢?

        如果在调用函数后需要一个结果继续运算,这个时候就要加上返回值

        如果只打算计算出结果,不需要下一步操作,那就不用加返回值

        但是return的用处不只是返回结果,还可以用于结束函数运行

function add(ch,math,en){
    var sum = ch + math + en;
    return sum
    console.log(sum)//我想在这个地方输出sum看行不行
}
add(20,30,40)

         return返回结果只能返回一个结果,并不能返回多个

    function add(ch, math, eng) {
        var sum1 = ch + math + eng
        var sum2 = ch + math
        // console.log(sum1);
        // console.log(sum2);

        // 写一起后面会覆盖前面的
        // return sum1,sum2

        // 哪怕是分行也会只输出上面的
        return sum1
        // return sum2
    }
    add(20, 30, 40)
    console.log(add(20, 30, 40) + 20);

        return总结：

1. 终止代码继续运行

2. 函数运行后返回一个结果，只能返回一个

六.预解析

         预解析JS代码

        预解析的过程,就是查找代码中的var和function这两个关键字,找到以后将变量和函数提前存到内存中,并且赋给他们一个初始值,变量的初始值为undefined,函数的初始值为代码段

    console.log(a);//undefined
    var a = 5

        以上代码拆解分析后应该是:log()会先定义一个a,只不过里面没有东西,然后直接输出,不会去读取

    var a
    console.log(a);
    fn()
    function fn() {
        console.log(123);
    } 

        预解析总结：

1. 匿名函数赋值给变量的定义方式，预解析时遵循变量的预解析规则，不会将函数代码预解析

2. 预解析的时候，会将定义提前放在内存中，不会提前将赋值放在内存中

3. 如果变量名和函数名同名了，保留函数预解析，忽略变量预解析

   因为函数预解析其实包含了赋值的过程，函数定义放在内存中的时候将函数的代码也放在内存中

   变量的预解析只有空间，没有值，所以如果是先预解析变量，那后面的函数预解析赋值就将空间中放入了值，如果是先预解析的函数，再次预解析变量的时候，空间已经存在了，再次定义空间也是没有意义的。

4. 省略var定义的变量是不会有预解析的

5. js代码如果报错了，那后面的代码就不会执行了

6. 不会执行的代码中有变量或函数定义也会预解析，因为预解析在执行之前

七.函数的嵌套       

        函数结构中的大括号，里面放的是代码段，既然是代码段，就可以写判断、循环甚至函数代码，这样就形成了函数的嵌套。

        函数外面定义的东西可以在函数里面用，
        函数里面定义的东西不能在外面用

        函数的大括号中可以写函数的定义，可以写函数的调用：

function fn(){
    console.log(1)
    function fun(){
        console.log(2)
    }
    fun()
}
fn()

function fn(){
    console.log(1)
}
function fun(){
    fn()
    console.log(2)
  var a = 1
}
fun()
// console.log(a);