1、函數(shù)

函數(shù)：就是封裝了一段可被重復(fù)調(diào)用執(zhí)行的代碼塊。通過此代碼塊可以實(shí)現(xiàn)大量代碼的重復(fù)使用。

1.1、函數(shù)的使用

函數(shù)在使用時分為兩步：聲明函數(shù)和調(diào)用函數(shù)

①聲明函數(shù)

//聲明函數(shù)function 函數(shù)名(){
     //函數(shù)體代碼}

• function是聲明函數(shù)的關(guān)鍵字,必須小寫
• 由于函數(shù)一般是為了實(shí)現(xiàn)某個功能才定義的， 所以通常我們將函數(shù)名命名為動詞，比如getSum

②調(diào)用函數(shù)

//調(diào)用函數(shù)函數(shù)名(); //通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼

• 調(diào)用的時候千萬不要忘記添加小括號
• 口訣：函數(shù)不調(diào)用，自己不執(zhí)行

注意：聲明函數(shù)本身并不會執(zhí)行代碼，只有調(diào)用函數(shù)時才會執(zhí)行函數(shù)體代碼。

1.2、函數(shù)的封裝

• 函數(shù)的封裝是把一個或者多個功能通過函數(shù)的方式封裝起來，對外只提供一個簡單的函數(shù)接口

1.3、函數(shù)的參數(shù)

1.3.1、形參和實(shí)參

在聲明函數(shù)時，可以在函數(shù)名稱后面的小括號中添加一些參數(shù)，這些參數(shù)被稱為形參，而在調(diào)用該函數(shù)時，同樣也需要傳遞相應(yīng)的參數(shù)，這些參數(shù)被稱為實(shí)參。

參數(shù)的作用 : 在函數(shù)內(nèi)部某些值不能固定，我們可以通過參數(shù)在調(diào)用函數(shù)時傳遞不同的值進(jìn)去

// 帶參數(shù)的函數(shù)聲明function 函數(shù)名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數(shù)，用逗號分隔
  // 函數(shù)體}// 帶參數(shù)的函數(shù)調(diào)用函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3...);

例如：利用函數(shù)求任意兩個數(shù)的和

// 聲明函數(shù)function getSum(num1,num2){
    console.log(num1+num2)}// 調(diào)用函數(shù)getSum(1,3) //4getSum(6，5) //11

• 函數(shù)調(diào)用的時候?qū)崊⒅凳莻鬟f給形參的

• 形參簡單理解為:不用聲明的變量

• 實(shí)參和形參的多個參數(shù)之間用逗號(,)分隔，

1.3.2、形參和實(shí)參個數(shù)不匹配

function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 300，形參和實(shí)參個數(shù)相等，輸出正確結(jié)果

sum(100, 400, 500, 700);   // 500，實(shí)參個數(shù)多于形參，只取到形參的個數(shù)

sum(200);                  // 實(shí)參個數(shù)少于形參，多的形參定義為undefined，結(jié)果為NaN

注意：在JavaScript中，形參的默認(rèn)值是undefined

1.3.3、小結(jié)

• 函數(shù)可以帶參數(shù)也可以不帶參數(shù)
• 聲明函數(shù)的時候，函數(shù)名括號里面的是形參，形參的默認(rèn)值為 undefined
• 調(diào)用函數(shù)的時候，函數(shù)名括號里面的是實(shí)參
• 多個參數(shù)中間用逗號分隔
• 形參的個數(shù)可以和實(shí)參個數(shù)不匹配，但是結(jié)果不可預(yù)計(jì)，我們盡量要匹配

1.4、函數(shù)的返回值

1.4.1、return語句

有的時候，我們會希望函數(shù)將值返回給調(diào)用者，此時通過使用 return 語句就可以實(shí)現(xiàn)。

return 語句的語法格式如下：

// 聲明函數(shù)function 函數(shù)名（）{
    ...
    return  需要返回的值;}// 調(diào)用函數(shù)函數(shù)名();    // 此時調(diào)用函數(shù)就可以得到函數(shù)體內(nèi)return 后面的值

• 在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值

• 如果函數(shù)沒有 return，返回的值是undefined

function add(num1，num2){
    //函數(shù)體
    return num1 + num2; // 注意：return 后的代碼不執(zhí)行
    alert('我不會被執(zhí)行，因?yàn)榍懊嬗?return');
}
var resNum = add(21,6); // 調(diào)用函數(shù)，傳入兩個實(shí)參，并通過 resNum 接收函數(shù)返回值
alert(resNum);          // 27

1.4.2、return 終止函數(shù)

return 語句之后的代碼不被執(zhí)行

function add(num1，num2){
    //函數(shù)體
    return num1 + num2; // 注意：return 后的代碼不執(zhí)行
    alert('我不會被執(zhí)行，因?yàn)榍懊嬗?return');}var resNum = add(21,6); // 調(diào)用函數(shù)，傳入兩個實(shí)參，并通過 resNum 接收函數(shù)返回值alert(resNum);          // 27

1.4.3、return 的返回值

return只能返回一個值。如果用逗號隔開多個值，以最后一個為準(zhǔn)

function add(num1，num2){
    //函數(shù)體
    return num1,num2;
}
var resNum = add(21,6); // 調(diào)用函數(shù)，傳入兩個實(shí)參，并通過 resNum 接收函數(shù)返回值
alert(resNum);          // 6

1.4.4、小結(jié)

函數(shù)都是有返回值的

1. 如果有 return ，則返回 return 后面的值
2. 如果沒有 return，則返回 undefined

1.4.5、區(qū)別

break、continue、return 的區(qū)別

• break ： 結(jié)束當(dāng)前循環(huán)體(如 for、while)
• continue ：跳出本次循環(huán)，繼續(xù)執(zhí)行下次循環(huán)(如for、while)
• return ：不僅可以退出循環(huán)，還能夠返回 return 語句中的值，同時還可以結(jié)束當(dāng)前的函數(shù)體內(nèi)的代碼

1.4.5、練習(xí)

1.利用函數(shù)求任意兩個數(shù)的最大值

function getMax(num1, num2) {
    return num1 > num2 ? num1 : num2;}console.log(getMax(1, 2));console.log(getMax(11, 2));

2.求數(shù)組 [5,2,99,101,67,77] 中的最大數(shù)值

//定義一個獲取數(shù)組中最大數(shù)的函數(shù)function getMaxFromArr(numArray){
    var maxNum = numArray[0];
    for(var i = 0; i < numArray.length;i++){
        if(numArray[i]>maxNum){
            maxNum = numArray[i];
        }
    }
    return maxNum;}var arrNum = [5,2,99,101,67,77];var maxN = getMaxFromArr(arrNum);  //這個實(shí)參是個數(shù)組alert('最大值為' + maxN);

3.創(chuàng)建一個函數(shù)，實(shí)現(xiàn)兩個數(shù)之間的加減乘除運(yùn)算，并將結(jié)果返回

var a = parseFloat(prompt('請輸入第一個數(shù)'));var b = parseFloat(prompt('請輸入第二個數(shù)'));function count(a,b){
    var arr = [a + b, a - b, a * b, a / b];
    return arr;}var result = count(a,b);console.log(result)

1.5、arguments的使用

當(dāng)我們不確定有多少個參數(shù)傳遞的時候，可以用arguments來獲取。在 JavaScript 中，arguments 實(shí)際上它是當(dāng)前函數(shù)的一個內(nèi)置對象。所有函數(shù)都內(nèi)置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實(shí)參。

• arguments存放的是傳遞過來的實(shí)參

• arguments展示形式是一個偽數(shù)組，因此可以進(jìn)行遍歷。偽數(shù)組具有以下特點(diǎn)

①：具有 length 屬性

②：按索引方式儲存數(shù)據(jù)

③：不具有數(shù)組的 push , pop 等方法

// 函數(shù)聲明function fn() {
    console.log(arguments);  //里面存儲了所有傳遞過來的實(shí)參
    console.log(arrguments.length); // 3
    console.log(arrguments[2]); // 3}// 函數(shù)調(diào)用fn(1,2,3);

例如：利用函數(shù)求任意個數(shù)的最大值

 function maxValue() {
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
        if (max < arguments[i]) {
            max = arguments[i];
        }
    }
    return max;}console.log(maxValue(2, 4, 5, 9)); // 9console.log(maxValue(12, 4, 9)); // 12

函數(shù)調(diào)用另外一個函數(shù)

因?yàn)槊總€函數(shù)都是獨(dú)立的代碼塊，用于完成特殊任務(wù)，因此經(jīng)常會用到函數(shù)相互調(diào)用的情況。具體演示在下面的函數(shù)練習(xí)中會有。

1.6、函數(shù)練習(xí)

1.利用函數(shù)封裝方式，翻轉(zhuǎn)任意一個數(shù)組

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;}var arr1 = reverse([1, 3, 4, 6, 9]);console.log(arr1);

2.利用函數(shù)封裝方式，對數(shù)組排序 – 冒泡排序

function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j+1]) { 
	            var temp = arr[j];
	            arr[j] = arr[j + 1]; 
	            arr[j + 1] = temp;
            }
        }
    }
    return arr;}

3.輸入一個年份，判斷是否是閏年（閏年：能被4整除并且不能被100整數(shù)，或者能被400整除）

function isRun(year) {
     var flag = false;
     if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
     }
    return flag;}console.log(isRun(2010));console.log(isRun(2012));

4.用戶輸入年份，輸出當(dāng)前年份2月份的天數(shù)，如果是閏年，則2月份是 29天， 如果是平年，則2月份是 28天

function backDay() {
    var year = prompt('請您輸入年份:');
    if (isRun(year)) { //調(diào)用函數(shù)需要加小括號
        alert('你輸入的' + year + '是閏年，2月份有29天');
    } else {
        alert('您輸入的' + year + '不是閏年，2月份有28天');
    }}backDay();//判斷是否是閏年的函數(shù)function isRun(year) {
    var flag = false;
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true;
    }
    return flag;}

1.7、函數(shù)的兩種聲明方式

1.7.1、自定義函數(shù)方式(命名函數(shù))

利用函數(shù)關(guān)鍵字function自定義函數(shù)方式。

// 聲明定義方式function fn() {...}// 調(diào)用  fn();

1. 因?yàn)橛忻?，所以也被稱為命名函數(shù)

2. 調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面，也可以放在聲明函數(shù)的后面

1.7.2、函數(shù)表達(dá)式方式(匿名函數(shù))

利用函數(shù)表達(dá)式方式的寫法如下：

// 這是函數(shù)表達(dá)式寫法，匿名函數(shù)后面跟分號結(jié)束
var fn = function(){...};
// 調(diào)用的方式，函數(shù)調(diào)用必須寫到函數(shù)體下面
fn();

• 因?yàn)楹瘮?shù)沒有名字，所以也稱為匿名函數(shù)

• 這個fn 里面存儲的是一個函數(shù)

• 函數(shù)調(diào)用的代碼必須寫到函數(shù)體后面

2、作用域

通常來說，一段程序代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域。作用域的使用提高了程序邏輯的局部性，增強(qiáng)了程序的可靠性，減少了名字沖突。

JavaScript (ES6前) 中的作用域有兩種：

• 全局作用域
• 局部作用域(函數(shù)作用域)

2.1、全局作用域

作用于所有代碼執(zhí)行的環(huán)境(整個 script 標(biāo)簽內(nèi)部)或者一個獨(dú)立的 js 文件

2.2、局部（函數(shù)）作用域

作用于函數(shù)內(nèi)的代碼環(huán)境，就是局部作用域。 因?yàn)楦瘮?shù)有關(guān)系，所以也稱為函數(shù)作用域

2.3、JS 沒有塊級作用域

• 塊作用域由 {} 包括
• 在其他編程語言中（如 java、c#等），在 if 語句、循環(huán)語句中創(chuàng)建的變量，僅僅只能在本 if 語句、本循環(huán)語句中使用，如下面的Java代碼：

if(true){
    int num = 123;
    System.out.println(num);	// 123}System.out.println(num);		// 報(bào)錯

JS 中沒有塊級作用域(在ES6之前)

if(true){
    int num = 123;
    System.out.println(num);	// 123}System.out.println(num);		// 123

3、變量的作用域

在JavaScript中，根據(jù)作用域的不同，變量可以分為兩種：

• 全局變量
• 局部變量

3.1、全局變量

在全局作用域下聲明的變量叫做全局變量（在函數(shù)外部定義的變量）

• 全局變量在代碼的任何位置都可以使用

• 在全局作用域下var聲明的變量 是全局變量

• 特殊情況下，在函數(shù)內(nèi)不使用 var 聲明的變量也是全局變量（不建議使用）

3.2、局部變量

在局部作用域下聲明的變量叫做局部變量（在函數(shù)內(nèi)部定義的變量）

• 局部變量只能在該函數(shù)內(nèi)部使用

• 在函數(shù)內(nèi)部 var 聲明的變量是局部變量

• 函數(shù)的形參實(shí)際上就是局部變量

3.3、區(qū)別

• 全局變量：在任何一個地方都可以使用，只有在瀏覽器關(guān)閉時才會被銷毀，因此比較占內(nèi)存

• 局部變量：只在函數(shù)內(nèi)部使用，當(dāng)其所在的代碼塊被執(zhí)行時，會被初始化；當(dāng)代碼塊運(yùn)行結(jié)束后，就會被銷毀，因此更節(jié)省內(nèi)存空間

4、作用域鏈

1. 只要是代碼，就至少有一個作用域

2. 寫在函數(shù)內(nèi)部的叫局部作用域

3. 如果函數(shù)中還有函數(shù)，那么在這個作用域中就又可以誕生一個作用域

4. 根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制，用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問，就稱作作用域鏈

// 作用域鏈: 內(nèi)部函數(shù)訪問外部函數(shù)的變量，采取的是鏈?zhǔn)讲檎业姆绞絹頉Q定取哪個值，這種結(jié)構(gòu)我們稱為作用域鏈表var num = 10;funtion fn() { //外部函數(shù)
    var num = 20;
    
    function fun() { //內(nèi)部函數(shù)
        console.log(num);  // 20 ,一級一級訪問
    }}

• 作用域鏈：采取就近原則的方式來查找變量最終的值。

5、預(yù)解析

首先來看幾段代碼和結(jié)果：

console.log(num);  // 結(jié)果是多少？//會報(bào)錯 num is undefined

console.log(num);  // 結(jié)果是多少？var num = 10;   // undefined

// 命名函數(shù)(自定義函數(shù)方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面fn();				//11function fn() {
    console.log('11');}

// 匿名函數(shù)(函數(shù)表達(dá)式方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面fn();var  fn = function() {
    console.log('22'); // 報(bào)錯}//相當(dāng)于執(zhí)行了以下代碼var fn;fn();      //fn沒賦值，沒這個，報(bào)錯var  fn = function() {
    console.log('22'); //報(bào)錯}

JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運(yùn)行 JavaScript 代碼的時候分為兩步：預(yù)解析和代碼執(zhí)行。

• 預(yù)解析：js引擎會把js里面所有的 var 還有 function 提升到當(dāng)前作用域的最前面

• 代碼執(zhí)行：從上到下執(zhí)行JS語句

預(yù)解析只會發(fā)生在通過 var 定義的變量和 function 上。學(xué)習(xí)預(yù)解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined，為什么在函數(shù)聲明之前就可以調(diào)用函數(shù)。

5.1、變量預(yù)解析(變量提升)

變量預(yù)解析也叫做變量提升、函數(shù)提升

變量提升: 變量的聲明會被提升到當(dāng)前作用域的最上面，變量的賦值不會提升

console.log(num);  // 結(jié)果是多少？
var num = 10;   
// undefined



//相當(dāng)于執(zhí)行了以下代碼
var num;		// 變量聲明提升到當(dāng)前作用域最上面
console.log(num);
num = 10;		// 變量的賦值不會提升

5.2、函數(shù)預(yù)解析(函數(shù)提升)

函數(shù)提升： 函數(shù)的聲明會被提升到當(dāng)前作用域的最上面，但是不會調(diào)用函數(shù)。

fn();				//11function fn() {
    console.log('11');}

5.3、解決函數(shù)表達(dá)式聲明調(diào)用問題

對于函數(shù)表達(dá)式聲明調(diào)用需要記?。?strong>函數(shù)表達(dá)式調(diào)用必須寫在函數(shù)聲明的下面

// 匿名函數(shù)(函數(shù)表達(dá)式方式):若我們把函數(shù)調(diào)用放在函數(shù)聲明上面
fn();
var  fn = function() {
    console.log('22'); // 報(bào)錯
}


//相當(dāng)于執(zhí)行了以下代碼
var fn;
fn();      //fn沒賦值，沒這個，報(bào)錯
var  fn = function() {
    console.log('22'); //報(bào)錯
}

5.4、預(yù)解析練習(xí)

預(yù)解析部分十分重要，可以通過下面4個練習(xí)來理解。
Pink老師的視頻講解預(yù)解析：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=143

// 練習(xí)1var num = 10;fun();function fun() {
    console.log(num);	//undefined
    var num = 20;}// 最終結(jié)果是 undefined

上述代碼相當(dāng)于執(zhí)行了以下操作

var num;function fun() {
    var num;
    console.log(num);
    num = 20;}num = 10;fun();

// 練習(xí)2var num = 10;function fn(){
    console.log(num);		//undefined
    var num = 20;
    console.log(num);		//20}fn();// 最終結(jié)果是 undefined 20

上述代碼相當(dāng)于執(zhí)行了以下操作

var num;function fn(){
    var num;
    console.log(num);
    num = 20;
    console.log(num);}num = 10;fn();

// 練習(xí)3var a = 18;f1();function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';}

上述代碼相當(dāng)于執(zhí)行了以下操作

var a;function f1() {
    var b;
    var a
    b = 9;
    console.log(a);	//undefined
    console.log(b);	//9
    a = '123';}a = 18;f1();

// 練習(xí)4f1();console.log(c);console.log(b);console.log(a);function f1() {
    var a = b = c = 9;
    // 相當(dāng)于 var a = 9; b = 9;c = 9;  b和c的前面沒有var聲明,當(dāng)全局變量看
    // 集體聲明 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);}

上述代碼相當(dāng)于執(zhí)行了以下操作

function f1() {
    var a;
    a = b = c = 9;
    console.log(a);	//9
    console.log(b);	//9
    console.log(c);	//9
}
f1();
console.log(c);	//9
console.log(b);	//9
console.log(a);	//報(bào)錯 a是局部變量