ECMAScript函数
阅读 (399)一、函数概述
-
认识函数
概念:在一个完整的项目中,某些功能会被反复使用。那么会将某段代码封装成函数,当我们要使用功能的时候直接调用函数即可
本质:函数是对功能的封装
优点:
简化代码结构,增加代码的复用度(重复使用的程度)
如果想修改或调试某一功能时,只需修改对应的函数即可
-
定义函数
格式
function 函数名(参数列表) { 语句 return 表达式; }
说明
部位 解释说明 function 函数代码块以 function 关键词开头 函数名 遵循标识符的规则 () 参数列表的开始和结束 参数列表 任何传入参数和自变量必须放在圆括号中间,圆括号之间可以用于定义参数。函数从函数的调用者获得的信息,可以没有参数 {} 函数体的开始和结束 语句 函数封装的功能 return 一般用于结束函数,并返回给函数的调用者一些信息,"表达式"即为要返回的数据。不带表达式的return相当于返回 undefined 注意:在仅仅只定义之后是不会被执行的,只是说明有了一个能完成该功能的函数,还没有被使用
-
调用函数
格式:函数名(参数列表)
注意:调用函数时该函数必须已经定义
本质:实参给形参赋值的过程
说明:
部位 解释说明 函数名 要使用某个功能函数的名字 () 参数列表的开始和结束 参数列表 调用者给函数的信息(实参)
二、最简单的函数(无参无返回值)
编写函数,实现在控制台上打印"sunck is a good man!"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的函数(无参无返回值)</title>
</head>
<body>
<script type="text/javascript">
//函数的调用,可以写在函数声明之前或之后
myConsole();
//函数的声明
function myConsole() {
console.log("sunck is a good man!");
}
//函数的调用
myConsole();
</script>
</body>
</html>
三、函数的参数
编写函数,给函数一个人的姓名、年龄等信息,打印 %s is a good man!He is %d years old!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数</title>
</head>
<body>
<script type="text/javascript">
// 形式参数(形参):变量
// 参数的数量理论上是无限的,但是实际上最好不要超过6、7个,类型是没有限制
function func(name, age) {
console.log("%s is a good man!He is %d years old!",name,age);
}
// 在函数调用时,需要给函数按顺序传递数据,数据要对应
// 实际参数(实参):值
func("sunck", 18)
</script>
</body>
</html>
对于已经传进来的参数js是来者不拒的,但是多余的部分会被默默的忽略掉,其实是被arguments接收,后期会讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数</title>
</head>
<body>
<script type="text/javascript">
// 形式参数(形参):变量
// 参数的数量理论上是无限的,但是实际上最好不要超过6、7个,类型是没有限制
function func(name, age) {
console.log("%s is a good man!He is %d years old!",name,age);
}
// 在函数调用时,需要给函数按顺序传递数据,数据要对应
// 实际参数(实参):值
func("sunck", 18, 180, 80)
</script>
</body>
</html>
四、函数的返回值
编写函数,实现计算两个数的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的返回值</title>
</head>
<body>
<script type="text/javascript">
function func(x, y) {
sum = x + y
// 注意:在定义的函数体中,尽量不要出现console
// console.log("ret = %d",sum)
return sum
}
// func(1, 2)
// 返回值返回到了函数调用的地方
// ret接收了mySum函数运算后的返回值
ret = func(1, 2)
console.log("ret = %d",ret)
// 以后会根据函数的返回值进行判断
</script>
</body>
</html>
五、变量作用域
-
概念
变量可以使用的范围,程序的变量并不是哪个位置都可以访问的,访问的权限决定于变量时在哪里定义的
-
作用域的划分
局部变量:在某个函数中定义的变量,仅在该函数内部可以使用
全局变量:定义在所有函数之外的变量
-
注意
js中变量的定义并不是以代码块为作用域的,而是以函数作为作用域的
-
变量查找的规则
首先在自身作用域中查找有没有同名变量,找不到的话依次向上级作用域中查找,不会向低级作用域中查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量作用域</title>
</head>
<body>
<script type="text/javascript">
var num1 = 10;
if (1){
var num2 = 20;
console.log("1-----num1 = %d", num1);
num1 = 11
}
console.log("1-----num2 = %d", num2);
console.log("2-----num1 = %d", num1);
function func() {
console.log("2-----num2 = %d", num2);
console.log("3-----num1 = %d", num1);
var num3 = 30;
//声明一个变量时没有使用var语句,该变量就会被默认为全局的
num4 = 40;
//函数内部可以向访问自己的局部变量那样访问全局变量
num1 = 12
}
func();
// console.log("1-----num3 = %d", num3);//访问不到函数中的局部变量
console.log("1-----num4 = %d", num4)
console.log("4-----num1 = %d", num1);
</script>
</body>
</html>
六、变量提升
js在执行过程进入新函数时,这个函数内被声明的所有变量都会被移动到函数最开始的地方,叫做变量的提升
注意:仅仅提升变量的声明,不会提升赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量提升</title>
</head>
<body>
<script type="text/javascript">
var num = 1;
function f() {
//此时没有使用到外部全局变量num,而是使用的局部num,打印的值是undefined,因为存在变量提升
console.log("1---num = " + num);
var num = 2;
//此时打印的值是2,因为函数域始终优先全局域,所以函数内定义的num会覆盖掉所有与它同名的全局变量。
console.log("2---num = " + num);
}
f();
// 下面代码类似上面代码
/*
var num = 1;
function f() {
var num;
console.log("1---num = " + num);
num = 2;
console.log("2---num = " + num);
}
f();
*/
</script>
</body>
</html>
七、函数也是一种数据
函数实际上也是一种数据,我们可以把一个函数赋值给一个变量,在通过变量访问函数,也可以当做参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数也是一种数据</title>
</head>
<body>
<script type="text/javascript">
function mySum(num1, num2) {
return num1 + num2;
}
//将函数赋值给变量
var sum = mySum;
//通过变量执行函数
var a = sum(1,2);
console.log("a = " + a);
</script>
</body>
</html>
八、匿名函数
即没有名字的函数,特别上当它不被赋值给变量单独使用时,可以有两种优雅的用法
- 可以将匿名函数作为参数传递给其他函数
- 定义匿名函数完成某些一次性任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
var f = function(a){
console.log("a = " + a);
};
f(123);
function fun(num1, num2, fc) {
return fc(num1, num2);
}
var num = fun(1,2,function(a,b){
return a + b;
});
console.log("num = " + num);
</script>
</body>
</html>
九、即时函数
说明:可以在定义后立即调用
实现:将匿名函数的定义放进一对小括号中,然后外面再紧跟一对小括号即可。最后的小括号起到的是"立即执行"的作用,同时它也是向匿名函数传递参数的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>即时函数</title>
</head>
<body>
<script type="text/javascript">
(function(a){
console.log("a = " + a);
})("sunck is a good man!");
</script>
</body>
</html>