javascript
013_JavaScript函数
1. 什么是函數?
1.1. 函數是一組可以隨時隨地運行的語句。
1.2. JavaScript函數是被設計為執行特定任務的代碼塊。
1.3. 代碼塊的最主要用途就是編寫函數體。
2. JavaScript函數語法
2.1. JavaScript函數是由這樣的方式進行聲明的: 關鍵字function、函數名、由小括號()包含的一組參數, 以及置于大括號{}中的待執行代碼。
function name(參數 1, 參數 2, 參數 3) {要執行的代碼 }2.2. 函數名可包含字母、數字、下劃線和美元符號(規則與標識符相同)。
2.3. 圓括號可包括由逗號分隔的參數:
(參數 1, 參數 2, ...)2.4. 由函數執行的代碼被放置在大花括號中:
{要執行的代碼 }2.5. 函數形參是在函數定義中所列的名稱。
2.6. 函數實參是當調用函數時由函數接收的真實的值。
3. 函數返回值
3.1. 在JavaScript中, 函數返回值不必明確地聲明它(像在Java中使用void那樣)。
function myPrint() {document.write("我沒有返回值。"); }3.2. 即使函數確實有值, 也不必明確地聲明它。該函數只需要使用return關鍵字后跟要返回的值即可。
function myFunction(a, b) {return a * b; // 函數返回a和b的乘積 }3.3. 另一個重要概念是, 與在Java中一樣, 函數在執行過return語句后立即停止代碼。因此, return語句后的代碼都不會被執行。
function myFunction(a, b) { return a * b; document.write("我這條語句不能執行。"); }3.4. 如果函數無返回值, 那么可以調用沒有參數的return語句, 隨時退出函數。
function myPrint() {document.write("我能輸出。");return;document.write("我不能輸出。"); }3.5. 在JavaScript中, 如果函數無明確的返回值或調用了沒有參數的return語句, 那么它真正返回的值是undefined。
3.6. 如果函數被某條語句調用后, 函數通常會計算出返回值, 然后把這個返回值返回給調用者。
4. 函數調用
4.1. 函數中的代碼將在其他代碼調用該函數時執行:
- 當事件發生時調用函數(當用戶點擊按鈕時調用函數)。
- 在其它JavaScript代碼中調用函數。
- 函數自調用。
4.2. ()運算符調用函數
4.2.1. 函數名稱引用的是函數對象。使用沒有()的函數名, 將返回函數的定義。
4.2.2. 函數名稱+()引用的是函數結果。
4.3. 實例
function myFunction(a, b) {return a * b; }window.alert(myFunction); window.alert(myFunction(7, 8));5. 用作變量值的函數
5.1. 使用變量來存儲函數的值, 您能夠把函數當做變量值直接使用。
function myFunction(a, b) {return a * b; }var x = myFunction(7, 8); // 調用函數, 返回值被賦值給x window.alert(x);6. 使用變量引用函數
6.1. 還可以使用變量引用函數, 然后使用變量+()的形式調用函數。
function myFunction(a, b) {return a * b; }var x = myFunction; // 引用函數 window.alert(x(7, 8));7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><title>JavaScript函數</title><meta charset="utf-8" /></head><body><script type="text/javascript">function myFunction(a, b) {var str = "函數內的局部變量";return a * b; }var value = myFunction(8, 9); // 用作變量值的函數var x = myFunction; // 使用變量引用函數document.write(myFunction + '<br />'); // 輸出函數的定義document.write('myFunction(8, 9) = ' + value + '<br />');document.write('x(7, 8) = ' + x(7, 8) + '<br />'); // x(7, 8)使用變量引用函數function sayHello() {document.write('hello everybody.<br />')}document.write('沒有明確返回值的函數返回值: ' + sayHello() + '<br />');</script></body> </html>7.2. 效果圖
8. 匿名函數
8.1. 沒有名稱的函數稱為匿名函數。
8.2. 沒有函數名的函數是函數表達式
function (a, b) {return a * b;};8.3. 存放在變量中的函數不需要函數名, 他們總是使用變量名調用:
var x = function (a, b) {return a * b}; var z = x(4, 3);8.4. 例子
8.4.1. 代碼
<!DOCTYPE html> <html><head><title>匿名函數</title><meta charset="utf-8" /></head><body><script type="text/javascript">var x = function (a, b) {return a * b};var z = x(4, 3);document.write(z + '<br />');</script></body> </html>8.4.2. 效果圖
9. 自調用函數
9.1. 函數表達式會自動執行, 假如表達式后面跟著()。
9.2. 您無法對函數聲明進行自調用。
9.3. 您需要在函數周圍添加括號, 以指示它是一個函數表達式:
(function () {return "hello!"; // 我會調用我自己 })();9.4. 例子
9.4.1. 代碼
<!DOCTYPE html> <html><head><title>自調用函數</title><meta charset="utf-8" /></head><body><script type="text/javascript">var value = (function () {return "hello!"; // 我會調用我自己})();document.write(value + '<br />');</script></body> </html>9.4.2. 效果圖
10. 箭頭函數
10.1. 箭頭函數允許使用簡短的語法來編寫函數表達式。
10.2. 您不需要function關鍵字, 甚至是return關鍵字和花括號。
10.3. 如果函數是單個語句, 則可以省略return關鍵字和大括號:
var value = function(x, y) {return x * y; } // 上面的函數和下面的箭頭函數是等價的 var value = (x, y) => x * y;10.4. 保留它們可能是一個好習慣:
var value = (x, y) => { return x * y };10.5. 箭頭函數沒有自己的this。它們不適合定義對象方法。
10.6. 例子
10.6.1. 代碼
<!DOCTYPE html> <html><head><title>箭頭函數</title><meta charset="utf-8" /></head><body><script type="text/javascript">var fun = (x, y) => x * y;document.write(fun(7, 8) + '<br />');var myFun = (x, y) => {var value = x + y;document.write(x + y + ' = ' + value);};myFun(3.14, 9);</script></body> </html>10.6.2. 效果圖
11. 為何使用函數?
11.1. 您能夠對代碼進行復用: 只要定義一次代碼, 就可以多次使用它。
11.2. 您能夠多次向同一函數傳遞不同的參數, 以產生不同的結果。
總結
以上是生活随笔為你收集整理的013_JavaScript函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 096_JavaScript事件
- 下一篇： 014_if语句