JavaScript 函式

函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。

例項

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試例項</title> <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)
{
程式碼
}

變數和引數必須以一致的順序出現。第一個變數就是第一個被傳遞的引數的給定的值，以此類推。

例項

<p>點選這個按鈕，來呼叫帶引數的函式。</p> <button onclick="myFunction('Harry Potter','Wizard')">點選這裡</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script>

嘗試一下 ?

上面的函式在按鈕被點選時會提示 "Welcome Harry Potter, the Wizard"。

函式很靈活，您可以使用不同的引數來呼叫該函式，這樣就會給出不同的訊息：

例項

<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 變數分配值

如果您把值賦給尚未宣告的變數，該變數將被自動作為 window 的一個屬性。

這條語句：

carname="Volvo";

將宣告 window 的一個屬性 carname。

非嚴格模式下給未宣告變數賦值建立的全域性變數，是全域性物件的可配置屬性，可以刪除。

var var1 = 1; // 不可配置全域性屬性
var2 = 2; // 沒有使用 var 宣告，可配置全域性屬性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 無法刪除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已經刪除 報錯變數未定義