JavaScript 如何定义及调用函数，如何写函数说明

一时失言乱红尘 2023-07-15 13:03 32阅读 0赞

在实际操作前，先来了解一下JavaScript 函数的一些概念，认识一下JavaScript 函数：

# JavaScript 函数的基本概念 #

JavaScript 函数是实现固定功能的代码块。  
函数是工具，是实现功能的工具。  
函数是通过其中的代码，来实现所谓的功能。

# 函数的作用 #

**封装：** 将需要的代码，写入到函数中  
**重复：** 一个函数可以反复调用  
**调用：** 可以在任意需要位置上调用执行代码

# 函数的定义（封装） #

### 语法 ###

function 函数名称(函数的参数){ 
        函数的程序;
        return 内容;
    }

### 名词解释 ###

function    定义函数/封装 的关键词,作用类似于 关键词var 
                告诉计算机程序,我正在封装的是一个函数
    
    函数名称     也就是这个函数的名称,之后调用函数时,是通过函数名称来调用函数,并且执行函数
    
    函数的参数   执行函数时,输入给函数的数据信息
    
    函数的程序   定义在{}中的程序,是函数执行时,调用的程序内容
    
    return      定义函数的返回值，并且会终止之后函数程序的执行

### 实例 ###

// 函数的封装/函数的定义
    // 函数封装时,程序并没有被执行,只有在函数调用时,程序才会被执行
    function fun(){ 
        console.log(123);
    }
    
    // 函数的调用和执行
    fun();

### 注意： ###

> **1. 定义函数阶段,只是将程序定义在函数内,程序并没有执行；只有在调用函数时,封装在函数内部的程序,才会被执行。  
> 2. 函数命名的规范 — 与变量的命名规范相同  
>             规则 : 只能使用 数字,字母,下划线\_,美元$  
>                       不能以数字开头  
>                       区分大小写  
>             规范 : 见名知意  
>                       驼峰命名法  
> 3. 所谓的封装,就是将程序,放在 函数的 \{ \} 中,就是函数程序的封装。  
> 4. 函数的调用  
>             调用执行,必须使用函数的固定语法：函数名称() 的方式来调用函数。**

# 函数的定义方式 #

### 1. 声明方式 ###

通过关键词 function 来定义和声明函数。

##### 实例 #####

// 封装函数,但是函数不会执行
    // 也就是我现在组装好了一个微波炉,但是就放在那儿没有用
    function fun1(){ 
        console.log('我是声明方式定义的函数1');
    }
    
    // 调用函数,执行函数
    // 相当于我在这里使用微波炉
    fun1();

### 2. 匿名函数 / 赋值方式 ###

定义函数时，不定义函数名称，将函数赋值给一个变量，然后通过调用变量名称()的形式来调用函数。

##### 实例 #####

//将函数赋值给变量 fun2
    var fun2 = function(){ 
        console.log('我是匿名函数,也叫赋值方式,定义的函数');
    };
    
    // 调用时,是通过变量名称()来调用函数
    fun2();

### 定义函数的语法的区别 ###

##### 声明方式 #####

可以在程序的任意位置上调用函数，甚至可以在定义函数之前就调用函数，执行函数。

##### 实例 #####

//先调用函数，再声明函数
    // 声明方式定义的函数,可以正常执行
    fun1();
    
    function fun1(){ 
        console.log('我是声明方式定义的函数1');
    }

##### 赋值方式/匿名函数 #####

只能在定义函数之后再调用函数。

##### 实例 #####

//先调用函数，再声明函数
    // 赋值方式 / 匿名函数,不能正常执行,会报错
    fun2();
    
    var fun2 = function(){ 
        console.log('我是匿名函数,也叫赋值方式,定义的函数');
    };

# 函数的参数 #

### 定义 ###

是函数执行时定义的数据，或者是执行的对象、内容等。

### 实例 ###

// 在函数的()中,来定义函数的参数
    // 参数定义,也就是定义函数使用的两个变量
    function add(min,max){               //-----形参
        var res = 0;
        for(var i = min ; i <= max ; i++){ 
            res += i;
        }
        console.log(res);            
    }
    
    add(1,100);                        //-----实参
    add(1,10);                         //-----实参
    add(90,100);                       //-----实参

这里，在声明函数时，函数名称括号内定义的参数叫做**形参**，就是形式上的参数。  
而在调用函数时，函数名称括号内定义的参数叫做**实参**，就是实际的参数。

### 函数参数的默认值 ###

因为实参赋值是有顺序的，带有默认值的形参,一般都写在形参的最后。

##### 实例 #####

// 正常定义函数和参数
    function fun(name,age){ 
        console.log(`姓名是${ name},年龄是${ age}`);
    }
    // 函数执行是输入实参
    fun('李四' , 180);
    
    // 给函数的参数定义默认值
    // 语法与给变量赋值是相同的语法 形参 = 数值
    
    // 给形参定义默认值
    function fun2(name,age=18){ 
        console.log(`姓名是${ name},年龄是${ age}`);
    }
    // 调用执行函数时,如果没有对应形参赋值
    // 王五 只是给 name 形参赋值
    // age 形参在调用函数时 没有赋值实参 
    // 就执行 定义的默认值
    
    // 如果有赋值,执行的是重复赋值,定义的实参会覆盖定义的默认值
    
    // 如果形参,没有默认值,也就是形参没有赋值，也没有赋值实参
    // 执行结果是undefined
    fun2('王五');

# 函数的返回值 #

定义在函数内部的变量、参数等，在函数外部不能直接使用。如果要在函数外部使用，则需要定义返回值。

### return关键词的作用 ###

1. 定义函数的返回值
    		如果没有 return，函数的返回值是 undefined。
    2. return会终止 之后函数程序 的执行

### 实例 ###

function add(min , max){ 
        var res = 0;
        for(var i = min ; i <= max ; i++){ 
            res += i;
        }
        return res;   // 如果没有此语句，输出结果 a 的值是 undefined
    }
    
    var a = add(1,100);
    
    console.log(a);

# 函数的容错机制 #

函数的执行，对于参数是要有要求的，如果参数出现问题，要么**终止程序的执行**，要么**对参数进行处理**。

### 方式1：使用return来终止函数的执行 ###

在switch判断和循环语句中，可以使用break来终止程序。  
在函数中要终止函数的执行，不能使用break，需要使用return关键词。

### 方式2：对数据进行调整 ###

数据交换存储。

### 实例 ###

// 封装累加求和函数
    
    // 默认是从1开始执行累加
    // 给形参定义默认值是1,并且写在形参的最后
    function add(max,min=1){ 
        // 理论上,第一个参数,应该是较小值,第二个参数应该是较大值
        
        // 方式1 使用return来终止函数程序的执行,并且返回自己定义的报错信息
        // if(min > max ){ 
        // return '您的参数输入有误,请检查参数';
        // }
        
        // 方式2 对数据进行调整
        // 数据交换存储,也就是 min 和 max 存储数据,相互交换
        if(min > max){ 
            var middle = '你随便爱写什么写什么,不写也行';
            middle = min;
            min = max;
            max = middle;
        }
    
        // 实现函数功能的程序
        var res = 0;
        for(var i = min ; i <= max ; i++){ 
            res += i;
        }
        // 定义函数的返回值
        return res
    }
    console.log( add(20,100) );

# 函数说明 #

> 代码规范中规定，所有的自定义函数，都要写函数说明。每个公司对于函数说明的语法规范都不相同，我们现在先了解一个基本格式。 函数说明  
> param 参数的意思 是对参数的说明  
> 　　　一般写 参数的名称 数据类型 作用  
> 　　　return 返回值的意思 是对返回值的说明  
> 　　　return 返回值的名称 数据类型 作用  
>   
>   
> @param min int 累加求和的起始数值，默认值是1，整数类型  
> @param max int 累加求和的终止数值，整数类型  
> @return res int 累加求和的结果，整数类型  
>   
>   
> 函数功能作用的描述:  
> 　　　累加求和函数，默认累加求和的起始值是1，终止值需要输入，累加求和的结果是res  
> 　　　对于输入数据的大小顺序有容错处理  
> 　　　对于输入数据的类型判断，有待后期增加

函数说明是为了代码规范，建议写上，不过实际中注释函数说明并不需要这么麻烦，具体如何写函数说明，让函数变得更加规范，下面我们来看一个demo：

# Demo #

##### 质数判断:输入数值,返回值是质数/合数 #####

看过题目要求，这里我们先把判断质数的程序写出来：

这里是一个判断2-100之间任意一个数是质数还是合数的程序。  
接下来进行函数的封装，把程序放在一个函数内，这里我们在函数内部简化一下程序：

这里因为可以用return关键词终止程序，所以简化了一些步骤，然后根据上面概念的描述，我们给函数加上形参默认值，而且我们知道不论是质数还是合数都是正整数，1既不是质数又不是合数，所以这里我们做一个函数的容错步骤：

这里我们给x加上了默认值2，我们知道2是质数，所以如果我们调用函数时，num()里面什么都不输入，也会返回一个质数的结果。  
而且这里我们用 if 判断做了一个容错机制，防止错误的输入导致的异常结果。

最后，我们给这个函数加上函数说明：
    
    如何快捷设置函数说明呢？因为我用的是webstorm，所以这里先说一下webstorm的快捷操作：
    		在webstorm中，在你的函数头部上一行，即关键词function上一行输入/**然后直接回车就会自动生成
    一个函数注释，或者直接输入完整的/**/，这是js中的多行注释代码，然后将光标移动到第二个*后面即/**后面直
    接回车就ok了。
    		如果是VScode的话，需要下载一个插件KoroFileHeader，然后再函数头部上一行用快捷键 window：
    ctrl+alt+t，mac：ctrl+cmd+t，即可自动生成函数说明了。

所以，给我们的函数加上函数说明后：

// 质数判断:输入数值,返回值是质数/合数
    /** * * @param x {number} * @returns {string} * @description num函数 判断变量是质数还是合数 */
    function num(x = 2){ 
        if (x === 1){ 
            return '既不是质数，也不是合数';
        }
        else if (x <= 0){ 
            return '对不起，您的输入有误，请重新输入';
        }
        for (let i = 2;i <= x - 1;i++){ 
            if (x % i === 0){ 
                return '合数';
            }
        }
        return '质数';
    }
    console.log(num());

这里函数说明中的\{ \}内表示是变量的数据类型，@description后是函数的描述，怎么样，这样看起来是不是规范整洁多了，这样就算是别人来了，也能一眼看出你的函数是做什么的。