JavaScript前端開發(fā)案例教程-第4章 函數(shù)

第4章函數(shù)《JavaScript前端開發(fā)案例教程（第2版）》學(xué)習(xí)目標(biāo)/Target

熟悉函數(shù)的概念，能夠說出函數(shù)的作用

掌握函數(shù)的定義與調(diào)用，能夠根據(jù)程序需要定義函數(shù)并且完成函數(shù)的調(diào)用

掌握函數(shù)參數(shù)的設(shè)置，能夠根據(jù)程序的需要設(shè)置相關(guān)參數(shù)

掌握如何獲取函數(shù)調(diào)用時傳遞的所有實參，能夠通過arguments對象獲取實參學(xué)習(xí)目標(biāo)/Target

熟悉函數(shù)內(nèi)外變量的作用域，能夠區(qū)分全局變量和局部變量

掌握函數(shù)表達式，能夠?qū)崿F(xiàn)函數(shù)表達式的定義與調(diào)用

掌握匿名函數(shù)，能夠?qū)崿F(xiàn)匿名函數(shù)的定義與調(diào)用

掌握回調(diào)函數(shù)，能夠?qū)崿F(xiàn)回調(diào)函數(shù)的定義與調(diào)用學(xué)習(xí)目標(biāo)/Target

掌握函數(shù)嵌套與作用域鏈，能夠定義與調(diào)用嵌套函數(shù)并能夠描述作用域鏈的概念

掌握遞歸函數(shù)，能夠?qū)崿F(xiàn)遞歸函數(shù)的定義與調(diào)用

熟悉什么是閉包函數(shù)，能夠說出閉包函數(shù)的用途

掌握閉包函數(shù)，能夠?qū)崿F(xiàn)閉包函數(shù)的定義與調(diào)用章節(jié)概述/Summary在日常開發(fā)中，若程序中有多個重復(fù)的功能，例如數(shù)組排序，如果每次用到該功能時都編寫一遍該功能的邏輯代碼，非常麻煩，而且當(dāng)需要修改該功能的邏輯代碼時，需要多處修改，為此，JavaScript提供了函數(shù)。函數(shù)可以避免相同功能代碼的重復(fù)編寫，將程序中重復(fù)的代碼封裝起來，提高程序的可讀性，減少開發(fā)者的工作量，便于后期的維護。本章將針對函數(shù)的內(nèi)容進行詳細講解。目錄/Contents010203初識函數(shù)函數(shù)內(nèi)外變量的作用域函數(shù)進階目錄/Contents040506嵌套與遞歸閉包函數(shù)動手實踐：獲取指定年份的2月份的天數(shù)初識函數(shù)4.1

先定一個小目標(biāo)！熟悉函數(shù)的概念，能夠說出函數(shù)的作用4.1.1什么是函數(shù)4.1.1什么是函數(shù)函數(shù)用于封裝一段完成特定功能的代碼，相當(dāng)于將包含一條或多條語句的代碼塊“包裹”起來，用戶在使用時只需關(guān)心參數(shù)和返回值，就能完成特定的功能。函數(shù)的優(yōu)勢在于提高代碼的復(fù)用性，降低程序維護的難度。4.1.1什么是函數(shù)內(nèi)置函數(shù)內(nèi)置函數(shù)是可以直接使用的函數(shù)，例如，parseInt()函數(shù)能夠?qū)崿F(xiàn)返回解析字符串后的整數(shù)值。自定義函數(shù)自定義函數(shù)是指實現(xiàn)某個特定功能的函數(shù)。自定義函數(shù)在使用之前要定義，定義后即可調(diào)用。函數(shù)分類

先定一個小目標(biāo)！掌握函數(shù)的定義與調(diào)用，能夠根據(jù)程序需要定義函數(shù)并且完成函數(shù)的調(diào)用4.1.2函數(shù)的定義與調(diào)用4.1.2函數(shù)的定義與調(diào)用在開發(fā)一個功能復(fù)雜的模塊時，可能需要重復(fù)編寫大量代碼，這時可以使用自定義函數(shù)將重復(fù)的代碼封裝起來，在需要時直接調(diào)用即可。自定義函數(shù)的語法格式如下。function函數(shù)名([參數(shù)1,參數(shù)2,…]){函數(shù)體}4.1.2函數(shù)的定義與調(diào)用函數(shù)的定義由以下4部分組成：function：定義函數(shù)的關(guān)鍵字。函數(shù)名：可由字母、數(shù)字、下畫線和$符號組成，不能以數(shù)字開頭，不能是JavaScript中的關(guān)鍵字。參數(shù)：外界傳遞給函數(shù)的值，此時為形參，可選的，多個參數(shù)之間使用“,”分隔。函數(shù)體：由函數(shù)內(nèi)所有代碼組成的整體，專門用于實現(xiàn)特定功能。函數(shù)體內(nèi)使用return關(guān)鍵字可以返回函數(shù)的結(jié)果。4.1.2函數(shù)的定義與調(diào)用通過“函數(shù)名()”的方式即可實現(xiàn)函數(shù)的調(diào)用，小括號中可以傳入?yún)?shù)，其語法格式如下。函數(shù)名稱([參數(shù)1,參數(shù)2,…])參數(shù)表示實參，“[參數(shù)1，參數(shù)2…]”表示實參列表，實參個數(shù)可以是零個、一個或多個。通常情況下，函數(shù)的實參列表與形參列表順序?qū)?yīng)，當(dāng)函數(shù)體內(nèi)不需要參數(shù)時，調(diào)用時可以不傳參。函數(shù)定義與調(diào)用的編寫順序不分前后。Tip

先定一個小目標(biāo)！掌握函數(shù)參數(shù)的設(shè)置，能夠根據(jù)程序的需要設(shè)置相關(guān)參數(shù)4.1.3函數(shù)參數(shù)的設(shè)置4.1.3函數(shù)參數(shù)的設(shè)置函數(shù)在定義時根據(jù)參數(shù)的不同，可分為兩種類型。無參函數(shù)：定義函數(shù)時不設(shè)置參數(shù)的函數(shù)。有參函數(shù)：定義函數(shù)時設(shè)置了參數(shù)的函數(shù)。4.1.3函數(shù)參數(shù)的設(shè)置無參函數(shù)適用于不需要提供任何數(shù)據(jù)即可完成指定功能的情況，示例代碼如下。functiongreet(){console.log('Helloeverybody!');}在自定義函數(shù)時，即使函數(shù)的功能實現(xiàn)不需要設(shè)置參數(shù)，小括號“()”也不能省略。注意4.1.3函數(shù)參數(shù)的設(shè)置在項目開發(fā)中，若函數(shù)體內(nèi)的操作需要使用用戶傳遞的數(shù)據(jù)，此時函數(shù)定義時需要設(shè)置形參，用于接收用戶調(diào)用函數(shù)時傳遞的實參，示例代碼如下。functionmaxNum(a,b){a=parseInt(a);b=parseInt(b);returna>=b?a:b;}4.1.3函數(shù)參數(shù)的設(shè)置（1）含有默認值的參數(shù)在設(shè)置函數(shù)的形參時，還可以為其指定默認值。當(dāng)調(diào)用者未傳遞該參數(shù)時，函數(shù)將使用默認值進行操作，示例代碼如下。多學(xué)一招：含有默認值的參數(shù)與剩余參數(shù)functiongreet(name,say='Hi,I\'m'){console.log(say+name);}greet('LiMing');4.1.3函數(shù)參數(shù)的設(shè)置（2）剩余參數(shù)在函數(shù)定義時，除了可以指定具體數(shù)量的形參外，還可以利用“…變量名”的方式動態(tài)的接收用戶傳遞的不確定數(shù)量的實參，示例代碼如下。多學(xué)一招：含有默認值的參數(shù)與剩余參數(shù)functiontransferParam(num1,...theNums){console.log(theNums); //在控制臺輸出用戶調(diào)用函數(shù)時傳遞的剩余參數(shù)}transferParam(0,1,2,3,4);4.1.3函數(shù)參數(shù)的設(shè)置（2）剩余參數(shù)示例代碼的運行結(jié)果：多學(xué)一招：含有默認值的參數(shù)與剩余參數(shù)4.1.3函數(shù)參數(shù)的設(shè)置（2）剩余參數(shù)若定義transferParam()函數(shù)時，所有參數(shù)的數(shù)量都不確定，則可以修改成以下形式。多學(xué)一招：含有默認值的參數(shù)與剩余參數(shù)functiontransferParam(...theNums){console.log(theNums); //在控制臺輸出用戶調(diào)用函數(shù)時傳遞的參數(shù)}transferParam(1,2,3,4);

先定一個小目標(biāo)！掌握arguments對象的使用方式，能夠通過該對象獲取函數(shù)調(diào)用時傳遞的所有實參4.1.4獲取函數(shù)調(diào)用時傳遞的所有實參4.1.4獲取函數(shù)調(diào)用時傳遞的所有實參arguments對象若不能確定函數(shù)的形參個數(shù)，定義函數(shù)時可以不設(shè)置形參，在函數(shù)體中直接通過arguments對象獲取函數(shù)調(diào)用時傳遞的實參。arguments是當(dāng)前函數(shù)的一個內(nèi)置對象，所有函數(shù)都內(nèi)置了一個arguments對象，該對象保存了函數(shù)調(diào)用時傳遞的所有實參。實參的個數(shù)可通過arguments.length獲取，具體的實參值可通過數(shù)組遍歷的方式進行獲取。

先定一個小目標(biāo)！掌握求任意兩數(shù)的最大值案例的開發(fā)，能夠利用函數(shù)實現(xiàn)案例的需求4.1.5【案例】求任意兩數(shù)的最大值4.1.5【案例】求任意兩數(shù)的最大值案例需求：本案例將實現(xiàn)求任意兩數(shù)的最大值。實現(xiàn)思路：定義函數(shù)，接收兩個將要進行比較的數(shù)字。利用選擇結(jié)構(gòu)語句實現(xiàn)比較兩個數(shù)字的大小，返回最大值。函數(shù)內(nèi)外變量的作用域4.2

先定一個小目標(biāo)！熟悉函數(shù)內(nèi)外變量的作用域，能夠區(qū)分全局變量和局部變量4.2函數(shù)內(nèi)外變量的作用域4.2函數(shù)內(nèi)外變量的作用域通過前面的學(xué)習(xí)，我們知道變量需要先定義后使用，但這并不意味著，定義變量后就可以在任意位置使用該變量。在自定義函數(shù)中定義一個age變量，在函數(shù)外進行訪問輸出，示例代碼如下。functioninfo(){varage=18;}info();console.log(age);//報錯，提示UncaughtReferenceError:ageisnotdefined4.2函數(shù)內(nèi)外變量的作用域“ageisnotdefined”，表示age變量沒有被定義。之所以報錯是因為age變量只能在info()函數(shù)體內(nèi)使用。4.2函數(shù)內(nèi)外變量的作用域變量的作用范圍變量需要在被定義時的區(qū)域內(nèi)才可以使用，這個區(qū)域是變量的作用范圍，被稱為變量的作用域。JavaScript根據(jù)作用域使用范圍的不同，可以將變量劃分為以下兩種變量。全局變量：不在任何函數(shù)內(nèi)定義（顯式定義）的變量或在函數(shù)內(nèi)省略var定義（隱式定義）的變量，它的作用域稱為全局作用域，在同一個頁面文件中的所有腳本內(nèi)都可以使用。局部變量：在函數(shù)體內(nèi)利用var關(guān)鍵字聲明的變量稱為局部變量，它的作用域稱為函數(shù)作用域，僅在該函數(shù)體內(nèi)有效。函數(shù)進階4.34.3函數(shù)進階通過前面的學(xué)習(xí)，相信大家已經(jīng)掌握了函數(shù)的使用。但函數(shù)的內(nèi)容不僅僅包括函數(shù)的定義與調(diào)用、函數(shù)參數(shù)的設(shè)置和函數(shù)內(nèi)外變量的作用域等，還包括函數(shù)表達式、匿名函數(shù)以及回調(diào)函數(shù)等。

先定一個小目標(biāo)！掌握函數(shù)表達式，能夠?qū)崿F(xiàn)函數(shù)表達式的定義與調(diào)用4.3.1函數(shù)表達式4.3.1函數(shù)表達式函數(shù)表達式指的是將函數(shù)賦值給變量的表達式，通過“變量名()”的方式即可完成函數(shù)的調(diào)用，小括號“()”內(nèi)可以傳入?yún)?shù)，示例代碼如下。varfn=functionsum(num1,num2){ //定義求和函數(shù)表達式

returnnum1+num2;};fn(2,3);

//調(diào)用函數(shù)4.3.1函數(shù)表達式函數(shù)表達式與函數(shù)的區(qū)別函數(shù)表達式的定義必須在調(diào)用前，且函數(shù)調(diào)用時采用的是“變量名()”的方式。函數(shù)定義的方式不限制定義與調(diào)用的順序。函數(shù)表達式中的函數(shù)名如果不需要可以省略。

先定一個小目標(biāo)！掌握匿名函數(shù)，能夠?qū)崿F(xiàn)匿名函數(shù)的定義與調(diào)用4.3.2匿名函數(shù)4.3.2匿名函數(shù)團隊合作完成項目時，程序員經(jīng)常定義一些函數(shù)來實現(xiàn)特定的功能，在給這些函數(shù)命名時經(jīng)常會遇到與其他人取相同名字的情況，如何來解決命名沖突問題呢？4.3.2匿名函數(shù)使用JavaScript中的匿名函數(shù)可以有效避免函數(shù)名的沖突問題。所謂匿名函數(shù)指的是沒有名字的函數(shù)，也就是在定義函數(shù)時省略函數(shù)名。4.3.2匿名函數(shù)匿名函數(shù)的實現(xiàn)方式匿名函數(shù)可以通過函數(shù)定義的方式實現(xiàn)調(diào)用，下面介紹匿名函數(shù)的3個使用場景。函數(shù)表達式中省略函數(shù)名匿名函數(shù)自調(diào)用處理事件4.3.2匿名函數(shù)1.函數(shù)表達式中省略函數(shù)名利用函數(shù)表達式實現(xiàn)匿名函數(shù)，調(diào)用時使用“變量名()”，示例代碼如下。varfn=function(num1,num2){returnnum1+num2;};通常情況下，如果函數(shù)的返回值需要使用變量來接收時，可以使用函數(shù)表達式來實現(xiàn)匿名函數(shù)的調(diào)用，并且可以通過“變量名()”的方式調(diào)用多次。4.3.2匿名函數(shù)2.匿名函數(shù)自調(diào)用使用小括號“()”直接包裹匿名函數(shù)，示例代碼如下。(function(num1,num2){console.log(num1+num2);})(2,3);匿名函數(shù)后小括號“()”表示給匿名函數(shù)傳遞參數(shù)并立即執(zhí)行，完成函數(shù)的自調(diào)用。自調(diào)用只能調(diào)用一次。4.3.2匿名函數(shù)3.處理事件使用匿名函數(shù)處理單擊事件，示例代碼如下。document.body.onclick=function(){alert('Hi,everybody!');};4.3.2匿名函數(shù)箭頭函數(shù)是ES6中新增的函數(shù)，它用于簡化函數(shù)定義的語法，其語法格式如下。多學(xué)一招：箭頭函數(shù)()=>{};箭頭函數(shù)的小括號中可以傳入?yún)?shù)，調(diào)用箭頭函數(shù)時可以將箭頭函數(shù)賦給一個變量，然后通過變量名實現(xiàn)箭頭函數(shù)的調(diào)用。4.3.2匿名函數(shù)箭頭函數(shù)的示例代碼如下。多學(xué)一招：箭頭函數(shù)varfn=(num1,num2)=>{returnnum1+num2;};4.3.2匿名函數(shù)箭頭函數(shù)存在以下兩種特殊情況：（1）省略大括號和return關(guān)鍵字（2）省略參數(shù)外部小括號多學(xué)一招：箭頭函數(shù)4.3.2匿名函數(shù)（1）省略大括號和return關(guān)鍵字在箭頭函數(shù)中，當(dāng)函數(shù)體只有一句代碼，且代碼的執(zhí)行結(jié)果就是函數(shù)的返回值時，可以省略函數(shù)體的大括號以及return關(guān)鍵字。多學(xué)一招：箭頭函數(shù)varfn=(num1,num2)=>num1+num2;4.3.2匿名函數(shù)（2）省略參數(shù)外部小括號在箭頭函數(shù)中，當(dāng)參數(shù)只有1個時，可以省略參數(shù)外部的小括號。多學(xué)一招：箭頭函數(shù)varfn=name=>{console.log(name);};

先定一個小目標(biāo)！掌握回調(diào)函數(shù)，能夠?qū)崿F(xiàn)回調(diào)函數(shù)的定義與調(diào)用4.3.3回調(diào)函數(shù)4.3.3回調(diào)函數(shù)什么是回調(diào)函數(shù)項目開發(fā)中，若想要函數(shù)體中某部分功能由調(diào)用者決定，則可以使用回調(diào)函數(shù)。回調(diào)函數(shù)是由開發(fā)者預(yù)先定義好的一個函數(shù)，通常會作為參數(shù)傳遞給被調(diào)用的函數(shù)。當(dāng)被調(diào)用的函數(shù)執(zhí)行時，會在特定的時機調(diào)用開發(fā)者傳入的回調(diào)函數(shù)。嵌套與遞歸4.4

先定一個小目標(biāo)！掌握函數(shù)嵌套與作用域鏈，能夠?qū)崿F(xiàn)嵌套函數(shù)的定義與調(diào)用并且能夠描述出什么是作用域鏈4.4.1函數(shù)嵌套與作用域鏈4.4.1函數(shù)嵌套與作用域鏈在開發(fā)項目時，一個復(fù)雜的功能往往需要定義多個函數(shù)來完成，對于其中一個函數(shù)而言，它可能依賴另外一些函數(shù)才能運行。但是，如果我們希望這些依賴的函數(shù)只能在本函數(shù)內(nèi)部訪問，其他函數(shù)不能訪問，這時候可以把這些依賴的函數(shù)定義在本函數(shù)內(nèi)部，這樣在一個函數(shù)內(nèi)部定義了其他函數(shù)就形成了嵌套函數(shù)。4.4.1函數(shù)嵌套與作用域鏈?zhǔn)裁词亲饔糜蜴湆τ谇短缀瘮?shù)而言，內(nèi)層函數(shù)只能在外層函數(shù)作用域內(nèi)執(zhí)行，在內(nèi)層函數(shù)執(zhí)行的過程中，若需要引入某個變量，首先會在當(dāng)前作用域中尋找，若未找到，則繼續(xù)向上一層級的作用域中尋找，直到全局作用域，我們將這種鏈?zhǔn)降牟樵冴P(guān)系稱為作用域鏈。

先定一個小目標(biāo)！掌握遞歸函數(shù)，能夠?qū)崿F(xiàn)遞歸函數(shù)的定義與調(diào)用4.4.2遞歸調(diào)用4.4.2遞歸調(diào)用遞歸調(diào)用是函數(shù)嵌套調(diào)用中一種特殊的調(diào)用，它指的是一個函數(shù)在其函數(shù)體內(nèi)調(diào)用自身的過程，這種函數(shù)稱為遞歸函數(shù)。遞歸調(diào)用可以利用簡單的代碼實現(xiàn)復(fù)雜的計算。

先定一個小目標(biāo)！掌握如何利用遞歸實現(xiàn)求斐波那契數(shù)列第N項的值，能夠獨立完成案例代碼編寫4.4.3【案例】求斐波那契數(shù)列第N項的值案例說明斐波那契數(shù)列又稱黃金分割數(shù)列，指的是“1,1,2,3,5,8,13,21……”這樣一個數(shù)列，從中可以找出的規(guī)律是“這個數(shù)列從第3項開始，每一項都等于前兩項之和”。本案例將利用遞歸實現(xiàn)計算斐波那契數(shù)列第N項的值。4.4.3【案例】求斐波那契數(shù)列第N項的值4.4.3【案例】求斐波那契數(shù)列第N項的值案例的實現(xiàn)思路：如果N小于0則提示輸入的數(shù)字不能小于0。如果N等于0返回第0項的值為0。如果N等于1返回第1項的值為1。如果N大于1則進行遞歸調(diào)用，實現(xiàn)前兩項值相加。閉包函數(shù)4.5

先定一個小目標(biāo)！熟悉閉包函數(shù)的概念，能夠說出閉包函數(shù)的用途4.5.1什么是閉包函數(shù)4.5.1什么是閉包函數(shù)在JavaScript中，內(nèi)層函數(shù)可以訪問定義在外層函數(shù)中的所有變量和函數(shù)，并包括其外層函數(shù)能訪問的所有變量和函數(shù)。但是在函數(shù)外部則不能訪問函數(shù)的內(nèi)部變量和嵌套函數(shù)。在項目開發(fā)中，當(dāng)我們需要在函數(shù)外部訪問函數(shù)內(nèi)部變量和嵌套函數(shù)時可以利用閉包函數(shù)來訪問。4.5.1什么是閉包函數(shù)所謂閉包函數(shù)，指的就是有權(quán)訪問另一函數(shù)作用域內(nèi)變量（局部變量）的函數(shù)，它主要的用途是以下兩點：在函數(shù)外部讀取函數(shù)內(nèi)部的變量。讓變量的值始終保