JavasSript 基礎第四天

一、前言　　

　　昨天我們瞭解了Js的很重要的一個概念叫做函數，函數就是對於冗餘和垃圾代碼的一種封裝機制。簡單的講就是為了能讓程式更好更快的執行我們將一些重覆性的代碼提取，封裝成一個有名字的小盒子，等到我們需要的時候我們可以直接將盒子拿出來使用。

二、引入

　　無論是在前端還是後臺語言中函數都是一個個成功程式的最小封裝模塊，就像搭積木一樣你需要不同的種的模塊來組成一個成品。那麼對於函數來說每一個就應該有它自己的特性以。

三、重點內容

　　㈠  函數的四種形式

　　　　① 有參數，無返回值（一般沒有返回值的時候預設的返回值都是undefined）

function fun(a,b){
    console.log(a+b);
}

　　　　② 無參數，無返回值（一般用於有代碼復用或者功能性代碼段）

function fun(){
    console.log("Hello World");
}

　　　　③ 有參數，有返回值（推薦函數可以這麼寫）

function fun(a,b){
    return a+b;
}

　　　　④ 無參數，有返回值

function fun(a,b){
    console.log(a+b);
}

　　㈡ 函數的重載

　　　　與後臺語言不同，JS的函數中是沒有函數重載的。說到重載我們就要稍微瞭解一下重載是什麼意思了。

　　　　重載：即函數的命名相同，但是函數的形參個數或者數據類型的不同就會引起不同。簡單的說就是在點名的時候有兩個一模一樣的名字，但是體型確實一胖一瘦。這兩個人都是這個班的同學所以都是存在的。

　　　　在Js當中就沒有重載這一個感念，那麼很多人會問，如果如果我在工作的命名不小心相同了怎麼辦，那麼請看下麵的這段代碼

function fun(a,b){
    return a+b;
}
function fun(a,b,c){
    a = a||0;
    b = b||0;
    c = c||0;
    return a+b+c;
}
console.log(fun(1,2));

　　　　我相信很多人去測試這段代碼的時候輸出的結果是3所以認為我上面說錯了。但其實不然如果我們打開測試著工具的一步步調試的時候會發現，函數調用的時候是調用的參數3個函數。那麼為什麼又會等於3呢？因為我在這裡面添加了短路運算來避免錯誤的出現。(不懂短路運算的請翻看Js第3天內容)。在Js中是沒有重載的，像上面一樣的定義第一次定義的就會被後面的所覆蓋。

　　㈢ 選擇結構

　　　　作用域：即變數所作用的區域；　

　　　　　　1) 全局作用域：全局作用域的變數就是全局變數。即在整個頁面的任何位置都可以訪問到到。（註意：在函數中不使用var定義的變數也是全局變數）。

　　　　　　2) 局部作用域：局部作用域的變數就是局部變數。只在函數中可以訪問的。

　　㈣ 匿名函數與函數表達式方式

　　　　 在昨天的介紹中我們知道了函數定義的方式是function函數名([參數列表]){函數體}；其實還有一中定義的方式就是利用函數表達式命名

var fun = function(){
    return 0;
}

　　　　這種方式類似於變數的定義，而其後面的函數沒有名字就被稱作匿名函數。它前面的變數名就可以看做是函數名。

　　　　函數表表達式方式和函數命名方式的區別：

1. 函數的聲明中的函數有名字
2. 函數表達式中的函數沒有名字，是匿名函數，前面的變數的名字可以看做是函數的名字
3. 在函數預解析的時候，會先將函數聲明提前到作用域的最前面，而函數表達式不會提升
4.  函數聲明中的函數，可以在聲明之前調用，但是函數表達式的函數必須在函數表達式之後調用

　　㈤ 函數的預解析

　　　　在程式真正執行之前，會將所有的代碼掃描一遍，將變數的聲明，參數提升到當前作用域的最前面。

function fun(a,b){
    console.log(c);
    console.log(a);
    console.log(b);
    var c = 100;
}
fun(1,2);

　　　　在當前代碼中console.log(c)會列印什麼值呢，我想很多人跟我開始的想法一樣，因為在下麵定義了局部變數c為100，所以輸出的時候應該是100.但其實我們都錯了，因為函數要做預解析，所以會把變數的聲明提到當前作用域的最前面如下所示：

function fun(a,b){
    var c;
    console.log(c);
    console.log(a);
    console.log(b);
    c = 100;
}
fun(1,2);

　　　　所以c是不會有值得，因為它只有聲明沒有賦值所以返回的是undefined。

　　㈥ 自執行函數　　　　

var fun = function(){
    console.log("你好")
};

fun();
(function(){
console.log("你好");

}());

(function(){
    console.log("你好");

})();

　　　　因為我們利用了函數表達式的方式定義函數，所以當調用的時候我們可以把小括弧前面的部分用賦值符號右面的部分代替，再將代替的部分用小括弧括起來這樣就形成了自執行函數。

　　　　特點：自執行函數是沒有名字的，定以後馬上調用。多用於一次性使用中。

　　㈦ 回調函數

    var fun = function(a,b,ff){
        return ff(a,b);
}
    console.log(fun(10,20,function(a,b){return a+b ;}))

　　　　是不是看蒙了，那我們稍微分解一下

 function fn(a,b){
        return a+b;
    }
    var fun = function(a,b,ff){
    return ff(a,b);
}
    console.log(fun(10,20,fn));

　　　　其實回調函數的本質就是把函數當做參數來傳遞。

四、總結

　　　　對於函數還是需要多加練習才可以繞明白，我覺得其中最終的一點就是一定要記住每個函數都是有返回值的，有時可能會列印但有時也不會列印。你需要多多的自己判斷。