好程式設計師web前端學習路線分享函式基礎

好程式設計師web前端學習路線分享函式基礎，在這之前先來講一下函式是什麼？

函式就一個程式碼塊，可以是一個完全獨立與其它內容沒有關係的程式碼塊，也可以是一個與外界環境緊密相關的程式碼塊。函式是一個擁有輸入和輸出的獨立程式碼塊。函式是程式中最重要的組成部分。

函式，是一種封裝（將一些語句，封裝到函式里面）。透過函式可以封裝任意多條語句，而且可以在任何地方、任何時候呼叫執行。

在javascript裡，函式即物件，程式可以隨意操控它們。函式可以巢狀在其他函式中定義，這樣它們就可以訪問它們被定義時所處的作用域中的任何變數，它給javascript帶來了非常強勁的程式設計能力。

函式的功能、好處：

1） 將會被大量重複的語句寫在函式里面，這樣以後需要這些語句的時候，直接呼叫函式，不用重寫那些語句。

2） 簡化程式設計，讓程式設計變的模組化。

函式的宣告

函式有三種宣告的方法，而且有各自不同的特點。

1、普通函式宣告

函式關鍵字 + 函式名 + (){

                        語句

                        函式體

        }   

例如:

               

function functionName(){

    alert("程式設計師的搖籃");

   // ...語句//

}

注：1.函式命名跟變數一樣，只能是字母、數字、下劃線、美元符號，不能以數字開頭。

2.後邊（）裡放引數用的

函式名的規範：

1、普通的函式使用，名稱需要駝峰式命名法，即函式是多個片語構成時，第一個單詞的首字母小寫，其餘的單詞首字母大寫。函式名不能與關鍵詞和保留字重複，不能與變數名重複。

2、類的建構函式，是駝峰式命名，但是第一個單詞首字母需要大寫。

2、匿名函式宣告

var  變數名稱 = function (){

      函式內容

}

var funName=function () {

    //函式內容

};

定義一個匿名函式，所謂匿名函式就是沒有函式名。但是匿名函式定義後如果不儲存在一個變數中，就找不到了，因此，我們通常會用一個變數接收這個匿名函式。

匿名函式尾部結束時需要用;來結束，普通的函式結束後不用;結束的。

var funName=function abc() {

    //函式內容

    console.log(abc);

}

匿名函式也是可以定義函式名稱的，只不過比的地方不能使用，只能在函式內部使用。

3、Function建構函式宣告

使用Function建構函式

var box=new Function('num1','num2','retun num1+num2');//num1,num2引數

  num1,num2引數， 最後的字串是函式體

注意：第三種方式我們不推薦，因為這種語法會導致解析兩次程式碼（第一次解析常規JS程式碼，第二次是解析傳入建構函式中的字串），從而影響效能，但我們可以透過這種語法來理解函式是物件，函式名是指標的概念。

函式的儲存

JavaScript程式是一種解釋性語言。那麼什麼時候解釋性語言呢。

計算機其實並不認識程式，不管是什麼程式碼計算機都不認識，因為計算機只是機器，如果我們需要讓計算機認識程式，那麼就需要一個翻譯，就是把程式程式碼變成計算機可以理解的語言：0和1的資訊序列。目前存在兩種翻譯型別：一個是編譯，一個是解釋。兩種方式都需要對程式碼進行翻譯，只是翻譯的時間不同而已。

編譯型語言在計算機執行程式碼前，先把程式碼翻譯成計算機可以理解的檔案，這種檔案計算機就能看懂了，但是不管是程式設計師還是其他人員都看不懂的。並且這種程式碼，計算機可以執行了，但是每次我們需要修改程式碼時都需要修改原始碼，然後再進行編譯新的檔案才可以使用，也就是不能再編譯好的檔案上修改。這種程式碼的優勢是執行速度快，在執行前就知道程式碼是否錯誤，因為編譯時就做了判斷。

解釋型語言則不同，解釋型語言的程式不需要在執行前編譯，在執行程式的時候才翻譯，專門的直譯器負責在每個語句執行的時候解釋程式程式碼。這樣解釋型語言每執行一次就要翻譯一次，效率比較低。而且執行時才知道程式碼是否錯誤。

而JavaScript就是解釋性語言。但是注意程式在執行的時候，直譯器首先會收集所有的普通定義的函式，並且把他們儲存在堆裡，這時候才從頭開始執行程式碼。

abc();

function abc() {

   

}

例如我們看到這裡abc的執行在函式的上面，如果按照程式碼的執行順序，應該先執行abc，再創造函式，那麼顯然就會報錯。但是這樣不會有問題。就是說明，函式首先會被收集在堆裡，不管在哪裡呼叫，都是呼叫堆裡的函式，因此普通定義的函式執行時可以寫在前面或者寫在後面。

但是注意如果我們使用匿名函式這種情況就不同了。雖然我們會收集匿名函式在堆裡，但是如果找到它時，我們就需要在把它賦給一個變數以後才可以執行，否則就會報錯。

abc();

var abc=function () {

   

}

這是錯誤的。

例如上面這種就是錯誤的。

函式的引數

引數是指由外部傳入到函式中的變數，僅作為變數使用，但是該變數可以是任何內容，包括函式。

被傳入的引數作為區域性變數使用，可以被覆蓋掉。

引數就是一個區域性變數，透過外界傳入值，這個引數就是對應的值。引數是按照順序填入的。引數在JavaScript中不要求寫入引數的型別和預設值，如果需要預設值，就需要在函式中，根據條件判斷增加預設的值。有時候我們可以不用定義引數，直接在函式呼叫時，帶入引數，也可以獲取到。（不建議大家使用）

為什麼要從外部帶入引數。一般來說函式是獨立處理某段程式碼的集合，如果，這段程式碼需要重複執行，就會設計出函式，在不同的地方呼叫，達到程式碼共用的目的，減少程式碼量。但是在某些時候，雖然是同樣的程式碼，但是我們需要它發揮出的作用更大，可以解決不同的問題，這時候，傳入的引數就可以起到程式碼干預作用，在同一個函式中解決了很多不同的問題。這時候設計函式的獨立性就顯得非常重要了。當然，任何事情解決都不是絕對的，過度設計複雜的函式有時候反到會讓程式碼效率降低。

        同時，外部傳入的引數可以節省全域性變數的定義，甚至保證函式中的部分變數的獨立性。

引數分為實參和形參。

實參：真實的數值、字串

形參：一個接收實參的變數

例如這裡是透過一個函式中的引數來控制在頁面上新增多少個li

var m=5;

createUl(m);

function createUl(n) {

    if(n<1 || isNaN(n)) n=1;

    var ul="<ul>";

    for(var i=0;i<n;i++){

        ul+="<li>列表"+(i+1)+"</li>";

    }

    ul+="</ul>";

    document.write(ul);

}

函式的返回值

return 語句會終止函式的執行並返回函式的值。return 是javascript裡函式返回值的關鍵字，一個函式內處理的結果可以使用return 返回，這樣在呼叫函式的地方就可以用變數接收返回結果。return 關鍵字內任何型別的變數資料或表示式都可以進行返回，甚至什麼都不返回也可以

abc(3,5);

function abc(a,b){

   return a+b;

}

注意return只能返回一個值，如果需要返回多個資料時可以考慮陣列或者物件，例如

function abc() {

    return {a:1,b:2};

}

return 也可以作為阻止後續程式碼執行的語句被使用，例如

var bool=false;

var i=0;

function abc(){

    if(bool) return;

    i++;

}

這樣可以有效的控制語句在一定的條件下執行，不過一定要與break區分，break是用在條件當中，跳出的也僅僅是條件和迴圈，但是return 卻可以跳出函式，僅僅是針對函式使用，如果沒有函式是不能使用return的。

abc();

function abc() {

    for(var i=0;i<10;i++){

        if(i===3){

            // break;

            return;

        }

    }

    i+=5;

    console.log(i);//i=8

}例如上面的例子，如果使用break，就會列印i的值是8，如果使用return，就不會列印了，因為return直接跳出了函式。

函式的執行

函式的執行分為兩種

1、普通函式執行

函式執行 ：函式名()

執行後，可以完成函式的程式碼內容，如果函式內有return 值，這時候執行後會返回該值。

function abc() {

    return 3+4;

}

var s=abc();

如何沒有return，則執行完所有程式碼

2、函式獨立執行

函式自身是可以獨立執行的，並且也可以把獨立執行的結果賦值給一個變數。

var s=0;

(function(){

    s=4+5

})();

左邊是匿名函式自己執行，右邊是匿名函式賦值

注意匿名函式用小括號括住，最後再執行小括號。

注意，除了匿名函式可以獨立執行，實名函式也是可以獨立執行的，不過這種獨立執行就不能在該函式中新增引數了，並且匿名函式，也只能在此執行一次，不能多次呼叫，顯而易見的好處是，該函式內的變數統統是私有變數，有關該部分內容我們在後面詳細說明

函式的刪除

當函式不在使用時，就需要刪除，函式也是物件，如果不刪除，它將常駐記憶體中，如果該函式不再使用就可以使用刪除徹底清除掉該函式。但是隻有函式是匿名定義的或者透過建構函式建立的才可以被刪除。

函式刪除分兩種

1、匿名函式刪除

函式=null

2、物件下函式刪除

delete obj.fun