JavaScript 函數 · W3School Javascript & jQuery 教程

# JavaScript 函數 **函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。** ## 實例 ``` <!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">點擊這里</button> </body> </html> ``` ## JavaScript 函數語法函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function： ``` function functionname() { 這里是要執行的代碼 } ``` 當調用該函數時，會執行函數內的代碼。可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調用。提示：JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，并且必須以與函數名稱相同的大小寫來調用函數。 ## 調用帶參數的函數在調用函數時，您可以向其傳遞值，這些值被稱為參數。這些參數可以在函數中使用。您可以發送任意多的參數，由逗號 (,) 分隔： ``` myFunction(_argument1_,_argument2_) ``` 當您聲明函數時，請把參數作為變量來聲明： ``` function myFunction(`var1`,`var2`) { 這里是要執行的代碼 } ``` 變量和參數必須以一致的順序出現。第一個變量就是第一個被傳遞的參數的給定的值，以此類推。 ### 實例 ``` <button onclick="myFunction('Bill Gates','CEO')">點擊這里</button> <script> function myFunction(name,job) { alert("Welcome " + `name` + ", the " + `job`); } </script> ``` 上面的函數會當按鈕被點擊時提示 "Welcome Bill Gates, the CEO"。函數很靈活，您可以使用不同的參數來調用該函數，這樣就會給出不同的消息： ### 實例 ``` <button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button> <button onclick="myFunction('Bob','Builder')">點擊這里</button> ``` 根據您點擊的不同的按鈕，上面的例子會提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。 ## 帶有返回值的函數有時，我們會希望函數將值返回調用它的地方。通過使用 return 語句就可以實現。在使用 return 語句時，函數會停止執行，并返回指定的值。 ### 語法 ``` function myFunction() { var x=5; `return x;` } ``` 上面的函數會返回值 5。注釋：整個 JavaScript 并不會停止執行，僅僅是函數。JavaScript 將繼續執行代碼，從調用函數的地方。函數調用將被返回值取代： ``` var myVar=myFunction(); ``` myVar 變量的值是 5，也就是函數 "myFunction()" 所返回的值。即使不把它保存為變量，您也可以使用返回值： ``` document.getElementById("demo").innerHTML=myFunction(); ``` "demo" 元素的 innerHTML 將成為 5，也就是函數 "myFunction()" 所返回的值。您可以使返回值基于傳遞到函數中的參數： ### 實例計算兩個數字的乘積，并返回結果： ``` function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); ``` "demo" 元素的 innerHTML 將是： ``` 12 ``` 在您僅僅希望退出函數時，也可使用 return 語句。返回值是可選的： ``` function myFunction(a,b) { if (a>b) { return; } x=a+b } ``` 如果 a 大于 b，則上面的代碼將退出函數，并不會計算 a 和 b 的總和。 ## 局部 JavaScript 變量在 JavaScript 函數內部聲明的變量（使用 var）是_局部_變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。您可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。只要函數運行完畢，本地變量就會被刪除。 ## 全局 JavaScript 變量在函數外聲明的變量是_全局_變量，網頁上的所有腳本和函數都能訪問它。 ## JavaScript 變量的生存期 JavaScript 變量的生命期從它們被聲明的時間開始。局部變量會在函數運行以后被刪除。全局變量會在頁面關閉后被刪除。 ## 向未聲明的 JavaScript 變量來分配值如果您把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明。這條語句： ``` carname="Volvo"; ``` 將聲明一個_全局_變量 carname，即使它在函數內執行。 ## 課外書如需更多有關 _JavaScript 函數_的知識，請閱讀 JavaScript 高級教程中的相關內容： [ECMAScript 函數概述](/js/pro_js_functions.asp "ECMAScript 函數概述") 本節講解函數的概念，ECMAScript 如何聲明并調用函數，以及函數如何返回值。 [ECMAScript arguments 對象](/js/pro_js_functions_arguments_object.asp "ECMAScript arguments 對象") 本節介紹了此對象的基本用法，然后講解了如何使用 length 屬性來測定函數的參數數目，以及模擬函數重載。 [ECMAScript Function 對象（類）](/js/pro_js_functions_function_object.asp "ECMAScript Function 對象（類）") 本節講解了如何使用 Function 類創建函數，然后介紹了 Function 對象的屬性和方法。 [ECMAScript 閉包（closure）](/js/pro_js_functions_closures.asp "ECMAScript 閉包（closure）") 本節講解了閉包（closure）的概念，并分別為您展示了簡單和稍復雜的兩個閉包實例。