課堂javascript基礎(chǔ)四天

JavaScript基礎(chǔ)第四天函數(shù)掌握函數(shù)的基本使用，讓代碼具備復(fù)用能力理解封裝的意義，能夠具備封裝函數(shù)的能力函數(shù)綜合案例函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)01抽取-封裝

99乘法表，頁(yè)面需要打印多個(gè)怎么辦？體驗(yàn)函數(shù)的魅力代碼復(fù)用1.1為什么需要函數(shù)目標(biāo)：能說(shuō)出為什么需要函數(shù)函數(shù)：function，是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊說(shuō)明：函數(shù)可以把具有相同或相似邏輯的代碼“包裹”起來(lái)，通過(guò)函數(shù)調(diào)用執(zhí)行這些被“包裹”的代碼邏輯，這么做的優(yōu)勢(shì)是有利于精簡(jiǎn)代碼方便復(fù)用。比如我們前面使用的alert()、prompt()和console.log()都是一些js函數(shù)，只不過(guò)已經(jīng)封裝好了，我們直接使用的。一段播放《我的滑板鞋》的代碼為什么需要函數(shù)？可以實(shí)現(xiàn)代碼復(fù)用，提高開(kāi)發(fā)效率函數(shù)是什么？function執(zhí)行特定任務(wù)的代碼塊函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)011.2函數(shù)使用目標(biāo)：掌握函數(shù)語(yǔ)法，把代碼封裝起來(lái)函數(shù)的聲明語(yǔ)法

例1.2函數(shù)使用

函數(shù)名命名規(guī)范和變量命名基本一致盡量小駝峰式命名法前綴應(yīng)該為動(dòng)詞命名建議：常用動(dòng)詞約定1.2函數(shù)使用函數(shù)的調(diào)用語(yǔ)法注意：聲明（定義）的函數(shù)必須調(diào)用才會(huì)真正被執(zhí)行，使用()調(diào)用函數(shù)

例我們?cè)?jīng)使用的alert(),parseInt()這種名字后面跟小括號(hào)的本質(zhì)都是函數(shù)的調(diào)用1.2函數(shù)使用函數(shù)體函數(shù)體是函數(shù)的構(gòu)成部分，它負(fù)責(zé)將相同或相似代碼“包裹”起來(lái)，直到函數(shù)調(diào)用時(shí)函數(shù)體內(nèi)的代碼才會(huì)被執(zhí)行。函數(shù)的功能代碼都要寫(xiě)在函數(shù)體當(dāng)中。函數(shù)體函數(shù)是用那個(gè)關(guān)鍵字聲明的？function函數(shù)不調(diào)用會(huì)執(zhí)行嗎？如何調(diào)用函數(shù)？函數(shù)不調(diào)用自己不執(zhí)行調(diào)用方式:函數(shù)名()函數(shù)的復(fù)用代碼和循環(huán)重復(fù)代碼有什么不同？循環(huán)代碼寫(xiě)完即執(zhí)行，不能很方便控制執(zhí)行位置隨時(shí)調(diào)用，隨時(shí)執(zhí)行，可重復(fù)調(diào)用函數(shù)課堂練習(xí)需求：寫(xiě)一個(gè)打招呼的函數(shù)hi~把99乘法表封裝到函數(shù)里面，重復(fù)調(diào)用3次函數(shù)案例需求：

1.封裝一個(gè)函數(shù)，計(jì)算兩個(gè)數(shù)的和

2.封裝一個(gè)函數(shù)，計(jì)算1-100之間所有數(shù)的和靈魂拷問(wèn)：這些函數(shù)有什么缺陷？函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)011.3函數(shù)傳參思考：這樣的函數(shù)只能求10+20，這個(gè)函數(shù)功能局限非常大解決辦法：把要計(jì)算的數(shù)字傳到函數(shù)內(nèi)結(jié)論：若函數(shù)完成功能需要調(diào)用者傳入數(shù)據(jù)，那么就需要用有參數(shù)的函數(shù)這樣可以極大提高函數(shù)的靈活性用戶(hù)決定放什么原料1.3函數(shù)傳參聲明語(yǔ)法

例單個(gè)參數(shù)多個(gè)參數(shù)參數(shù)列表傳入數(shù)據(jù)列表聲明這個(gè)函數(shù)需要傳入幾個(gè)數(shù)據(jù)多個(gè)數(shù)據(jù)用逗號(hào)隔開(kāi)1.3函數(shù)傳參調(diào)用語(yǔ)法

例調(diào)用函數(shù)時(shí)，需要傳入幾個(gè)數(shù)據(jù)就寫(xiě)幾個(gè)，用逗號(hào)隔開(kāi)1.3函數(shù)傳參形參：聲明函數(shù)時(shí)寫(xiě)在函數(shù)名右邊小括號(hào)里的叫形參（形式上的參數(shù)）實(shí)參：調(diào)用函數(shù)時(shí)寫(xiě)在函數(shù)名右邊小括號(hào)里的叫實(shí)參（實(shí)際上的參數(shù)）形參可以理解為是在這個(gè)函數(shù)內(nèi)聲明的變量（比如num1=10）實(shí)參可以理解為是給這個(gè)變量賦值開(kāi)發(fā)中盡量保持形參和實(shí)參個(gè)數(shù)一致我們?cè)?jīng)使用過(guò)的alert('打印'),parseInt('11'),Number('11')本質(zhì)上都是函數(shù)調(diào)用的傳參形參形參實(shí)參實(shí)參函數(shù)傳遞參數(shù)的好處是？可以極大的提高了函數(shù)的靈活性函數(shù)參數(shù)可以分為那兩類(lèi)？怎么判斷他們是那種參數(shù)？函數(shù)可以分為形參和實(shí)參函數(shù)聲明時(shí)，小括號(hào)里面的是形參，形式上的參數(shù)函數(shù)調(diào)用時(shí)，小括號(hào)里面的是實(shí)參，實(shí)際的參數(shù)盡量保持形參和實(shí)參的個(gè)數(shù)一致參數(shù)中間用什么符號(hào)隔開(kāi)？逗號(hào)函數(shù)封裝求和需求：采取函數(shù)封裝的形式：輸入2個(gè)數(shù)，計(jì)算兩者的和，打印到頁(yè)面中1.3函數(shù)傳參-參數(shù)默認(rèn)值形參：可以看做變量，但是如果一個(gè)變量不給值，默認(rèn)是什么？undefined但是如果做用戶(hù)不輸入實(shí)參，剛才的案例，則出現(xiàn)undefined+undefined結(jié)果是什么？NaN我們可以改進(jìn)下，用戶(hù)不輸入實(shí)參，可以給形參默認(rèn)值，可以默認(rèn)為0,這樣程序更嚴(yán)謹(jǐn)，可以如下操作：說(shuō)明：這個(gè)默認(rèn)值只會(huì)在缺少實(shí)參參數(shù)傳遞時(shí)才會(huì)被執(zhí)行，所以有參數(shù)會(huì)優(yōu)先執(zhí)行傳遞過(guò)來(lái)的實(shí)參,否則默認(rèn)為undefined函數(shù)封裝-求學(xué)生總分需求：學(xué)生的分?jǐn)?shù)是一個(gè)數(shù)組,計(jì)算每個(gè)學(xué)生的總分分析：①：封裝一個(gè)求和函數(shù)②：傳遞過(guò)去的參數(shù)是一個(gè)數(shù)組③：函數(shù)內(nèi)部遍歷數(shù)組求和函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)011.4函數(shù)返回值提問(wèn)：什么是函數(shù)？函數(shù)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊缺點(diǎn)：把計(jì)算后的結(jié)果處理方式寫(xiě)死了，內(nèi)部處理了解決：把處理結(jié)果返回給調(diào)用者有返回值函數(shù)的概念：當(dāng)調(diào)用某個(gè)函數(shù)，這個(gè)函數(shù)會(huì)返回一個(gè)結(jié)果出來(lái)這就是有返回值的函數(shù)提問(wèn)：執(zhí)行完特定任務(wù)之后，然后呢？把任務(wù)的結(jié)果給我們廚子點(diǎn)餐人1.4函數(shù)返回值其實(shí)我們前面已經(jīng)接觸了很多的函數(shù)具備返回值：只是這些函數(shù)是JS底層內(nèi)置的.我們直接就可以使用當(dāng)然有些函數(shù)，則沒(méi)有返回值所以要根據(jù)需求，來(lái)設(shè)定需不需要返回值函數(shù)很多情況下需要返回值1.4函數(shù)返回值當(dāng)函數(shù)需要返回?cái)?shù)據(jù)出去時(shí)，用return關(guān)鍵字語(yǔ)法怎么使用呢？三.有返回值的函數(shù)細(xì)節(jié)：在函數(shù)體中使用return關(guān)鍵字能將內(nèi)部的執(zhí)行結(jié)果交給函數(shù)外部使用return后面代碼不會(huì)再被執(zhí)行，會(huì)立即結(jié)束當(dāng)前函數(shù)，所以return后面的數(shù)據(jù)不要換行寫(xiě)return函數(shù)可以沒(méi)有return，這種情況函數(shù)默認(rèn)返回值為undefined為什么要讓函數(shù)有返回值函數(shù)執(zhí)行后得到結(jié)果，結(jié)果是調(diào)用者想要拿到的（一句話(huà)，函數(shù)內(nèi)部不需要輸出結(jié)果，而是返回結(jié)果）對(duì)執(zhí)行結(jié)果的擴(kuò)展性更高,可以讓其他的程序使用這個(gè)結(jié)果函數(shù)有返回值用那個(gè)關(guān)鍵字？有什么注意事項(xiàng)呢？語(yǔ)法：return數(shù)據(jù)return后面不接數(shù)據(jù)或者函數(shù)內(nèi)不寫(xiě)return，函數(shù)的返回值是undefinedreturn能立即結(jié)束當(dāng)前函數(shù),所以return后面的數(shù)據(jù)不要換行寫(xiě)函數(shù)返回值練習(xí)1.求任意2個(gè)數(shù)中的最大值,并返回1.求任意數(shù)組中的最大值并返回這個(gè)最大值2.求任意數(shù)組中的最小值并返回這個(gè)最小值斷點(diǎn)調(diào)試：進(jìn)入函數(shù)內(nèi)部看執(zhí)行過(guò)程F11思考:如何返回多個(gè)數(shù)據(jù)?1.4函數(shù)細(xì)節(jié)補(bǔ)充兩個(gè)相同的函數(shù)后面的會(huì)覆蓋前面的函數(shù)在Javascript中實(shí)參的個(gè)數(shù)和形參的個(gè)數(shù)可以不一致如果形參過(guò)多會(huì)自動(dòng)填上undefined(了解即可)如果實(shí)參過(guò)多那么多余的實(shí)參會(huì)被忽略(函數(shù)內(nèi)部有一個(gè)arguments,里面裝著所有的實(shí)參)函數(shù)一旦碰到return就不會(huì)在往下執(zhí)行了函數(shù)的結(jié)束用return

思考:break的結(jié)束和return結(jié)束有什么區(qū)別?函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)01思考1.5作用域通常來(lái)說(shuō)，一段程序代碼中所用到的名字并不總是有效和可用的，而限定這個(gè)名字的可用性的代碼范圍就是這個(gè)名字的作用域。作用域的使用提高了程序邏輯的局部性，增強(qiáng)了程序的可靠性，減少了名字沖突。全局作用域局部作用域全局有效局部有效作用于所有代碼執(zhí)行的環(huán)境(整個(gè)script標(biāo)簽內(nèi)部)或者一個(gè)獨(dú)立的js文件作用于函數(shù)內(nèi)的代碼環(huán)境，就是局部作用域。因?yàn)楦瘮?shù)有關(guān)系，所以也稱(chēng)為函數(shù)作用域。1.5作用域在JavaScript中，根據(jù)作用域的不同，變量可以分為：全局變量局部變量函數(shù)外部let的變量函數(shù)內(nèi)部let的變量全局變量在任何區(qū)域都可以訪問(wèn)和修改局部變量只能在當(dāng)前函數(shù)內(nèi)部訪問(wèn)和修改1.5作用域變量有一個(gè)坑，

特殊情況：如果函數(shù)內(nèi)部，變量沒(méi)有聲明，直接賦值，也當(dāng)全局變量看，但是強(qiáng)烈不推薦但是有一種情況，函數(shù)內(nèi)部的形參可以看做是局部變量。JS中作用域分為哪2種？全局作用域。函數(shù)外部或者整個(gè)script有效局部作用域。也稱(chēng)為函數(shù)作用域，函數(shù)內(nèi)部有效根據(jù)作用域不同，變量分為哪2種？全局變量局部變量有一種特殊情況是全局變量是那種？我們提倡嗎？局部變量或者塊級(jí)變量沒(méi)有l(wèi)et聲明直接賦值的當(dāng)全局變量看我們強(qiáng)烈不提倡

還有一種特殊情況，函數(shù)內(nèi)部的形參可以當(dāng)做局部變量看在不同作用域下，可能存在變量命名沖突的情況，到底改執(zhí)行誰(shuí)呢？只要是代碼，就至少有一個(gè)作用域?qū)懺诤瘮?shù)內(nèi)部的局部作用域如果函數(shù)中還有函數(shù)，那么在這個(gè)作用域中就又可以誕生一個(gè)作用域訪問(wèn)原則：在能夠訪問(wèn)到的情況下先局部，局部沒(méi)有在找全局變量的訪問(wèn)原則1.5作用域3.變量訪問(wèn)原則案例1：結(jié)果是幾？functionf1(){

letnum=123functionf2(){console.log(num)}f2()}letnum=456f1()1.5作用域3.變量訪問(wèn)原則案例1：結(jié)果是幾？function

f1()

{

let

num

=

123

function

f2()

{

let

num

=

0

console.log(num)

}

f2()

}let

num

=

456f1()作用域鏈：采取就近原則的方式來(lái)查找變量最終的值3.變量訪問(wèn)原則案例3：結(jié)果是幾？leta=1functionfn1(){

leta=2

letb='22'fn2()functionfn2(){

leta=3fn3()functionfn3(){

leta=4console.log(a)//a的值?console.log(b)//b的值?}}}fn1()變量訪問(wèn)原則是什么？采取就近原則的方式來(lái)查找變量最終的值函數(shù)為什么需要函數(shù)函數(shù)使用函數(shù)傳參函數(shù)返回值作用域匿名函數(shù)011.6匿名函數(shù)目標(biāo)：了解匿名函數(shù)的使用方式函數(shù)可以分為：具名函數(shù)匿名函數(shù)聲明：functionfn(){}調(diào)用：fn()function(){}1.6匿名函數(shù)匿名函數(shù)沒(méi)有名字的函數(shù),無(wú)法直接使用。使用方式：函數(shù)表達(dá)式立即執(zhí)行函數(shù)1.6匿名函數(shù)1.函數(shù)表達(dá)式將匿名函數(shù)賦值給一個(gè)變量，并且通過(guò)變量名稱(chēng)進(jìn)行調(diào)用我們將這個(gè)稱(chēng)為函數(shù)表達(dá)式語(yǔ)法：調(diào)用：其中函數(shù)的形參和實(shí)參使用跟具名函數(shù)一致。1.6匿名函數(shù)使用場(chǎng)景后期webAPI會(huì)使用：目前沒(méi)有，先認(rèn)識(shí)1.6匿名函數(shù)2.立即執(zhí)行函數(shù)場(chǎng)景介紹:避免全局變量之間的污染語(yǔ)法：注意：多個(gè)立即執(zhí)行函數(shù)要用;

隔開(kāi)，要不然會(huì)報(bào)錯(cuò)立即執(zhí)行函數(shù)有什么作用？防止變量污染立即執(zhí)行函數(shù)需要調(diào)用嗎？有什么注意事項(xiàng)呢？無(wú)需調(diào)用，立即執(zhí)行，其實(shí)本質(zhì)已經(jīng)調(diào)用了

多個(gè)立即執(zhí)行函數(shù)之間用分號(hào)隔開(kāi)函數(shù)綜合案例轉(zhuǎn)換時(shí)間案例需求：用戶(hù)輸入秒數(shù)，可以自動(dòng)轉(zhuǎn)換為時(shí)分秒轉(zhuǎn)換時(shí)間案例需求：用戶(hù)輸入秒數(shù)，可以自動(dòng)轉(zhuǎn)換為時(shí)分秒分析：①：

用戶(hù)輸入總秒數(shù)

（注意默認(rèn)值）②：計(jì)算時(shí)分秒（封裝函數(shù)）里面包含數(shù)字補(bǔ)0③：打印輸出計(jì)算公式：計(jì)算時(shí)分秒小時(shí)：h=parseInt(總秒數(shù)/60/60%24)分鐘：m=parseInt(總秒數(shù)/60%60)秒數(shù):s=parseInt(總秒數(shù)%60)邏輯中斷開(kāi)發(fā)中，還會(huì)見(jiàn)到以下的寫(xiě)法：其實(shí)類(lèi)似