函式是由一連串的子程式（陳述句的集合）所組成的，可以被外部程式呼叫，向函式傳遞引數之后，函式可以回傳一定的值，這里要注意的是JavaScript中的函式也是一個物件，使用typeof檢查一個函式物件時，會回傳function，
- 4.1 函式的定義
- 4.2 函式的呼叫
- 4.2.1 函式的簡單呼叫
- 4.2.2 在事件回應中呼叫函式
- 4.2.3 通過超鏈接呼叫函式
- 4.3 嵌套函式
- 4.4 歸遞函式
- 4.5 JavaScript中的內置函式
- 4.5.1 parseInt()函式
- 4.5.2 parseFloat()函式
- 4.5.3 isNaN()函式
- 4.5.4 isFinite()函式
- 4.5.5 encodeURI()函式
- 4.5.6 decodeURI()函式
- 4.6 Function()建構式與函式直接量
4.1 函式的定義
在Javascript中，函式是由關鍵字function、函式名加一組引數以及置于大括號中需要執行的一段代碼定義的，基本語法：
function functionNeme([parameter 1,parameter 2,...]){
statements;
[return expression;]
}
引數說明：
functionName：必選項，用于指定函式名，保持唯一且區分大小寫，
parameter：可選項，用于指定引數串列，當有多個引數時，用逗號隔開，一個函式最多可有255個引數，
statement：必選項，用于指定函式體，即實作函式功能的代碼塊，
expression：可選項，用于回傳函式值，可為任意運算式/變數或常量，
例如，定義一個用于計算商品金額的函式account()，回傳值為計算后的商品金額，
function account(price, num) {
var sum = price * num; // 計算金額
return sum; // 回傳值
}
4.2 函式的呼叫
函式定義后并不會自動執行，要執行一個函式，需要在特定的位置呼叫陳述句，呼叫陳述句包含名稱、引數具體值等，
4.2.1 函式的簡單呼叫
函式的定義陳述句通常被放在HTML檔案的段中，而函式的呼叫陳述句通常被放在段中，如果在函式定義之前呼叫函式，執行將會報錯，
函式的定義及呼叫實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
function account(price, num) { // 定義函式
var sum = price * num; // 計算金額
alert(sum); // 輸出結果
}
</script>
</head>
<body>
<script type="text/javascript">
account(20, 100); // 呼叫函式
</script>
</body>
</html>
執行結果：
函式的引數分為形式引數（形參）和實際引數（實參），其中形式引數為函式賦予的引數，代表函式的位置和型別，系統并不為形參分配相應的存盤空間，呼叫函式時傳遞給函式的引數稱為實際引數，實參通常在呼叫函式之前已經被分配了記憶體，并且賦予了實際的資料，在函式的執行程序中，實際引數參與了函式的運行，上述示例中的price、num即為形參，
4.2.2 在事件回應中呼叫函式
當用戶單擊某個按鈕或選中某個復選框時將觸發事件，撰寫程式對事件做出反應的行為稱為回應事件，在Javascript中，將函式與事件相關聯，就完成了回應事件的程序，
例如，當用戶單擊某個按鈕時，執行相應的函式，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
function test() { // 定義函式
alert("test") // 回傳值
}
</script>
</head>
<body>
<form action="" method="get" name="from1">
<input type="button" value="提交" onclick="test();">
<!--在按鈕事件觸發時，呼叫函式-->
</form>
</body>
</html>
執行結果：
4.2.3 通過超鏈接呼叫函式
在<a>標簽中的href屬性中使用”javascript:函式名()“格式來呼叫函式，當用戶單擊該超鏈接時，相關函式將會被執行，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
function test() { // 定義函式
alert("test") // 回傳值
}
</script>
</head>
<body>
<a href="javascript:test();">Alexhesz</a>
</body>
</html>
執行結果：
4.3 嵌套函式
所謂嵌套函式，即在函式內部再定義一個函式，這樣定義的優點在于可以使內部函式輕松獲得外部函式的引數以及函式的全域變數等，嵌套函式再JavaScript中非常強大，但使用時需要當心，因為他會使程式可讀性降低，
語法格式：
<script type="text/javascript">
var outter = 10;
function functionName([parameter 1,parameter 2,...]){
function innerFunction(){
somestatements;
}
}
</script>
引數說明：
functionName：外部函式名稱；
innerFunction：嵌套函式名稱，
實體，在嵌套函式中獲取全域變數以及外部函式引數的和，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
var num = 10; // 定義全域變數
function add(num1, num2) { // 定義外部函式
function innerAdd() { // 定義內部函式
alert("引數和為：" + (num1 + num2 + num));
}
return innerAdd();
}
</script>
</head>
<body>
<script type="text/javascript">
add(10, 10) // 呼叫函式
</script>
</body>
</html>
執行結果：
4.4 歸遞函式
所謂歸遞函式就是函式在自身的函式體內呼叫自身，使用歸遞函式時一定要當心，處理不當將會使陳鼓型進入死回圈，歸遞函式可以用來處理一些特殊情況，如處理階乘問題等，
語法格式：
<script type=“text/javascript”>
var outter = 10;
function funtionName(parameter 1){
functionName(parameter 2)
}
</script>
實體：歸遞函式的應用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
function f(num) { // 定義歸遞函式
if (num <= 1) {
return 1;
} else {
return f(num - 1) * num;
}
}
</script>
</head>
<body>
<script type="text/javascript">
alert("5!的結果是：" + f(5)) // 呼叫函式 輸出
</script>
</body>
</html>
執行結果：
在定義歸遞函式時需要兩個必要條件：
- 包括一個結束歸遞條件，如實體中的“
if(num<1)”陳述句，如果滿足條件則執行“return 1;” 陳述句，不再歸遞， - 包括一個歸遞呼叫陳述句，如實體中的“
return f(num-1)*num;”陳述句，用于實作呼叫歸遞函式，
4.5 JavaScript中的內置函式
4.5.1 parseInt()函式
該函式主要將首位為數字的字串轉化成數字，如果字串不是以數字開頭，那么將回傳NaN，
語法：
parseInt(StringNum,[n])
StringNum：需要轉換為整型的字串，
n：提供在2～36之間的數字表示所保存數字的進制數，這個引數在函式中不是必須的，
4.5.2 parseFloat()函式
該函式主要將首位為數字的字串轉化成浮點型數字，如果字串不是以數字開頭，那么將回傳NaN，
語法：
parseFloat(StringNum)
StringNum：需要轉換為浮點型的字串，
4.5.3 isNaN()函式
該函式主要用于檢驗某個值是否為NaN，
語法：
isNaN(Num)
Num：需要驗證的數字，
說明：如果引數Num為NaN，函式回傳值為true；如果引數Num不是NaN，函式回傳值為false，
4.5.4 isFinite()函式
該函式主要用于檢驗某個運算式是否為無窮大，
語法：
isFinite(Num)
Num：需要驗證的數字，
說明：如果引數Num為無窮大，函式回傳值為true；如果引數Num不為無窮大，函式回傳值為false，
4.5.5 encodeURI()函式
該函式主要用于回傳一個URI字串編碼后的結果，
語法：
encodeURI(url)
url：需要轉化為網路資源地址的字串，
說明：URI與URL都可以表示網路資源地址，URI比URL的表示范圍更加廣泛，但在一般情況下，URI與URL可以是等同的，encodeURI()函式只對字串中有意義的字符進行轉義，例如將字串中的空格轉化為“%20”，
4.5.6 decodeURI()函式
該函式主要用于將已編碼為URI的字串解碼成最初的字串并回傳，
語法：
decodeURI(url)
url：需要解碼的網路資源地址，
說明：此函式可以將使用encodeURI()轉碼的網路資源地址轉化為字串并回傳，即decodeURI()函式是encodeURI()函式的逆向操作，
4.6 Function()建構式與函式直接量
除了可使用基本的function陳述句定義函式之外，還可以使用Function()函式和函式直接量來定義函式，這兩者存在很重要的區別，
- 建構式Function()允許在運行時動態創建和編譯JavaScript代碼，而函式直接量卻是程式結構的一個靜態部分，就像函式陳述句一樣，
- 每次呼叫建構式Function()時都會決議函式體，并且創建一個新的函式物件，如果對建構式的呼叫出現在一個回圈中，或者出現在一個經常被呼叫的函式中，這種方法的效率將非常低，而函式直接量不論出現在回圈體還是嵌套函式中，既不會在每次呼叫時都被重新編譯，也不會在每次遇到時都創建一個新的函式物件，
- Function()創建的函式使用的不是靜態作用域，相反的，該函式總是被當作頂級函式來編譯，
例.通過自定義函式實作屏蔽滑鼠和鍵盤相關事件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗代碼</title>
<script type="text/javascript">
function maskingKeyboard() { // 定義函式
if (event.KeyCode == 8) { // 判斷是否為Backspace鍵
event.KeyCode = 0;
event.returnValue = false;
alert("當前網頁不允許使用Backspace鍵！！！");
}
if (event.KeyCode == 13) { // 判斷是否為Enter鍵
event.KeyCode = 0;
event.returnValue = false;
alert("當前網頁不允許使用Enter鍵！！！");
}
if (event.KeyCode == 116) { // 判斷是否為F5鍵
event.KeyCode = 0;
event.returnValue = false;
alert("當前網頁不允許使用F5鍵！！！");
}
// 判斷是否為Alt+方向鍵方向鍵<——或方向鍵——>
if ((event.altKey) && ((window.KeyCode == 37) || (window.event.KeyCode == 39))) {
event.returnValue = false;
alert("當前網頁不允許使用Alt+方向鍵方向鍵<——或方向鍵——>");
}
if ((event.ctrlKey) && (event.KeyCode == 78)) { // 判斷是否為Ctrl+N鍵
event.returnValue = false;
alert("當前網頁不允許使用Ctrl+N新建視窗！！！");
}
if ((event.shiftKey) && (event.KeyCode == 121)) { // 判斷是否為Shift+F10鍵
event.returnValue = false;
alert("當前網頁不允許使用Shift+F10鍵！！！");
}
}
</script>
</head>
<body onkeydown="maskingKeyboard()">
<!--呼叫函式maskingKeyboard()-->
<p>曾經滄海難為水，</p>
<p>除卻巫山不是云，</p>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401653.html
標籤：其他