JavaScript 函數

編程語言 JavaScript 腳本語言 HTML Web愛好者 2017-06-09

JavaScript 函數定義

JavaScript 使用關鍵字 function 定義函數

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

函數聲明

函數聲明的語法 :

JavaScript 函數

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

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

函數表達式,又叫函數字面量

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

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

JavaScript 函數

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

兩者的區別:解析器會先讀取函數聲明,並使其在執行任何代碼之前可以訪問;而函數表達式則必須等到解析器執行到它所在的代碼行才會真正被解釋執行。

JavaScript 函數

以上函數實際上是一個 匿名函數 (函數沒有名稱)。函數存儲在變量中,不需要函數名稱,通常通過變量名來調用。上述函數以分號結尾,因為它是一個執行語句。

函數的幾種寫法

1 常見寫法:

JavaScript 函數

2 匿名函數

JavaScript 函數

3 自調用函數:

JavaScript 函數

4 函數嵌套

JavaScript 函數

5 函數繼承和構造函數

JavaScript 函數

Function() 構造函數

在以上實例中,我們瞭解到函數通過關鍵字 function 定義。函數同樣可以通過內置的 JavaScript 函數構造器(Function())定義

JavaScript 函數

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

JavaScript 函數

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

函數提升(Hoisting)

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

提升(Hoisting)應用在變量的聲明與函數的聲明,因此,函數可以在聲明之前調用:

JavaScript 函數

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

JavaScript 函數

以上代碼運行即會報錯,原因在於函數位於一個初始化語句中,而不是一個函數聲明。換句話講,在執行到函數所在的語句之前,變量myFunction中不會保存有對函數的引用;而且,由於第一行代碼就會導致“unexpected identifier”(意外標識符)錯誤,實際上也不會執行到下一行。

除了聲明時候可以通過變量訪問函數這一點區別之外,函數聲明與函數表達式的語法其實是等價的。

自調用函數

函數表達式可以 "自調用"。自調用表達式會自動調用。如果表達式後面緊跟 () ,則會自動調用。不能自調用聲明的函數。通過添加括號,來說明它是一個函數表達式:

JavaScript 函數

以上函數實際上是一個 匿名自我調用的函數

自調用函數可用來傳參帶返回值

JavaScript 函數

自執行函數嚴格來說也叫函數表達式,它主要用於創建一個新的作用域,在此作用域內聲明的變量,不會和其它作用域內的變量衝突或混淆,大多是以匿名函數方式存在,且立即自動執行。

JavaScript函數可作為一個值使用

JavaScript 函數

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

JavaScript 函數

函數是對象

在 JavaScript 中使用 typeof 操作符判斷函數類型將返回 "function" ,但JavaScript 函數描述為一個對象更加準確。

JavaScript 函數有屬性和方法。

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

JavaScript 函數

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

函數定義作為對象的屬性,稱之為對象方法。

函數如果用於創建新的對象,稱之為對象的構造函數

JavaScript 函數參數

JavaScript 函數對參數的值(arguments)沒有進行任何的檢查

函數顯式參數與隱藏參數(arguments)

函數顯式參數在函數定義時列出

JavaScript 函數

函數隱藏參數(arguments)在函數調用時傳遞給函數真正的值

參數規則

JavaScript 函數定義時參數沒有指定數據類型,對隱藏參數(arguments)沒有進行檢測,對隱藏參數(arguments)的個數沒有進行檢測

默認參數

如果函數在調用時缺少參數,參數會默認設置為: undefined

有時這是可以接受的,但是建議最好為參數設置一個默認值:

JavaScript 函數

或者,更簡單的方式:

JavaScript 函數

如果y已經定義, y || 返回y, 因為y是 true, 否則返回 0, 因為undefined為 false

如果函數調用時設置了過多的參數,參數將無法被引用,因為無法找到對應的參數名。 只能使用 arguments 對象來調用

Arguments 對象

JavaScript 函數有個內置的對象 arguments 對象。arguments 對象包含了函數調用的參數數組。通過這種方式你可以很方便的找到每個參數的值:

JavaScript 函數

或者創建一個函數用來統計所有數值的和:

JavaScript 函數

通過值傳遞參數

在函數中調用的參數是函數的參數。

如果函數修改參數的值,將不會修改參數的初始值(在函數外定義)。

JavaScript 函數

通過對象傳遞參數

在JavaScript中可以引用對象的值,因此我們在函數內部修改對象的屬性就會修改其初始的值。

修改對象屬性可作用於函數外部(全局變量)。

JavaScript 函數

JavaScript 函數調用

JavaScript 函數有 4 種調用方式。每種方式的不同方式在於 this 的初始化

this 關鍵字

一般而言,在Javascript中,this指向函數執行時的當前對象

注意 this 是保留關鍵字,你不能修改 this 的值

調用 JavaScript 函數

函數中的代碼在函數被調用後執行

作為一個函數調用

JavaScript 函數

以上函數不屬於任何對象。但是在 JavaScript 中它始終是默認的全局對象。

在 HTML 中默認的全局對象是 HTML 頁面本身,所以函數是屬於 HTML 頁面。

在瀏覽器中的頁面對象是瀏覽器窗口(window 對象)。以上函數會自動變為 window 對象的函數

myFunction() 和 window.myFunction() 是一樣的:

JavaScript 函數

這是調用 JavaScript 函數常用的方法, 但不是良好的編程習慣。全局變量,方法或函數容易造成命名衝突的bug

全局對象

當函數沒有被自身的對象調用時, this 的值就會變成全局對象。

在 web 瀏覽器中全局對象是瀏覽器窗口(window 對象)。

該實例返回 this 的值是 window 對象:

JavaScript 函數

函數作為全局對象調用,會使 this 的值成為全局對象。使用 window 對象作為一個變量容易造成程序崩潰

函數作為方法調用

在 JavaScript 中你可以將函數定義為對象的方法。

以下實例創建了一個對象 (myObject), 對象有兩個屬性 (firstName 和 lastName), 及一個方法 (fullName):

JavaScript 函數

ullName 方法是一個函數。函數屬於對象。 myObject 是函數的所有者。

this對象,擁有 JavaScript 代碼。實例中 this 的值為 myObject 對象。

測試以下!修改 fullName 方法並返回 this 值:

JavaScript 函數

函數作為對象方法調用,會使得 this 的值成為對象myObject本身

使用構造函數調用函數,參數必須加引號

如果函數調用前使用了 new 關鍵字, 則是調用了構造函數。這看起來就像創建了新的函數,但實際上 JavaScript 函數是重新創建的對象:

JavaScript 函數

構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法

構造函數中 this 關鍵字沒有任何的值。this 的值在函數調用時實例化對象(new object)時創建。

作為函數方法調用函數

在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。call() 和 apply() 是預定義的函數方法。 兩個方法可用於調用函數,兩個方法的第一個參數必須是對象本身。

JavaScript 函數

兩個方法都使用了對象本身作為第一個參數。 兩者的區別在於第二個參數: apply傳入的是一個參數數組,也就是將多個參數組合成為一個數組傳入,而call則作為call的參數傳入(從第二個參數開始)。call和apply的第一個參數就是this指針要指向的對象

在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為 this 的值, 即使該參數不是一個對象。

在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。

通過 call() 或 apply() 方法你可以設置 this 的值, 且作為已存在對象的新方法調用

JavaScript 閉包

JavaScript 變量可以是局部變量或全局變量

私有變量可以用到閉包

局部變量和全局變量

函數可以訪問函數內部定義的變量

JavaScript 函數

函數也可以訪問函數外部定義的變量

JavaScript 函數

後面一個實例中, a 是一個全局變量。在web頁面中全局變量屬於 window 對象。全局變量可應用於頁面上的所有腳本。

在第一個實例中, a是一個局部變量。局部變量只能用於定義它函數內部。對於其他的函數或腳本代碼是不可用的。全局和局部變量即便名稱相同,它們也是兩個不同的變量。修改其中一個,不會影響另一個的值。

變量聲明是如果不使用 var 關鍵字,那麼它就是一個全局變量,即便它在函數內定義

變量生命週期

全局變量的作用域是全局性的,即在整個JavaScript程序中,全局變量處處都在。而在函數內部聲明的變量,只在函數內部起作用。這些變量是局部變量,作用域是局部性的;函數的參數也是局部性的,只在函數內部起作用。

計數器困境

設想下如果你想統計一些數值,且該計數器在所有函數中都是可用的。你可以使用全局變量,函數設置計數器遞增:

JavaScript 函數

計數器數值在執行 add() 函數時發生變化。但問題來了,頁面上的任何腳本都能改變計數器,即便沒有調用 add() 函數。如果我在函數內聲明計數器,如果沒有調用函數將無法修改計數器的值:

JavaScript 函數

以上代碼將無法正確輸出,每次我調用 add() 函數,計數器都會設置為 1。JavaScript 內嵌函數可以解決該問題

JavaScript 內嵌函數

所有函數都能訪問全局變量。 實際上,在 JavaScript 中,所有函數都能訪問它們上一層的作用域。JavaScript 支持嵌套函數。嵌套函數可以訪問上一層的函數變量。

該實例中,內嵌函數 plus() 可以訪問父函數的 counter 變量:

JavaScript 函數

如果我們能在外部訪問 plus() 函數,這樣就能解決計數器的困境。我們同樣需要確保 counter = 0 只執行一次。我們需要閉包。

JavaScript 閉包

JavaScript 函數

變量 add 指定了函數自我調用的返回字值。自我調用函數只執行一次。設置計數器為 0。並返回函數表達式。add變量可以作為一個函數使用。非常棒的部分是它可以訪問函數上一層作用域的計數器。這個叫作 JavaScript 閉包。它使得函數擁有私有變量變成可能。計數器受匿名函數的作用域保護,只能通過 add 方法修改。

閉包是可訪問上一層函數作用域裡變量的函數,即便上一層函數已經關閉

歡迎加油QQ群461593224 web前端 學習交流

相關推薦

推薦中...