JavaScript-3.2-JavaScript 函数-匿名函数的声明与调用
程序员文章站
2024-02-26 19:23:52
...
JavaScript-3.2-JavaScript 函数-匿名函数的声明与调用
匿名函数的声明与调用
- 匿名函数就是指没有函数名的函数
一：事件调用匿名函数
- 配合事件使用
- 表示当触发哪一个事件时，执行哪一个匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 匿名函数</title>
</head>
<body>
<script type="text/javascript">
// window.load 表示当文档加载完成后，自动调用匿名函数
window.onload=function(){
alert("Hellow");
}
</script>
</body>
</html>
效果动态图
二：匿名函数表达式
- 将一个匿名函数赋值给一个变量，在后续调用函数时，这个变量可以当作函数名使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 匿名函数</title>
</head>
<body>
<script type="text/javascript">
// 声明匿名函数表达式
var func = function(){
document.write("2019");
}
// 调用函数表达式
func();
</script>
</body>
</html>
效果图
注意
使用匿名函数表达式时，函数调用语句必须在声明语句之后
三：自执行函数
- 自执行函数是指无需手动调用，在声明函数时自动调用的函数类型
1、!function(形参列表){}(实参列表)
- 可以使用任意运算符号开头，但一般使用英文叹号"!"
- 在函数{}后面紧跟一个圆括号，表示自动调用当前匿名函数
- 函数的实参可以通过最后的圆括号传入
<script type="text/javascript">
!function(num1,num2){
var sum = num1 + num2;
}(1,2); // 将实参传入函数
</script>
2、(function(形参列表){}(实参列表))
- 使用圆括号将匿名函数以及之后的圆括号包裹成为一个整体
<script type="text/javascript">
(function(num1,num2){
var sum = num1 + num2;
}(1,2)); // 将实参传入函数
</script>
3、(function(形参列表){})(实参列表)
- 只用圆括号包裹匿名函数体
<script type="text/javascript">
(function(num1,num2){
var sum = num1 + num2;
})(1,2); // 将实参传入函数
</script>
4、三种写法的特点
- 第一种写法：开头使用“!”，结尾使用“()”结构清晰，是最常使用的写法
- 第二种写法：使用括号包裹全部内容，可以表明匿名函数与之后调用的函数()为一个整体，官方推荐使用
- 第三种写法：无法表明函数与之后调用函数的()为一个整体，不推荐使用
上一篇： 应用程序分层开发模式----MVC