javascript的自訂函數有哪些-前端問答-PHP中文網

javascript的自訂函數有哪些

青灯夜游

發布： 2022-03-28 20:07:03

原創

2389 人瀏覽過

自訂函數有：1、命名函數，語法「function 函數名稱(){}」；2、匿名函數，語法「var 變數名稱=function(){};」；3、物件函數，語法「var 變數名=Function();」；4、自調函數，將函數的定義與呼叫一併實作。

javascript的自訂函數有哪些

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

函數是一組延遲動作集，可以透過事件觸發或在其他腳本中呼叫。

JavaScript 中的兩類函數：預定義函數、自訂函數

#預先定義函數
- 【parseInt / parseFloat】string 轉int/float
- 【isNaN / isFinite】偵測參數是否為非數字值/無限數
- #【escape / unescape 】對字串編碼/解碼
- 【eval】執行JavaScript 腳本
- 【alert / confirm / prompt】三種警告方塊
自訂函數
- 【命名函數】function funcName(){}
- 【匿名函數】var x=function(){};
- #【物件函數】var x= Function();
- 【自調函數】(function(){}());

自訂函數

JavaScript 中除了可以使用預訂函數外，還可以使用自訂函數。

在自訂函數時既不需要宣告函數的參數類型，也不需要宣告函數的傳回類型。

JavaScript 目前支援的自訂方式有：

命名函數

#1. 命名函數

命名函數透過 function 關鍵字定義，其後是函數名稱和括號()。
完成函數的定義後，函數並不會自動執行，只有透過事件或腳本呼叫時才會執行。
在同一個 <script></script> 標籤中，函數的呼叫可以在函數定義之前，也可以在函數定義之後。

在不同的 <script></script> 標籤中，函數的定義必須在函數的呼叫之前，否則呼叫無效。

格式如下：

function funcName([parameters]){
  statements;
  [return 表达式;]
}

登入後複製

2.匿名函數

#匿名函數的定義格式基本上與命名函數相同，只是沒有提供函數的名稱，且結束位置應有分號; 。由於沒有函數名字，所以需要使用變數對匿名函數進行接受，方便後面函數的呼叫。

命名函數對初學者來說，上手容易，但可讀性較差。匿名函數使用相對較方便，可讀性較好，目前比叫流行的 JavaScript 框架基本上都採用匿名函數的方式來定義函數。

格式如下：

var x=function([parameters]){
  statements;
  [return 表达式;]
};

登入後複製

3. 物件函數

var func1=new Function([parameters],statements;);

登入後複製

Function 是用來定義函數的關鍵字，首字母必須大寫。
parameters 為函數參數，可選。當有多個參數時，參數之間用逗號, 隔開。

statements 為函數執行體。當有多條執行語句時，語句之間以分號; 隔開。

4. 自呼叫函數

(function([parameters]){
  statements;
  [return 表达式;]
})([params]);

登入後複製

需要使用小括號() 將自調函數括起來，並以分號; 結束。
parameters 為形參，可選。參數之間以逗號, 隔開。

params 為實參，在函數呼叫時傳入資料。

程式碼範例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <input id="btn1" type="button" onclick="button1Event()" value="button1" />
  <input id="btn2" type="button" onclick="button2Event()" value="button2" /><br />
  <input id="a" type="text"/><input id="b" type="text"/><br />
  <input id="sumBtn" type="button" value="x+y" onclick="sum()"/>
  
  <script type="text/javascript">
    function button1Event(){/* 命名函数 */
        alert("命名函数：按钮1被点击！");
    }
    var x=function(){/* 匿名函数 */
        alert("匿名函数：按钮2被点击！");
    }
    button2Event=x;
    
    var y=new Function("a", "b", "return a+b");/* 对象函数 */
    sum=function(){
        var aValue=parseInt(document.getElementById("a").value,10);
        var bValue=parseInt(document.getElementById("b").value,10);
        alert("对象函数："+y(aValue,bValue));
    }
    
    var tema=2;var temb=2;
    (function(a,b){/* 自调函数 */
        alert("自调函数："+(a+b));
    })(tema,temb);
  </script>
</body>
</html>

登入後複製

效果示範：