Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 函數定義

JavaScript使用關鍵字function定義函數。

函數可以通過聲明定義,也可以是一個表達式。


函數聲明

在之前的教程中,你已經了解了函數聲明的語法:

function functionName ( parameters ) {
執行的代碼
}

函數聲明後不會立即執行,會在我們需要的時候調用到。

實例

function myFunction(a, b) {
return a * b;
}

嘗試一下»

Note 分號是用來分隔可執行JavaScript語句。
由於函數聲明不是一個可執行語句,所以不以分號結束。


函數表達式

JavaScript 函數可以通過一個表達式定義。

函數表達式可以存儲在變量中:

實例

var x = function (a, b) {return a * b};

嘗試一下»

在函數表達式存儲在變量後,變量也可作為一個函數使用:

實例

var x = function (a, b) {return a * b};
var z = x(4, 3);

嘗試一下»

以上函數實際上是一個匿名函數 (函數沒有名稱)。

函數存儲在變量中,不需要函數名稱,通常通過變量名來調用。

Note 上述函數以分號結尾,因為它是一個執行語句。


Function() 構造函數

在以上實例中,我們了解到函數通過關鍵字function定義。

函數同樣可以通過內置的JavaScript 函數構造器(Function())定義。

實例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

嘗試一下»

實際上,你不必使用構造函數。 上面實例可以寫成:

實例

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

嘗試一下»

Note 在JavaScript中,很多時候,你需要避免使用new關鍵字。


函數提升(Hoisting)

在之前的教程中我們已經了解了"hoisting(提升)"。

提升(Hoisting)是JavaScript 默認將當前作用域提升到前面去的的行為。

提升(Hoisting)應用在變量的聲明與函數的聲明。

因此,函數可以在聲明之前調用:

myFunction(5);

function myFunction(y) {
return y * y;
}

使用表達式定義函數時無法提升。


自調用函數

函數表達式可以"自調用"。

自調用表達式會自動調用。

如果表達式後面緊跟() ,則會自動調用。

不能自調用聲明的函數。

通過添加括號,來說明它是一個函數表達式:

實例

(function () {
var x = "Hello!!"; // 我將調用自己
})();

嘗試一下»

以上函數實際上是一個匿名自我調用的函數 (沒有函數名)。


函數可作為一個值使用

JavaScript 函數作為一個值使用:

實例

function myFunction(a, b) {
return a * b;
}

var x = myFunction(4, 3);

嘗試一下»

JavaScript 函數可作為表達式使用:

實例

function myFunction(a, b) {
return a * b;
}

var x = myFunction(4, 3) * 2;

嘗試一下»


函數是對象

在JavaScript中使用typeof操作符判斷函數類型將返回"function" 。

但是JavaScript 函數描述為一個對象更加準確。

JavaScript函數有屬性方法

arguments.length 屬性返回函數調用過程接收到的參數個數:

實例

function myFunction(a, b) {
return arguments.length;
}

嘗試一下»

toString() 方法將函數作為一個字符串返回:

實例

function myFunction(a, b) {
return a * b;
}

var txt = myFunction.toString();

嘗試一下»

Note 函數定義作為對象的屬性,稱之為對象方法。
函數如果用於創建新的對象,稱之為對象的構造函數。