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ù)進(jìn)行調(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>
結(jié)果:
注意:
- 調(diào)用函數(shù)時需要注意函數(shù)調(diào)用的順序。如果是自定義函數(shù),那么也可以在函數(shù)定義之前調(diào)用函數(shù),因?yàn)檫@時會自動把函數(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>
結(jié)果:
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>
結(jié)果:
4、匿名函數(shù)的應(yīng)用
匿名函數(shù)可以作為函數(shù)的參數(shù)進(jìn)行調(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ù)的應(yīng)用</title> <script> // 匿名函數(shù)應(yīng)用 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>
結(jié)果:
到此這篇關(guān)于JavaScript自定義函數(shù)用法的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解JavaScript自定義函數(shù)
- JavaScript自定義函數(shù)實(shí)現(xiàn)查找兩個字符串最長公共子串的方法
- 常用原生js自定義函數(shù)總結(jié)
- js自定義回調(diào)函數(shù)
- JS自定義選項(xiàng)卡函數(shù)及用法實(shí)例分析
- javascript 自定義回調(diào)函數(shù)示例代碼
- js常用自定義公共函數(shù)匯總
- 基于JavaScript自定義構(gòu)造函數(shù)的詳解說明
- JS 自定義帶默認(rèn)值的函數(shù)
- JS 自定義函數(shù)缺省值的設(shè)置方法
- 總結(jié)一些js自定義的函數(shù)
相關(guān)文章
JavaScript學(xué)習(xí)筆記之基礎(chǔ)語法
本文不是零基礎(chǔ)教學(xué),請沒javascript基礎(chǔ)的小伙伴們先出門左拐,本人之前學(xué)習(xí)java的,所以本文主要對比下java學(xué)習(xí)javascript。2015-01-01Javascript中的getUTCHours()方法使用詳解
這篇文章主要介紹了Javascript中的getUTCHours()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06網(wǎng)頁編輯器ckeditor和ckfinder配置步驟分享
ckeditor+ckfinder配置用法,現(xiàn)在ckeditor是互聯(lián)網(wǎng)上應(yīng)用比較廣泛的網(wǎng)頁編輯器了,這里介紹下配置方法,需要的朋友可以參考下2012-05-05Js從頭學(xué)起(基本數(shù)據(jù)類型和引用類型的參數(shù)傳遞詳細(xì)分析)
Js中所有函數(shù)的參數(shù)傳遞都是按值傳遞的,也就是把函數(shù)外面的值復(fù)制給函數(shù)內(nèi)部的參數(shù),就和把值從一個變量復(fù)制到另一個變量一樣。下面舉幾個特別的例子2012-02-02