JavaScript匿名函数

JavaScript匿名函数教程

匿名函数，就是只有函数体没有函数名的函数。JavaScript 支持匿名函数的定义，JavaScript 的匿名函数可以作为一种类型被赋值给函数类型的变量，匿名函数也往往以变量方式传递。

JavaScript匿名函数详解

语法

function(paramters){
    //do something
    return
}

说明

我们定义了一个匿名函数，该匿名函数的 参数列表 是 paramters。

JavaScript匿名函数调用

调用方式一

var f = function(paramters){
    //do something
    return
};
f(paramters);

说明

我们定义了一个匿名函数，该匿名函数的参数列表是 paramters，同时，我们将该匿名函数赋值给了变量 f，最后，我们可以通过 f 来调用该匿名函数。

调用方式二

function(paramters){
    //do something
    return
}(paramters);

说明

匿名函数还可以直接通过小括号的形式来直接调用。

调用方式三

let  btn = document.getElementById("btn");  // 找到页面某个标签
// 添加事件
btn.onclick = function(){
   console.info("你点了我！");
}

说明

我们可以在事件中来调用匿名函数。

调用方式四

let myObj = {
     name : "HaiCoder",
     sayHai:function(){
         console.info("Hello,"+ this.name );
     }
};
myObj.sayHai();

说明

我们可以通过对象来调用匿名函数。

案例

JavaScript匿名函数

定义并调用JavaScript的匿名函数

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript匿名函数</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var f = function(){
                console.log("Hello HaiCoder");
            };
            f();
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

16_javascript匿名函数.png

我们定义了一个匿名函数，在该匿名函数里面，我们直接输出了一句话，并且，将该匿名函数赋值给了变量 f，最后，我们可以直接通过变量 f 来调用该匿名函数。

JavaScript带参数的匿名函数

定义并调用带参数的匿名函数

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript匿名函数</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var res = function(a, b){
                return a + b;
            }(512, 512);
            console.log("Res =", res);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

17_javascript匿名函数.png

我们定义了一个带两个 int 类型参数的匿名函数，并且在该匿名函数的最后使用 () 的形式来调用该匿名函数，在 () 里面我们传入了 10 和 20，即 10 和 20 是这个匿名函数的参数，结果输出了这两个参数的和。

JavaScript匿名函数总结

匿名函数，就是只有函数体没有函数名的函数。JavaScript 支持匿名函数的定义，JavaScript 的匿名函数可以作为一种类型被赋值给函数类型的变量，匿名函数也往往以变量方式传递。