JavaScript自定義函數用法詳解

Posted on by

JavaScript中的函數分為兩種：系統函數和自定義函數，這裡主要講解自定義函數。

自定義函數

1、語法：

註意：

  • 傳入的參數是可選的。

例如：

<!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>自定義函數</title>
    <script>
        // 語法1自定義無參函數
       function custom(){
           document.write("自定義無參函數，使用第一種語法定義"+"<br />")
       };
       // 語法2
       var customer=function(){
        document.write("自定義無參函數,使用第二種語法定義"+"<br />")
       };
       // 定義有參函數
       function customWithPara(i){
           document.write("自定義有參函數，使用第一種語法定義,i的值是:"+i+"<br />")
       };
       // 語法2
       var customerWithPara=function(i){
           document.write("自定義有參函數,使用第二種語法定義,i的值是:"+i+"<br />")
       };
    </script>
</head>
<body>
    
</body>
</html>

2、函數的調用

函數可以通過函數名加上括號中的參數進行調用。

例如：

<!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>函數調用</title>
</head>
<body>
    <script>
       // 定義無參函數
       function custom(){
           document.write("這是無參的函數"+"<br />");
       };
       // 定義無參的函數變量
       var customer=function(){
        document.write("這是無參的函數變量"+"<br />");
       };
       // 定義有參函數
       function customWithPara(para){
           document.write("這是有參函數，參數值是:"+para+"<br />");
       }
       // 定義有參的函數變量
       var customerWithPara =function(para){
           document.write("這是有參的函數變量，參數值是:"+para+"<br />");
       }

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

結果：

註意：

  • 調用函數時需要註意函數調用的順序。如果是自定義函數，那麼也可以在函數定義之前調用函數，因為這時會自動把函數的定義放到最前面。如果是通過變量的形式定義函數，那麼必須先定義函數才能調用。

看下面的例子：

<!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>函數調用</title>
</head>
<body>
    <script>
       // 函數調用
       // 1、調用無參函數
       custom();
       // 2、調用有參函數
       customWithPara(45);
       // 無參函數變量的調用
       customer();
       // 有參函數變量的調用
       customerWithPara(23);

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


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

結果：

3、匿名函數

匿名函數：顧名思義，即沒有函數名稱的函數。其語法如下圖所示：

例如：

<!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>匿名函數</title>
</head>
<body>
    <script>
        // 傳統定義函數的方式
        function fn(){
            document.write("這是傳統函數的定義"+"<br />");
        };
        // 調用
        fn();
        // 匿名函數的定義和調用
        (function(){
            document.write("這是匿名函數"+"<br />");
        })();
    </script>
    
    
</body>
</html>

結果：

4、匿名函數的應用

匿名函數可以作為函數的參數進行調用，看下面的例子：

<!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>匿名函數的應用</title>
    <script>
         // 匿名函數應用
         function fun(para){
            document.write("參數的值是:"+para+"<br />");
        };
        // 用匿名函數作為函數的參數
        fun(function(){
            return 5;
        }());

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

結果：

到此這篇關於JavaScript自定義函數用法的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：