• 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>
  • 相关阅读:
    选li第几天数据这种类型
    CSS背景 顶上 顶下之类详解
    php的数据循环 之li的3个类判断
    jq之ajax以及json数据传递
    css响应有media,js响应有这种
    表格高度超出部分滚动条的坑
    【转】IDEA快捷键功能说明及Eclipse对应操作
    【转】intellij idea使用指南—— 导入Eclipse的Web项目
    【转】 关于IDEA javax.servlet.http.HttpServletRequest; 不存在 解决方案
    struts2学习笔记(七)—— struts2的文件上传
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10231582.html
Copyright © 2020-2023  润新知