JavaScript函数的封装与调用学习整理

本文详细介绍了JavaScript函数的概念,特点,包括封装、重复和调用。讲解了函数的定义,包括声明方式和匿名函数赋值方式,并讨论了两者区别。此外,还探讨了函数的参数、返回值,以及如何处理参数问题。最后提到了函数执行中的容错机制和函数参数的默认值设定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是函数:
实现固定功能的代码块
函数是工具,是实现功能的工具
函数是通过其中的代码,来实现所谓的功能

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

函数的定义/封装有固定的语法形式

function 函数名称(函数的参数)
{
函数的代码;
return 内容;
}

函数名称:就是这个函数的名称,之后调用函数时,是通过函数名称来调用函数,并且执行函数
函数的参数:执行函数时,输入给函数的数据信息
函数的代码:定义在{}中的程序,是函数执行时,调用的程序内
return:函数的返回值

举一个实例:

function fun()
{
alert(123);
}

function用来声明一个函数,fun是这个函数的名字,alert(123)则是这个函数所要执行的代码。这样一个函数就定义完了,但定义函数阶段,只是将程序定义在函数内,程序并没有执行。只有在调用函数时,封装在函数内部的程序,才会被执行
调用函数的格式是函数名()

fun();

效果如下
在这里插入图片描述
函数命名的规范 — 与变量的命名规范相同
规则 : 只能使用 数字,字母,下划线_,美元$,不能以数字开头,区分大小写
规范 : 见名知意,驼峰命名法

函数的定义有不同的方式:
①声明方式,通过关键词function来定义和声明函数。封装函数,但是函数不会执行
通俗解释下,也就是我现在组装好了一个微波炉,但是就放在那儿没有用

function fun1()
{
alert('我是声明方式定义的函数1');
}

后续使用fun1();的时候才算是调用并执行函数,也就是这时候才使用到微波炉
在这里插入图片描述

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

var fun2 = function()
{
alert('我是匿名函数,也叫赋值方式,定义的函数');
};

调用时,是通过变量名称()来调用函数,如fun2();
在这里插入图片描述
这两种方式有一些区别:
声明方式:可以在程序的任意位置上调用函数,甚至可以在定义函数之前就调用函数,执行函数
赋值方式/匿名函数:只能在定义函数之后,再调用函数

函数的参数:是函数执行时,定义的数据,或者是执行的对象,内容等

function add(min,max)
{
var res = 0;
for(var i = min ; i <= max ; i++)
{
res += i;
}
alert(res);            
}

这段代码的意思是,定义了一个名为add的函数,这个函数的功能是对从min到max的整数进行累加求和
add(1,10);来调用这个函数,即1来代替函数的min,10来代替函数的max,用途是从1到10的整数进行累加求和,结果如下
在这里插入图片描述
当然了,使用这个有累加求和功能的函数,也可以计算出其他数的结果
add(1,100);是求1到100的整数累加和,add(37,61);是求37到61的整数累加和

函数的返回值:
定义在函数内部的变量,参数等,在函数外部不能直接使用
举个例子,封装好的函数是一台冰箱,定义的变量参数等是存放在冰箱内的食物。不能在冰箱门关着的情况下直接拿出来,必须要打开冰箱门才能获取到食物
return关键词的作用
①定义函数的返回值。如果没有 return , 函数的返回值是 undefined
②return会终止之后,函数程序的执行

function add(min , max)
{
var res = 0;
for(var i = min ; i <= max ; i++)
   {
   res += i;
   }
return res;
}
var a = add(1,100);
alert(a);

封装函数的基本步骤:
①定义程序来实现功能的需求
②定义函数,将程序放在{}中,封装程序
③定义参数
④定义返回值
⑤考虑容错机制
函数的执行,对于参数是要有要求的,如果参数出现问题,要么终止程序的执行,要么对参数进行处理
//方式1: 使用return来终止函数的执行
在switch判断和循环语句中,可以使用break来终止程序。但在函数中药终止函数的执行,不能使用break,需要使用return关键词;
//方式2: 对数据进行调整
⑥考虑函数参数的默认值
⑦给函数定义函数说明

function add(max,min=1){
            // 理论上,第一个参数,应该是较小值,第二个参数应该是较大值。如果min的值比max的值要大,就要考虑容错机制了
            // 方式1:使用return来终止函数程序的执行,并且返回自己定义的报错信息
            // if(min > max ){
            // return '您的参数输入有误,请检查参数';
            // }
            
            // 方式2:对数据进行调整
            // 数据交换存储,也就是 min 和 max 存储数据,相互交换。创建一个中间变量middle,将min的值给middle,这时候将max中存的比较小的值给min,再将middle中存的比较大的值给max
            if(min > max){
                var middle = 'middle是一个中间变量,随便写什么都行';
                middle = min;
                min = max;
                max = middle;
            }

            // 实现函数功能的程序
            var res = 0;
            for(var i = min ; i <= max ; i++){
                res += i;
            }
            // 定义函数的返回值
            return res
        }
        alert( add(1,10) );
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值