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>結(jié)果:

注意:
- 調(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>結(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ù)進行調(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript學(xué)習(xí)筆記之基礎(chǔ)語法
本文不是零基礎(chǔ)教學(xué),請沒javascript基礎(chǔ)的小伙伴們先出門左拐,本人之前學(xué)習(xí)java的,所以本文主要對比下java學(xué)習(xí)javascript。2015-01-01
Javascript中的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-05
Js從頭學(xué)起(基本數(shù)據(jù)類型和引用類型的參數(shù)傳遞詳細分析)
Js中所有函數(shù)的參數(shù)傳遞都是按值傳遞的,也就是把函數(shù)外面的值復(fù)制給函數(shù)內(nèi)部的參數(shù),就和把值從一個變量復(fù)制到另一個變量一樣。下面舉幾個特別的例子2012-02-02

