zoukankan      html  css  js  c++  java
  • js:函数(声明、参数、返回值、匿名函数、函数的调用)

    1、函数

    (1)<script>标签的位置

    在解析html文件时,如果把script放在头部,遇到script标签,就会先下载html文件,直到下载完所有的script文件。这样会带来一个缺点,造成网页的加载速度缓慢。因此,可以把页面事件的函数放在head中,减少页面的加载时间。

    (2)函数

    函数是封装了一段可以被重复执行调用的代码块,可以让代码重复使用

    2、函数的声明

    (1)function  函数名(形式参数)

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                function welcome() {
                var num1=23;
                var num2=12;
                console.log(num1+num2)
            }
            </script>
        </head>
        <body onload="welcome()" bgcolor="aquamarine">
        
        </body>
    </html>

    (2)var  函数名=function(形式参数)

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function() {
                var num1=23;
                var num2=12;
                console.log(num1+num2)
            }
            </script>
        </head>
        <body onload="welcome()" bgcolor="aquamarine">
        
        </body>
    </html>

    welcome是变量名不是函数名,因此,这种声明方式得到的函数也被称为匿名函数。

    3、函数的参数

    (1)实参的个数和形参的个数相等

    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1) {
                var num2=12;
                console.log(num1+num2)
            }
            </script>
        </head>
        <body onload="welcome(12)" bgcolor="aquamarine">
    </html>

     调用函数的参数是形参,声明函数的时候是实参

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                function welcome(name) {
                    alert("你好" + name);
                }
            </script>
        </head>
    
        <body onload="welcome('liu')" bgcolor="aquamarine">
            <center>
                <h1>你好</h1>
            </center>
        </body>
    
    </html>

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                function welcome(name) {
                    alert("你好" + name);
                }
            </script>
        </head>
    
        <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
            <center>
                <h1>你好</h1>
            </center>
        </body>
    
    </html>

    通过例子可以看出,虽然形参只有一个,但是实参可以传递两个,并且执行的效果是完全相同的。这也反映出了java script与java和c语言的不同,虽然定义的函数是传递一个参数,但是在调用函数时传递的参数的个数是不受限制的。但大多数情况下是可多不可少。

    (2)实参的个数多于形参的个数

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1) {
                var num2=12;
                console.log(num1+num2)
            }
            </script>
        </head>
        <body onload="welcome(12,123)" bgcolor="aquamarine">
    </html>

     即使实参的个数和形参的个数不相等,也不会报错,函数可以正常执行

    (3)函数的实参的个数小于形参的个数

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1,num2) {
                console.log(num1+num2)
            }
            </script>
        </head>
        <body onload="welcome(12)" bgcolor="aquamarine">
    </html>

     形参num1有值,但是num2是undefined

    (4)arguments实现参数传递

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                function welcome(name) {
                    alert("你好" + arguments[0]);
                }
            </script>
        </head>
    
        <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
            <center>
                <h1>你好</h1>
            </center>
        </body>
    
    </html>

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                function welcome(name) {
                    alert("你好" + arguments[1]);
                }
            </script>
        </head>
    
        <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
            <center>
                <h1>你好</h1>
            </center>
        </body>
    
    </html>

    可以看出arguments对象类似一个数组,可以重0开始访问实参。它是当前函数的一个内置对象,存储了传递的所有实参。

    4、函数的分类:

    (1)已经定义了的函数:

    • 提示框:alert()
    • 控制台输出:console.log()

    (2)自定义的函数

     5、函数的返回值

    (1)普通情况

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome = function() {
                    var num1 = 23;
                    var num2 = 12;
                    num = num1 + num2;
                    return num;
                }
            </script>
        </head>
    
        <body bgcolor="aquamarine">
            <script>
                console.log(welcome());
            </script>
    
        </body>
    
    </html>

    (2)return只能返回一个值

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1,num2) {
                return num1,num2;
            }
                console.log(welcome(12,123));
            </script>
        </head>
        <body  bgcolor="aquamarine">
    </html>

     返回的结果是最后一个值

    (3)一次返回多个数据

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1,num2) {
                return [num1-num2,num1*num2,num1+num2];
            }
                console.log(welcome(12,123));
            </script>
        </head>
        <body  bgcolor="aquamarine">
    </html>

     数组的形式返回数据

     (4)函数没有返回值则返回undefined

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function(num1,num2) {
                
            }
                console.log(welcome(12,123));
            </script>
        </head>
        <body  bgcolor="aquamarine">
    </html>

    6、匿名函数

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
            
            </script>
        </head>
    
        <body bgcolor="aquamarine">
            <script>
            !function (){
                num1=2;
                console.log(num1);
            }();
            </script>
    
        </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
            
            </script>
        </head>
    
        <body bgcolor="aquamarine">
            <script>
            ;(function (){
                num1=2;
                console.log(num1);
            })()
            </script>
    
        </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
            
            </script>
        </head>
    
        <body bgcolor="aquamarine">
            <script>
            (function (){
                num1=2;
                console.log(num1);
            }())
            </script>
    
        </body>
    
    </html>

    定义时直接执行,只能用一次。

    好处:

    (1)解决了命名冲突的问题。

    (2)实现闭包。

    7、一个函数调用另一个函数

    <!DOCTYPE html>
    <html>
         <head>
            <meta charset="UTF-8">
            <title>Java Script</title>
            <script type="text/javascript">
                var welcome=function() {
                console.log("我是函数welcome");
                f();
                }
                welcome();
                function f(){
                    console.log("我是被调用的函数");
                }
                
            </script>
        </head>
        <body  bgcolor="aquamarine">
    </html>

  • 相关阅读:
    没人比程序猿更讨厌软件
    随心所欲~我也做个集合遍历器吧(自己的foreach,委托的威力)
    EF架构~DefaultValue让我的UnitOfWork更可读
    EF架构~数据分批批量提交
    陷阱~EF中的Update与Insert共用一个数据上下文
    我心中的核心组件(可插拔的AOP)~第四回 异常拦截器
    zigbee学习:示例程序SampleApp中通讯流程
    【网络可靠版】Extjs4 Treegrid 使用实例
    C#实现微信公众号群发消息(解决一天只能发一次的限制)
    oracle12c(oracle12.1.0.1.0)安装指南--实测OEL5.9(RH5)
  • 原文地址:https://www.cnblogs.com/zhai1997/p/11421010.html
Copyright © 2011-2022 走看看