<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • js函數定義的三種方式(js函數定義與調用)


    深入理解:全面掌握JavaScript 函數定義方式

    1.函數的定義

    通俗的來講,函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼快。它是 JavaScript 語言一個即重要又復雜的組成部分,任何一個 JavaScript 框架,如 Dojo、jQuery 等都是有成百上千個函數組成的。函數的使用不僅提高了代碼本身的可讀性,也為它的擴展提供了可能,同時還降低了維護成本,加快 web 項目的開放進度;尤其是在多人參與的敏捷開發中。

    通常函數的定義是通過 function 語句實現的:

    清單 1.函數定義

    深入理解:全面掌握JavaScript 函數定義方式

    funcname 是要定義的函數名,是一個標識符,而不是字符串或者表達式;緊跟函數名后面的是用括號括起來的參數列表,參數之間用逗號隔開;最后,也是這個函數的核心部分:函數體,它是由一行或者多行代碼組成并且是用大括號括起來的。

    函數定義描述的是一個靜態的程序結構,當 JavaScript 解析器遇到一個函數定義時,它就被解析并存儲構成函數體的語句,然后定義一個和該函數名同名的全局或者某個對象屬性來保存。當該函數被調用時,里面的函數體才真正的被執行。如:

    清單 2

    深入理解:全面掌握JavaScript 函數定義方式

    2. Function()構造函數

    定義一個函數,最為普遍的是直接使用 function 關鍵字來定義,又稱函數聲明式(function declaration),如上面定義的 f 函數,但是 function 語句并非是定義函數的惟一方法。在 ECMAScript v1 和 JavaScript v1.1 中,還可以使用 Function () 構造函數和 new 運算符動態地定義函數,如下:

    var myfunc = new Function (‘x’, ‘y’, ‘alert(x+y)’);

    這行代碼創建了一個新函數,該函數和下面使用 function 方法定義的函數是等價的:

    清單 3.

    深入理解:全面掌握JavaScript 函數定義方式

    Function () 定義中,前面兩個是參數,參數可以是任意多個字符串;第三個是函數體,可以包含任何 JavaScript 語句,語句之間用分號隔開。如果沒有參數,傳一個函數體即可。由于傳遞給 Function () 函數中,沒有一個字符串是用來聲明函數名的,所以它是一個匿名函數。

    使用 Function()構造函數來定義函數允許我們動態的來定義和編譯一個函數,而不是限定在 function 預編譯的函數體中。但同時也會帶來負面影響,因為每次調用這個函數都要對它進行編譯,對性能有一定的影響,尤其是在循環體中。

    3. 函數直接量

    函數定義的第三種方式是函數直接量,ECMAScript v3 定義了函數直接量,JavaScript 1.2 實現了它。函數直接量是一個表達式,它即可以定義一個匿名函數,也可以定義一個帶函數名的函數:

    清單 4.

    深入理解:全面掌握JavaScript 函數定義方式

    注意:調用時得用定義的變量名,如f(4),而不能fact(4).

    函數直接量和使用 Function()構造函數來創建函數的方法非常相似,因為兩種方法都是通過 JavaScript 的表達式創建的,而不是由語句創建的;所以使用他們的方式也更靈活,尤其是那些只使用一次,而且不需要命名的函數。比如把它傳遞給其他的函數:

    清單 5.

    深入理解:全面掌握JavaScript 函數定義方式

    4.區別

    三種方式的區別,可以從作用域、效率以及加載順序來區分。首先,從作用域上來說,函數聲明式和函數直接量使用的是局部變量,而 Function()構造函數卻是全局變量:

    清單 6.

    深入理解:全面掌握JavaScript 函數定義方式

    其次是執行效率上來說,Function()構造函數的效率要低于其他兩種方式,尤其是在循環體中,因為構造函數每執行一次都要重新編譯,并且生成新的函數對象:

    清單 7.

    深入理解:全面掌握JavaScript 函數定義方式

    由此可見,在循環體中,函數直接量的執行效率是 Function()構造函數的 0.6 倍。所以在 Web 開發中,為了加快網頁加載速度,提高用戶體驗,我們不建議選擇 Function ()構造函數方式來定義函數。

    最后是加載順序,function 方式(即函數聲明式)是在 JavaScript 編譯的時候就加載到作用域中,而其他兩種方式則是在代碼執行的時候加載,如果在定義之前調用它,則會返回 undefined:

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费