一篇文章帶你了解JavaScript函數(shù)定義
JavaScript 函數(shù)使用 function 關(guān)鍵字來定義,可以使用一個(gè)函數(shù)聲明或者一個(gè)函數(shù)表達(dá)式。
一、函數(shù)聲明
示例:
聲明一個(gè)函數(shù)不會(huì)立即執(zhí)行。
它們被“保存以供稍后使用”,稍后將被執(zhí)行,當(dāng)它們被調(diào)用(call)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<h1>JavaScript 函數(shù)</h1>
<p>此示例調(diào)用一個(gè)函數(shù),該函數(shù)執(zhí)行計(jì)算并返回結(jié)果</p>
<p id="demo"></p>
<script>
function myfan(a, b) {
return a / b;
}
document.getElementById("demo").innerHTML = myfan(6, 7);
</script>
</body>
</html>
分號(hào)是用來分隔執(zhí)行JavaScript語句。因?yàn)橐粋€(gè)函數(shù)聲明不是一個(gè)可執(zhí)行語句,它不用分號(hào)結(jié)尾。
二、函數(shù)表達(dá)式
一個(gè)JavaScript函數(shù)也可以使用 表達(dá)式 定義。
函數(shù)表達(dá)式可以存儲(chǔ)在變量中。
var x = function (a, b) {return a * b};
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<p>一個(gè)函數(shù)可以存儲(chǔ)到一個(gè)變量里面:</p>
<p id="demo"></p>
<script>
var x = function(a, b) {
return a * b
};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
函數(shù)表達(dá)式存儲(chǔ)在變量中后,變量可以作為函數(shù)使用。
var x = function (a, b) {
return a * b
};
var z = x(4, 3);
上面的函數(shù)實(shí)際上是一個(gè)匿名函數(shù)(一個(gè)沒有名字的函數(shù)),存儲(chǔ)在變量中的函數(shù)不需要函數(shù)名。它們總是使用變量名調(diào)用(call)。
上面的函數(shù)用分號(hào)結(jié)束,因?yàn)樗且粋€(gè)可執(zhí)行語句的一部分。
三、Function() 構(gòu)造函數(shù)
1. 定義
JavaScript函數(shù)使用function關(guān)鍵字定義。函數(shù)還可以用一個(gè)內(nèi)置的叫做Function()的構(gòu)造函數(shù)來定義。
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
不同的寫法
實(shí)際上不必使用函數(shù)構(gòu)造函數(shù)。上面的例子也可以寫成這樣。
var myFunction = function (a, b) {
return a * b
};
var x = myFunction(5, 5);
大多數(shù)時(shí)候,可以避免使用 new 關(guān)鍵詞在JavaScript 。
2. Function 提升(Hoisting)
Hoisting是JavaScript的默認(rèn)行為是移動(dòng)聲明當(dāng)前范圍的頂部。Hoisting 適用于變量聲明和函數(shù)聲明。
正因?yàn)槿绱耍琂avaScript函數(shù)可以調(diào)用之前就被聲明:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表達(dá)式定義函數(shù)不會(huì)被提升。
四、自調(diào)用函數(shù)
函數(shù)表達(dá)式可以進(jìn)行 “自調(diào)用” 。
自動(dòng)調(diào)用一個(gè)自調(diào)用表達(dá)式(自動(dòng)啟動(dòng)),而不必調(diào)用.函數(shù)表達(dá)式將自動(dòng)執(zhí)行,如果表達(dá)式隨后 (),不能自調(diào)用一個(gè)函數(shù)聲明.您必須在函數(shù)的周圍添加圓括號(hào),以指示它是函數(shù)表達(dá)式:
<script>
(fun
document.getElementById("demo").ction () {innerHTML = "Hello! I called myself";
})();
</script>
上面的函數(shù)實(shí)際上是一個(gè)匿名的自調(diào)用 函數(shù)(沒有名字的函數(shù))。
函數(shù)可以用作值
JavaScript 函數(shù)可以用作值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body>
<p>函數(shù)可以作為值對(duì)待:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>在這兩種情況下, x 都會(huì)是12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript函數(shù)可以用在表達(dá)式:
<script>
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2; /*函數(shù)可以在表達(dá)式中使用.*/
document.getElementById("demo").innerHTML = x;
</script>
五、總結(jié)
本文主要介紹了JavaScript 函數(shù)的定義。通過講解了函數(shù)的定義,函數(shù)的表達(dá)式,如何去定義構(gòu)造函數(shù),以及如何去調(diào)用自己創(chuàng)建的函數(shù),每一點(diǎn)都做了詳細(xì)的講解,通過用豐富的案例幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容,積極嘗試,有時(shí)候看到別人實(shí)現(xiàn)起來很簡單,但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候,總會(huì)有各種各樣的問題,切勿眼高手低,勤動(dòng)手,才可以理解的更加深刻。