JavaScript自定義函數(shù)用法詳解
JavaScript中的函數(shù)分為兩種:系統(tǒng)函數(shù)和自定義函數(shù),這里主要講解自定義函數(shù)。
自定義函數(shù)
1、語法:
注意:
- 傳入的參數(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> // 語法1自定義無參函數(shù) function custom(){ document.write("自定義無參函數(shù),使用第一種語法定義"+"<br />") }; // 語法2 var customer=function(){ document.write("自定義無參函數(shù),使用第二種語法定義"+"<br />") }; // 定義有參函數(shù) function customWithPara(i){ document.write("自定義有參函數(shù),使用第一種語法定義,i的值是:"+i+"<br />") }; // 語法2 var customerWithPara=function(i){ document.write("自定義有參函數(shù),使用第二種語法定義,i的值是:"+i+"<br />") }; </script> </head> <body> </body> </html>
2、函數(shù)的調(diào)用
函數(shù)可以通過函數(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ù) function custom(){ document.write("這是無參的函數(shù)"+"<br />"); }; // 定義無參的函數(shù)變量 var customer=function(){ document.write("這是無參的函數(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)用無參函數(shù) custom(); // 2、調(diào)用有參函數(shù) customWithPara(45); // 無參函數(shù)變量的調(diào)用 customer(); // 有參函數(shù)變量的調(diào)用 customerWithPara(23); </script> </body> </html>
結果:
注意:
- 調(diào)用函數(shù)時需要注意函數(shù)調(diào)用的順序。如果是自定義函數(shù),那么也可以在函數(shù)定義之前調(diào)用函數(shù),因為這時會自動把函數(shù)的定義放到最前面。如果是通過變量的形式定義函數(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)用無參函數(shù) custom(); // 2、調(diào)用有參函數(shù) customWithPara(45); // 無參函數(shù)變量的調(diào)用 customer(); // 有參函數(shù)變量的調(diào)用 customerWithPara(23); // 定義無參函數(shù) function custom(){ document.write("這是無參的函數(shù)"+"<br />"); }; // 定義無參的函數(shù)變量 var customer=function(){ document.write("這是無參的函數(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>
結果:
3、匿名函數(shù)
匿名函數(shù):顧名思義,即沒有函數(shù)名稱的函數(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> </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>
結果:
4、匿名函數(shù)的應用
匿名函數(shù)可以作為函數(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ù)的應用</title> <script> // 匿名函數(shù)應用 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>
結果:
到此這篇關于JavaScript自定義函數(shù)用法的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Javascript中的getUTCHours()方法使用詳解
這篇文章主要介紹了Javascript中的getUTCHours()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06網(wǎng)頁編輯器ckeditor和ckfinder配置步驟分享
ckeditor+ckfinder配置用法,現(xiàn)在ckeditor是互聯(lián)網(wǎng)上應用比較廣泛的網(wǎng)頁編輯器了,這里介紹下配置方法,需要的朋友可以參考下2012-05-05Js從頭學起(基本數(shù)據(jù)類型和引用類型的參數(shù)傳遞詳細分析)
Js中所有函數(shù)的參數(shù)傳遞都是按值傳遞的,也就是把函數(shù)外面的值復制給函數(shù)內(nèi)部的參數(shù),就和把值從一個變量復制到另一個變量一樣。下面舉幾個特別的例子2012-02-02