首页 > 编程语言> > JavaScript函数详谈

JavaScript函数详谈

2020-03-01 17:39:43 作者：互联网

说到JavaScript，有一点肯定是不能忽视的，那就是JavaScript的函数。
那么，函数是什么呢？

函数的概念

函数是程序里被设计执行特定任务的代码块，它会在某代码调用它时被执行。
简单来说，相当于班级里，班主任先分配职务，比如班长收班费、学习委员收作业。每个班干部都有自己的职责，虽然平时不履行自己的职责，但是当有人喊“班长，收班费了”，班长就开始了自己的工作；喊“学习委员，收作业了”，学习委员开始收作业。函数就像班干部，被设计执行特定的任务，平时没有作为；但是一旦程序里有人喊他，他就开始履行自己的职责，完成本来就设定好的任务。

函数的优点

函数封装代码，使得代码更加简洁
函数创建后可以重复调用，减少代码的数量
函数随时可以被调用，不必程序运行立刻执行

函数的优点这么多，该如何创建一个函数呢？

函数的创建

函数的创建方式分为声明式和赋值式。

声明式：直接使用函数声明关键字function来声明一个函数

function fun(){
	console.log(1);//以后你的任务就是收班费了
}

赋值式：将函数声明并赋值给一个变量来声明一个函数

var fun2 = function fun3(){
	console.log(2);//以后你的任务就是收作业了
}

注意点：

声明式的函数名不可以省略，程序通过函数名调用声明式函数
赋值式的函数名可有可无，推荐不带，因为其函数名是局部的而无法通过函数名调用函数
赋值式的变量名不可以省略，程序通过变量名调用赋值式函数
多个相同函数名相同的函数，在被调用时会调用最后一个（前面的被覆盖）

拓展：
function和var一样会在内存中开辟一块空间存储数据。代码在栈（FILO，先进后出）中存储的格式被称为键值对，键中存储变量名，值中存储数据的值。而function在变量中键值对键存储函数名，值存储函数在堆（FIFO，先进先出）中的地址，通过读取栈读取到堆得地址访问堆相应的数据。
栈和堆

创建了函数又该如何调用呢？

函数的调用

函数的调用分为在代码中调用和浏览器在特定的时机调用

在代码中调用：在代码中书写函数的调用语句

fun();//有人喊“班长，收班费了”

浏览器在特定的时机调用：

html标签进行触发
浏览器接受
浏览器调用函数

button.onclick = function(){
//button为触发的html标签的id
//onclick是单击后会怎么样
	fun2();//在按钮的单击事件里调用函数
}

函数的参数

函数的参数分为形参和实参

形参（显式参数）：函数在设定时使用的参数，类似于变量的变量名
实参（隐式参数）：函数在被调用的时候被传入的值，类似于变量的值

function add(a,b){
//此处的a和b是形参，参与运算时会往里传值
return a + b;
//return的作用是结束函数，并返回一些东西
}
add(1,2);//给形参a和b传入实参1和2
//所以在运算中,a和b的数值为1和2，return返回的数值为3

注意点：

形参变量只有在被调用的时候才分配内存单元，在调试结束时，立刻释放分配的内存单元，因此形参只在函数内部有效，函数执行结束后无法使用该形参变量
当形参的个数比实参多的时候，多出来的形参会被赋值undefined（未定义数据类型）。

function add(a,b,c){
console.log(c);
}
add(1,2);
//程序实参为2个，形参为3个，多出来的形参c的值在被调用时赋值undefined

当形参的个数比实参少的时候，实参会被传入arguments中，可以使用arguments[num]来调用实参（num从0开始）。

function add(a,b){
console.log(arguments[0] + arguments[1]);
//arguments中取出第一个和第二个运算
}
add(1,2,3,4,5,6);

注意点:JavaScript中取出里面内容的方法有 . 和 [] 两种，但是 . 后只能加纯英文，而 [] 后可以加任意数据。

函数的返回值又会是怎样的呢？

函数的返回值

所谓返回值，就是函数结束后返回什么。
函数的返回值用return来解决。
return的作用是结束函数体的运行并返回函数的值。
注意点：

return返回值只能有一个，可以返回函数。
return会结束函数体，所以多个return只会执行第一个

function add(a,b){
return a + b;
return a - b;//不会生效
}
add(1,2);

秋风入我怀发布了2 篇原创文章 · 获赞 5 · 访问量 65 私信关注

标签：function,调用,return,函数,JavaScript,add,详谈,实参
来源： https://blog.csdn.net/qq_31152975/article/details/104588392