JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JavaScript匿名函数

匿名函数,是指没有名称的函数。匿名函数可以传递参数,也可以赋值给一个变量。

在JavaScript中,有两种传值方式,按值传递引用传递
  • 按值传递:赋值时是将数据本身传递给变量。
  • 引用传递:将数据(代码块)的地址传递给变量,而不是数据(代码块)本身。

基本数据类型一般是按值传递,复杂数据类型一般是引用传递。

另一种定义函数的方式

来分析一个函数的定义:
function demo(){
    // 函数主体部分
}
它的实质,是将函数主体赋值给了demo变量,这个函数主体是:
function(){
    // 函数主体部分
}
所以,demo() 函数也可以这样定义:
var demo=function(){
    // 函数主体部分
}
可以这样来调用函数:
demo();
小括号的作用是将demo变量所指向的函数主体(代码块)作为函数执行。

如果不加小括号,函数主体仅仅是一段文本,一段字符串,不会执行。

来看一段代码:
var total=1;
var demo=function(){
    total=10;
}
alert(demo);
alert(total);
保存并执行代码,第一个警告框将函数主体显示出来,如下图所示:

第二个警告框显示 1 。

实例演示:

点击这里调用函数


可以发现,函数并没有执行,仅仅是一段文本。

匿名函数的定义

匿名函数,可以理解为定了一个函数,但是没有将它赋值给变量。定义方式如下:
function([parameters]){
    statements;
    [return表达式;]
}
各个部分的含义与“ 具名函数 ”(有函数名的函数)相同。

匿名函数的调用

匿名函数没有函数名,也没有指向它的变量,不能像具名函数一样可以在任何地方调用,匿名函数必需在定义后立即执行。

上面已经提到,小括号的作用是将代码块作为函数执行,在小括号内一样可以传递参数,所以,匿名函数可以使用小括号来调用和执行:
(function([parameters]){
    // 函数主体部分
})([parameters]);
第一个小括号将函数体包围起来,第二个小括号执行函数体,[parameters]是要传递的参数列表。

例子1:
(function(){
    alert("匿名函数");
})();

例子2:
(function(x,y){
    alert(x+100);
})(10,100);

注意:最后要加上分号“ ; ”,这不是一个代码块,而是调用函数。

【例4-2】用匿名函数计算1+2+3+...+99+100的值。
<script language="JavaScript" type="text/javascript">
(function(m,n){
    var total=0;
    if(m>=n){
        alert(" 数值范围不正确! ");
        return false;
    }
    for(var i=m;i<=n;i++){
        total+=i;
    }
    alert(total);
})(1,100);
</script>

保存并执行代码,弹出警告框,显示 5050 ,匿名函数成功执行了。

再来看一个有返回值的匿名函数。

【例4-3】对【例4-2】稍作修改,同样用匿名函数计算1+2+3+...+99+100的值。
<html>
<head>
<title>计算1+2+3 ... +98+99+100的值</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
alert(
    (function(m,n){
        var total=0;
        if(m>=n){
            alert(" 数值范围不正确! ");
            return false;
        }
        for(var i=m;i<=n;i++){
            total+=i;
        }
        return total;
    })(1,100)  // 这里不要加分号
);
</script>
</body>
</html>
保存并执行代码,结果与【例4-2】相同。

总结:函数名是对函数主体(代码块)的引用,小括号是将代码块作为函数执行。