JavaScript自定義函數用法詳解

2022-03-10 19:23:28

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自定義函數用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。