JavaScript--函数、匿名函数和自执行函数详解

函数的声明及调用

1.函数的声明格式：

function 函数名([参数1]，[参数2]，.....){
//函数体代码
[return 返回值];
}
2.函数的调用：

js直接调用：函数名(参数1的值，参数2的值，......);
html事件调用：在HTML标签中，使用事件名="函数名()"

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            function method() {
                //JS直接调用
                var num = add(1, 2);
                console.log(num);
            }

            function add(num1, num2) {
                //有返回值
                return num1 + num2;
            }
        </script>
        <button id="btn" onclick="method()">函数</button>
    </body>

</html>

注意：使用函数表达式时，函数的调用语句和函数声明语句没有先后之分

匿名函数的声明及调用

使用匿名函数表达式。将匿名函数，赋值给一个变量

声明：var func=function(){ }
调用：func();

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            function method(){
                add(1, 2);  //可以执行
            }
            
            //add(3,4);  不能执行
              
            var add=function(num1, num2) {
                //有返回值
                var num= num1 + num2;
                console.log(num);
            }
        </script>
        <button id="btn" onclick="method()">匿名函数</button>
    </body>

</html>

注意：使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后

自执行函数的声明

1.可以使用多种运算符开头但一般用！！function(形参列表){ }(实参列表)
2.使用()将函数及函数后的括号包裹 (function(形参列表){ }(实参列表));
3.使用()值包裹函数值 (function(形参列表){ })(实参列表);

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            //页面加载就会执行
            (function(a,b){
                var c=a+b;
                console.log(c);
            })(3,4);
        </script>
        <button id="btn" onclick="">自执行函数</button>
    </body>

</html>