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

htmledit_views">

Tips：这个只是作者的html" title=学习>学习html" title=笔记>笔记，仅作参考

一.概念

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

例如下：

html" title=javascript>javascript">    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中本身就存在的,供我们随时使用

html" title=javascript>javascript">            Number()
            String()
            Boolean()
            isNaN()
            typeof()
            console.log()
            document.write()
            prompt()
            confirm()
            数字.toString()
            数字.toFixed()
            .......

（二）自定义函数、

语法：

html" title=javascript>javascript">            function 函数名(){
                代码段
            }

例如下：

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

    }
    fn(2)

二.函数的调用

(一)定义语法

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

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

(二).函数的调用

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

函数名()

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

例如下:

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

(三).带参数的函数

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

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

三.函数的本质

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

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

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

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

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

四.匿名参数

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

html" title=javascript>javascript">    var a = function fn() {
        console.log(1234);
    }

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

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

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

html" title=javascript>javascript">    fn()//fn is not defined
    a()//1234

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

html" title=javascript>javascript">    var a = function() {
        console.log(1234);
    }

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

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

html" title=javascript>javascript">    function () {
        console.log(1234);
    }

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

html" title=javascript>javascript">    (function (a, b) {
        var c = a + b
        console.log(c);
    })(a,b)

下面那个括号干什么用?

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

html" title=javascript>javascript">    var d = function (a, b) {
        var c = a + b
        console.log(c);
    })
    d(a,b)

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

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

html" title=javascript>javascript">!function(){
    console.log(14);
}()

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

五.带返回值的函数

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

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

再例:

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

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

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

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

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

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

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

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

html" title=javascript>javascript">    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总结：

终止代码继续运行
函数运行后返回一个结果，只能返回一个

六.预解析

预解析JS代码

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

html" title=javascript>javascript">    console.log(a);//undefined
    var a = 5

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

html" title=javascript>javascript">    var a
    console.log(a);
    fn()
    function fn() {
        console.log(123);
    }

预解析总结：

匿名函数赋值给变量的定义方式，预解析时遵循变量的预解析规则，不会将函数代码预解析
预解析的时候，会将定义提前放在内存中，不会提前将赋值放在内存中
如果变量名和函数名同名了，保留函数预解析，忽略变量预解析

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

变量的预解析只有空间，没有值，所以如果是先预解析变量，那后面的函数预解析赋值就将空间中放入了值，如果是先预解析的函数，再次预解析变量的时候，空间已经存在了，再次定义空间也是没有意义的。
省略var定义的变量是不会有预解析的
js代码如果报错了，那后面的代码就不会执行了
不会执行的代码中有变量或函数定义也会预解析，因为预解析在执行之前

七.函数的嵌套

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

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

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

html" title=javascript>javascript">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);