JavaScript自定義函數(shù)用法詳解

更新時(shí)間：2022年03月10日 16:23:42 作者：.NET開發(fā)菜鳥

本文詳細(xì)講解了JavaScript自定義函數(shù)的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

JavaScript中的函數(shù)分為兩種：系統(tǒng)函數(shù)和自定義函數(shù)，這里主要講解自定義函數(shù)。

自定義函數(shù)

1、語(yǔ)法：

注意：

傳入的參數(shù)是可選的。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定義函數(shù)</title>
    <script>
        // 語(yǔ)法1自定義無(wú)參函數(shù)
       function custom(){
           document.write("自定義無(wú)參函數(shù)，使用第一種語(yǔ)法定義"+"<br />")
       };
       // 語(yǔ)法2
       var customer=function(){
        document.write("自定義無(wú)參函數(shù),使用第二種語(yǔ)法定義"+"<br />")
       };
       // 定義有參函數(shù)
       function customWithPara(i){
           document.write("自定義有參函數(shù)，使用第一種語(yǔ)法定義,i的值是:"+i+"<br />")
       };
       // 語(yǔ)法2
       var customerWithPara=function(i){
           document.write("自定義有參函數(shù),使用第二種語(yǔ)法定義,i的值是:"+i+"<br />")
       };
    </script>
</head>
<body>
    
</body>
</html>

2、函數(shù)的調(diào)用

函數(shù)可以通過(guò)函數(shù)名加上括號(hào)中的參數(shù)進(jìn)行調(diào)用。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函數(shù)調(diào)用</title>
</head>
<body>
    <script>
       // 定義無(wú)參函數(shù)
       function custom(){
           document.write("這是無(wú)參的函數(shù)"+"<br />");
       };
       // 定義無(wú)參的函數(shù)變量
       var customer=function(){
        document.write("這是無(wú)參的函數(shù)變量"+"<br />");
       };
       // 定義有參函數(shù)
       function customWithPara(para){
           document.write("這是有參函數(shù)，參數(shù)值是:"+para+"<br />");
       }
       // 定義有參的函數(shù)變量
       var customerWithPara =function(para){
           document.write("這是有參的函數(shù)變量，參數(shù)值是:"+para+"<br />");
       }

       // 函數(shù)調(diào)用
       // 1、調(diào)用無(wú)參函數(shù)
       custom();
       // 2、調(diào)用有參函數(shù)
       customWithPara(45);
       // 無(wú)參函數(shù)變量的調(diào)用
       customer();
       // 有參函數(shù)變量的調(diào)用
       customerWithPara(23);
    </script>
</body>
</html>

結(jié)果：

注意：

調(diào)用函數(shù)時(shí)需要注意函數(shù)調(diào)用的順序。如果是自定義函數(shù)，那么也可以在函數(shù)定義之前調(diào)用函數(shù)，因?yàn)檫@時(shí)會(huì)自動(dòng)把函數(shù)的定義放到最前面。如果是通過(guò)變量的形式定義函數(shù)，那么必須先定義函數(shù)才能調(diào)用。

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函數(shù)調(diào)用</title>
</head>
<body>
    <script>
       // 函數(shù)調(diào)用
       // 1、調(diào)用無(wú)參函數(shù)
       custom();
       // 2、調(diào)用有參函數(shù)
       customWithPara(45);
       // 無(wú)參函數(shù)變量的調(diào)用
       customer();
       // 有參函數(shù)變量的調(diào)用
       customerWithPara(23);

       // 定義無(wú)參函數(shù)
       function custom(){
           document.write("這是無(wú)參的函數(shù)"+"<br />");
       };
       // 定義無(wú)參的函數(shù)變量
       var customer=function(){
        document.write("這是無(wú)參的函數(shù)變量"+"<br />");
       };
       // 定義有參函數(shù)
       function customWithPara(para){
           document.write("這是有參函數(shù)，參數(shù)值是:"+para+"<br />");
       }
       // 定義有參的函數(shù)變量
       var customerWithPara =function(para){
           document.write("這是有參的函數(shù)變量，參數(shù)值是:"+para+"<br />");
       }


    </script>
</body>
</html>

結(jié)果：

3、匿名函數(shù)

匿名函數(shù)：顧名思義，即沒有函數(shù)名稱的函數(shù)。其語(yǔ)法如下圖所示：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>匿名函數(shù)</title>
</head>
<body>
    <script>
        // 傳統(tǒng)定義函數(shù)的方式
        function fn(){
            document.write("這是傳統(tǒng)函數(shù)的定義"+"<br />");
        };
        // 調(diào)用
        fn();
        // 匿名函數(shù)的定義和調(diào)用
        (function(){
            document.write("這是匿名函數(shù)"+"<br />");
        })();
    </script>
    
    
</body>
</html>

結(jié)果：

4、匿名函數(shù)的應(yīng)用

匿名函數(shù)可以作為函數(shù)的參數(shù)進(jìn)行調(diào)用，看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>匿名函數(shù)的應(yīng)用</title>
    <script>
         // 匿名函數(shù)應(yīng)用
         function fun(para){
            document.write("參數(shù)的值是:"+para+"<br />");
        };
        // 用匿名函數(shù)作為函數(shù)的參數(shù)
        fun(function(){
            return 5;
        }());

        // 也可以使用下面的方式
        function fu(para){
            document.write("參數(shù)的值是:"+para()+"<br />");
        };
        fu(function(){
            return "56";
        });
    </script>
</head>
<body>
    
</body>
</html>

結(jié)果：