JavaScript 基礎(chǔ) - 筆記
理解封裝的意義，能夠通過(guò)函數(shù)的聲明實(shí)現(xiàn)邏輯的封裝，知道對(duì)象數(shù)據(jù)類(lèi)型的特征，結(jié)合數(shù)學(xué)對(duì)象實(shí)現(xiàn)簡(jiǎn)單計(jì)算功能。
函數(shù)
綜合案例
函數(shù)
理解函數(shù)的封裝特性，掌握函數(shù)的語(yǔ)法規(guī)則
函數(shù)的基本使用
函數(shù): 是可以被重復(fù)使用的代碼塊
作用：函數(shù)可以把具有相同或相似邏輯的代碼“包裹”起來(lái)，這么做的優(yōu)勢(shì)是有利于代碼復(fù)用
聲明（定義）函數(shù)
聲明（定義）一個(gè)完整函數(shù)包括關(guān)鍵字、函數(shù)名、形式參數(shù)、函數(shù)體、返回值5個(gè)部分
利用關(guān)鍵字 function 定義函數(shù) （聲明函數(shù)）
語(yǔ)法：
<script>
// 函數(shù)： 是可以被重復(fù)使用的代碼塊，作用是有利于代碼復(fù)用
// 1. 聲明（定義）了最簡(jiǎn)單的函數(shù)，既沒(méi)有形式參數(shù)，也沒(méi)有返回值
functionsayHi() {
console.log('嗨~')
}
注意：
函數(shù)名命名跟變量一致，采用小駝峰命名法
函數(shù)名經(jīng)常采用 動(dòng)詞
調(diào)用
聲明（定義）的函數(shù)必須調(diào)用才會(huì)真正被執(zhí)行，使用 () 調(diào)用函數(shù)。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 聲明和調(diào)用</title>
</head>
<body>
<script>
// 聲明（定義）了最簡(jiǎn)單的函數(shù)，既沒(méi)有形式參數(shù)，也沒(méi)有返回值
functionsayHi() {
console.log('嗨~')
?? }
// 函數(shù)調(diào)用，這些函數(shù)體內(nèi)的代碼邏輯會(huì)被執(zhí)行
// 函數(shù)名()
sayHi()
// 可以重復(fù)被調(diào)用，多少次都可以
sayHi()
</script>
</body>
</html>
注：函數(shù)名的命名規(guī)則與變量是一致的，并且盡量保證函數(shù)名的語(yǔ)義。
函數(shù)的整體認(rèn)知
語(yǔ)法：
functionsum(參數(shù)1,參數(shù)2...) {
return結(jié)果
}
console.log(sum(1,2))// 輸出函數(shù)返回的結(jié)果
說(shuō)明：
函數(shù)參數(shù)，如果有多個(gè)則用逗號(hào)分隔，用于接受傳遞過(guò)來(lái)的數(shù)據(jù)
return 關(guān)鍵字可以把結(jié)果返回給調(diào)用者
函數(shù)參數(shù)
通過(guò)向函數(shù)傳遞參數(shù)，可以讓函數(shù)更加靈活多變
形參：聲明函數(shù)時(shí)小括號(hào)里的叫形參（形式上的參數(shù)）
實(shí)參：調(diào)用函數(shù)時(shí)小括號(hào)里的叫實(shí)參（實(shí)際上的參數(shù)）
執(zhí)行過(guò)程： 會(huì)把實(shí)參的數(shù)據(jù)傳遞給形參，從而提供給函數(shù)內(nèi)部使用，我們可以把形參理解為變量
我們?cè)?jīng)使用過(guò)的 alert('打印')，parseInt('11px')，Number('11')本質(zhì)上都是函數(shù)調(diào)用的傳參
<script>
// 函數(shù)的參數(shù)? 形參和實(shí)參個(gè)數(shù)不匹配
// 1. 形參個(gè)數(shù)過(guò)多， 會(huì)自動(dòng)補(bǔ)充 undefined
functionsum(x,y) {// 形參
returnx+y
? }
console.log(sum(1,2))// 實(shí)參 ? 3
console.log(sum(1))// 實(shí)參? NaN? x = 1? y 沒(méi)有給值默認(rèn)值是 undefined
//? 1 + undefined? = NaN
// 2. 實(shí)參個(gè)數(shù)過(guò)多，則多余的實(shí)參會(huì)被忽略
console.log(sum(1,2,3))// 實(shí)參 3
// 3. 開(kāi)發(fā)中提倡要保證實(shí)參和形參個(gè)數(shù)統(tǒng)一
</script>
在Javascript中 實(shí)參的個(gè)數(shù)和形參的個(gè)數(shù)可以不一致
如果形參過(guò)多 會(huì)自動(dòng)填上undefined
如果實(shí)參過(guò)多 那么多余的實(shí)參會(huì)被忽略
邏輯中斷
邏輯中斷： 存在于邏輯運(yùn)算符 && 和 || 中，左邊如果滿(mǎn)足一定條件會(huì)中斷代碼執(zhí)行，也稱(chēng)為邏輯短路
false && anything? ? // 邏輯與左邊f(xié)alse則中斷，如果左邊為true，則返回右邊代碼的值
true || anything? ? ? // 邏輯或左邊true則中斷，如果左邊為false，則返回右邊代碼的值
<script>
// 邏輯中斷 ? && ||
// 1. 邏輯與中斷：如果左邊為假，則中斷，如果左邊為真，則返回右邊的值
console.log(false&&1+2)// false
console.log(0&&1+2)// 0
console.log(''&&1+2)// ''
console.log(undefined&&1+2)// undefined
console.log(true&&1+2)// 3 此處不會(huì)發(fā)生邏輯中斷
console.log(1&&1+2)// 3 此處不會(huì)發(fā)生邏輯中斷
// 2. 邏輯或中斷，如果左側(cè)為真，則中斷，如果左側(cè)為假，則返回右邊的值
console.log(true||1+2)// true? 發(fā)生了中斷
console.log(1||1+2)// 1? 發(fā)生了中斷
console.log(false||1+2)// 3 此處不會(huì)發(fā)生邏輯中斷
// 3. 使用場(chǎng)景
// function sum(x, y) {
// ? return x + y
// }
// console.log(sum(1, 2)) // 3
// console.log(sum()) // NaN
functionsum(x,y) {// x = undefined
//? x = undefined || 0
// x = 1 || 0
x=x||0
y=y||0
returnx+y
}
console.log(sum())// 0
console.log(sum(1,2))// 3
</script>
函數(shù)默認(rèn)參數(shù)
默認(rèn)參數(shù)：可以給形參設(shè)置默認(rèn)值
說(shuō)明：這個(gè)默認(rèn)值只會(huì)在缺少實(shí)參傳遞或者實(shí)參是undefined才會(huì)被執(zhí)行
默認(rèn)參數(shù)和邏輯中斷使用場(chǎng)景區(qū)別：
默認(rèn)參數(shù)主要處理函數(shù)形參（處理參數(shù)要比邏輯中斷更簡(jiǎn)單）
邏輯中斷除了參數(shù)還可以處理更多的需求
<script>
// 默認(rèn)參數(shù): 給形參一個(gè)默認(rèn)值
// 1. 默認(rèn)參數(shù)里面的值執(zhí)行：
// 1.1 沒(méi)有實(shí)參傳遞過(guò)來(lái) x = 0
// 1.2 有實(shí)參傳遞但是傳遞的是undefined? x = 0
functionsum(x=0,y=0) {
returnx+y
? ? }
console.log(sum())// 0
console.log(sum(undefined,undefined))// 0
console.log(sum(1,2))// 3
// 2. 默認(rèn)參數(shù)和邏輯中斷使用場(chǎng)景的區(qū)別：
// 2.1 默認(rèn)參數(shù)主要針對(duì)的是形參
// 2.2 邏輯中斷除了處理參數(shù)之外，還可以做更多
</script>
函數(shù)返回值
函數(shù)的本質(zhì)是封裝（包裹），函數(shù)體內(nèi)的邏輯執(zhí)行完畢后，函數(shù)外部如何獲得函數(shù)內(nèi)部的執(zhí)行結(jié)果呢？
要想獲得函數(shù)內(nèi)部邏輯的執(zhí)行結(jié)果，需要通過(guò) return 這個(gè)關(guān)鍵字，將內(nèi)部執(zhí)行結(jié)果傳遞到函數(shù)外部，這個(gè)被傳遞到外部的結(jié)果就是返回值。
返回值：把處理結(jié)果返回給調(diào)用者
<script>
// 函數(shù)返回值細(xì)節(jié)
// 1. return 結(jié)束函數(shù)，return 后面的代碼不會(huì)執(zhí)行了， break退出循環(huán)或者switch
// function sum(x, y) {
// ? return x + y
// ? console.log('我不會(huì)執(zhí)行')
// }
// console.log(sum(1, 3))
// 2. return 和被返回的結(jié)果不要換行
// function sum(x, y) {
// ? return
// ? x + y
// }
// console.log(sum(1, 3))
// 3. 如果函數(shù)沒(méi)有return 則默認(rèn)返回的是 undefined
functionfn() {
?? }
console.log(fn())// undefined
</script>
總結(jié)：
return會(huì)立即結(jié)束當(dāng)前函數(shù)，所以后面代碼不會(huì)再被執(zhí)行
在 return 關(guān)鍵字和被返回的表達(dá)式之間不允許使用換行符，否則內(nèi)部執(zhí)行相當(dāng)于會(huì)自動(dòng)補(bǔ)充分號(hào)
函數(shù)可以沒(méi)有 return，這種情況函數(shù)默認(rèn)返回值為 undefined
作用域
作用域（scope）： 變量或者值在代碼中可用性的范圍
作用：作用域的使用提高了程序邏輯的局部性，增強(qiáng)了程序的可靠性，減少了名字沖突。
全局作用域
作用于所有代碼執(zhí)行的環(huán)境(整個(gè) script 標(biāo)簽內(nèi)部)或者一個(gè)獨(dú)立的 js 文件
處于全局作用域內(nèi)的變量，稱(chēng)為全局變量
局部作用域
函數(shù)作用域。作用于函數(shù)內(nèi)的代碼環(huán)境
塊級(jí)作用域。{ } 大括號(hào)內(nèi)部
處于局部作用域內(nèi)的變量稱(chēng)為局部變量
注意：
如果函數(shù)內(nèi)部，變量沒(méi)有聲明，直接賦值，也當(dāng)全局變量看，但是強(qiáng)烈不推薦
但是有一種情況，函數(shù)內(nèi)部的形參可以看做是局部變量。
變量的訪(fǎng)問(wèn)原則
訪(fǎng)問(wèn)原則：在能夠訪(fǎng)問(wèn)到的情況下先局部，局部沒(méi)有再找全局，總結(jié)： 就近原則
匿名函數(shù)
函數(shù)可以分為具名函數(shù)和匿名函數(shù)
匿名函數(shù)：沒(méi)有名字的函數(shù),無(wú)法直接使用。
函數(shù)表達(dá)式
將匿名函數(shù)賦值給一個(gè)變量，并且通過(guò)變量名稱(chēng)進(jìn)行調(diào)用 我們將這個(gè)稱(chēng)為函數(shù)表達(dá)式
// 聲明
letfn=function() {
console.log('函數(shù)表達(dá)式')
}
// 調(diào)用
fn()
總結(jié)：
其實(shí)函數(shù)也是一種數(shù)據(jù)類(lèi)型
函數(shù)表達(dá)式必須先定義，后使用
函數(shù)的形參和實(shí)參使用跟具名函數(shù)一致
立即執(zhí)行函數(shù)
IIFE (立即執(zhí)行函數(shù)表達(dá)式) (Immediately Invoked Function Expression)
場(chǎng)景介紹: 避免全局變量之間的污染
注意：多個(gè)立即執(zhí)行函數(shù)要用 ; 隔開(kāi)，要不然會(huì)報(bào)錯(cuò)
(function(){xxx})();
(function(){xxxx}());
