JS函数概述
函数,是一种封装;就是将一些语句,封装到函数里面;通过调用的形式,执行这些语句;函数可以一次定义,多次调用,这样就可以实现大量代码的重复使用。
函数的声明
JavaScript 有三种声明函数的方法:
通过 function 命令
function
是一个关键字,和 var、typeof 一样,都是关键字,后面要加空格,函数名就在空格后定义,函数名字的命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号的组合,不能以数字开头。
后面有一对儿空的小括号,里面是放参数用的,需要参数时在里面添加即可,多个参数要用英文逗号 ,
隔开。大括号里面,是这个函数的语句。
function functionName([参数1][,参数2][,参数N]){
函数的功能代码;
[return 参数r]
}
说明:
-
function
关键字是必须的,全小写。 -
functionName
函数的名称。函数名的命名规则与变量命名一样。 -
()
是定义函数时接收数据用的参数。是否定义参数根据实际情况而定,多个参数之间用逗号隔开。 -
{}
存放函数实现某种功能的代码块。 -
[参数1][,参数2][,参数N]
可选的参数,根据实际情况来决定是否添加,这里的参数就是形参用于接收调用函数时传过来的数据,使用方式与变量相同(添加了形参就相当于定义了变量) -
[return 参数r]
可选的语句,一般放在函数代码块的最后,可用于立即结束函数的运行(就像break语句,可以立即结束循环),也可设置向函数调用者返回的值;如果返回值不写,函数返回的结果就是 undefined;使用时将需要返回的内容通过空格追加在 return 后面即可,需要注意的是 return 只能返回单一内容,就是只能返回一个变量或值
形参(形式参数):
-
定义函数时的参数就是"形参";主要用来接收调用函数者传过来的数据。
-
形参的名称,与变量的命名规则一样;但形参不能用 “var” 关键字定义。
-
参数只能存在于函数中。
-
参数不需要声明,直接使用。
示例:
//定义函数,设置形参(用于接收传入的数据)
function getSum(x,y) {
var sum = x+y; // 功能代码
return sum; // 结束函数,返回结果
}
var num = getSum(2,3); //调用函数,传入实参,得到返回结果,赋值给 num
coonsole.log(num); // 5
实参(实际参数):
调用函数时的参数称为"实参"。实参就是真正的数据。
函数的调用:
- 函数定义是不会执行的,那么,函数必须调用,才会有效果。
- 调用方法就是 直接写函数名后跟小括号(),如果有参数则写参数。
- 小括号不能省略;如果省略小括号返回的是函数本身。
参数存在的作用 :
在一些函数的内部某些值不能固定,就需要在调用函数时通过参数传入不同的值。
一般函数中的形参与调用时的实参个数保持一致,参数会逐个顺次对应匹配;JS 属于弱类型语言,在 JS 中函数的形参与调用时传的形参的数量可以不一致
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 一 一对应匹配 |
实参个数小于形参个数 | 未匹配的形参值为 undefined |
实参个数大于形参个数 | 形参对应匹配后,剩余的实参不再进行匹配 |
形参的个数可以和实参个数不匹配,但是结果不可预计,所以在使用参数时:
-
形参的个数,要与实参的个数一致;
-
形参的顺序,要与实参的顺序一致;因为传入的数据的数据类型可能不一样。
通过函数表达式(变量赋值)
可以通过变量赋值的方式,将一个匿名函数(匿名函数就是没有函数名的函数)赋值给变量。这个匿名函数又称函数表达式。
var fun = function([参数1][,参数2][,参数N]){
函数的功能代码;
[return 参数r]
};
调用该函数:
fun(); // 与普通函数的调用一样,只需要将函数名改成变量名即可。
示例:
var fun = function(){
console.log('我是函数'); // 我是函数
};
fun();
匿名函数:
所谓的匿名函数就是没有设置函数名的函数
function(){
console.log('我是匿名函数');
}
匿名函数的执行:
用小括号将匿名函数括起来,然后在匿名函数后面加上一个括号即可立即执行。
如:
(function(){
console.log('我是匿名函数');
})()
通过 Function() 构造函数
函数也可以通过Function()构造函数来定义( Function() 构造函数并不常用)。
var www = Function("x","y","var num = x*y;return num;");
console.log(www(2,3)); // 6
等价于:
function www(x,y){
var num = x*y;
return num;
}
console.log(www(2,3)); // 6
说明:
Function()
构造函数可以传入任意数量的字符串参数,最后一个参数所表示的文本是函数体;它可以包含任意的Javascript 语句,每条语句之间用分号分割。传入构造函数的其他所有的参数字符串是指定函数的名字的字符串。如果定义的函数不包含任何参数,只需给构造函数简单地传入 一个字符串函数体即可。
注意:
Function() 构造函数允许JavaScript在运行时动态的创建并编译函数。
每次调用 Function() 构造函数都会解析函数体,并创建新的函数对象。如果是在一个循环或者多次调用的函数中执行这个构造函数,执行效率会降低。相比之下,循环中的嵌套函数和函数定义表达式则不会每次执行时都重新编译。
Function() 构造函数非常重要的一点,它所创建的函数并不使用词法作用域,函数体代码的编译总是会在顶层函数执行。
扩展: 函数的定义可以整个代码中的任意位置,在整个代码执行时会优先将定义的函数加载到内存中(就像变量的提升)
// 调用函数
func();
// 定义函数
function func() {
console.log('调用了该函数!')
}
全局变量和局部变量
全局变量:
- 可以在网页的任何地方(函数内部和函数外部)使用的变量,就是"全局变量"。
- 在函数外部定义的变量,就是"全局变量"。
- 在函数内部,省略关键字var定义的变量是"全局变量"。
- "全局变量"既可以在函数外使用,也可以在函数内部使用。
- "全局变量"在网页关闭时,自动消失(释放空间)。
局部变量:
- 只能在函数内部使用的变量,称为"局部变量"。
- "局部变量"在函数内部定义,在函数内部使用。
- "局部变量"在函数外部无法访问。
- "局部变量"在函数执行完毕就消失了,所以局部变量更节省内存空间,函数中的形参就是局部变量。
注意: var 关键字尽量别省略,省略后"全局变量"和"局部变量"会搞不清楚;全局变量与局部变量不可同名。