深刻理解javascript系列(十二):函數與函數式編程(1)

函數是Javascript的基礎語法之一，固然，也是最重要的，是咱們必需要掌握好的知識點之一。

前幾個所記錄的執行上下文、做用域、變量對象、閉包、this等知識點，其實都是在圍繞函數在展開（知道這一點，我的以爲很是重要）。

以前的筆記能夠說都是在進一步認識函數，而此次開始，則是認識函數以後，來使用函數了。

在以前的學習中，咱們學習了那麼多函數的本質，是時候來作個總結了。

一、在實際開發中，須要用函數來作些什麼？

二、能夠用函數的這些特性玩哪些東西？

三、要怎樣使用函數才能讓代碼更加清晰、直觀與合理？

好吧，仍是來讓咱們進一步學習奇妙的函數吧。

12.1  函數

在實際開發中，常常能遇到的函數形式大概有四種，分別是函數聲明、函數表達式、匿名函數與函數自執行。

可能你們對這幾種常見的函數形式已不在陌生，可是我仍是專門總結一下吧。

一、函數聲明

函數聲明是指利用function關鍵字來聲明一個函數。

function fn() {
    console.log('hello');
}複製代碼

在變量對象的建立過程當中，function聲明的函數比var聲明的變量有更加優先的執行順序，即咱們經常提到的變量提高。所以在同一執行上下文中，不管在什麼地方聲明瞭函數，均可以直接使用。

二、函數表達式

函數表達式實際上是將一個函數體賦值給一個變量的過程。

var fn = function() {};複製代碼

所以，咱們理解的函數表達式只需把他看成變量聲明去理解

//建立階段
var fn = undefined;
//執行階段
fn = function() {};  複製代碼

若是你比較喜歡使用函數表達式，那麼必定要有一個良好的編碼習慣，以規避變量提高帶來的負面影響。

函數體賦值的操做在其它不少場景中都可以遇到，以下：

function Person(name) {
    this.name = name;
    this.age = age;

    //在構造函數內部添加方法
    this.getAge = function() {
        return this.age        
    }
}


//給原型上添加方法
Person.prototype.getName = function() {
    return this.name;
}

//在對象中添加方法
var a = {
    m: 20,
    getM: function() {
        return this.m 
    }
}複製代碼

三、匿名函數

顧名思義，就是沒有名字的函數，通常會做爲一個參數或者做爲一個返回值來使用，一般不使用變量來保存它的引用。常見場景以下：

（1）setTimeout中的參數

var timer = setTimeout(function() {
    console.log('xxxxxx')
},1000);複製代碼

（2）數組方法中的參數

var arr = [1,2,3];

arr.map(function(item) {
    return item + 1;
})

arr.forEach(function(item) {
    //todo
})複製代碼

（3）匿名函數做爲一個返回值

function add() {
    var a = 10;
    return function() {
        return a + 1;
    }
};

add()();複製代碼

四、自執行函數

自執行函數是匿名函數一個很是重要的應用場景。由於函數會產生獨立的做用域，所以咱們經常利用自執行函數來模擬塊級做用域，並進一步在此基礎上實現模塊化的運用。

(function() {
    //....
})();複製代碼

模塊化的重要性，咱們應該時刻提醒本身，而且在學習過程當中，應慢慢養成對於模塊化思惟的一個認知和習慣。所以，雖然在上一個系列已經簡單說過模塊化了，但這裏任然要藉助自執行函數來了解模塊化。

一個模塊能夠包括：私有變量、私有方法、公有變量、公有方法。

當咱們使用自執行函數建立一個模塊時，也就意味着，外界已經沒法訪問該模塊內部的任何屬性和方法了。好在有閉包，做爲模塊之間能互相通訊的橋樑，讓模塊可以在咱們的控制下選擇性地對外開放屬性與方法。

(function() {
    //私有變量
    var age = 18;
    var name = 'pan';
    
    //私有方法
    function getName() {
        return 'my name is ' + name;
    }

    //公有方法
    function getAge() {
        return age;
    }

    //將引用保存在外部執行環境的變量中，這是一種簡單的對外開發方法的方式
    window.getAge = getAge;
})();複製代碼

這些都是我以往的學習筆記。若是您看到此筆記，但願您能指出個人錯誤。有這麼一個羣，裏面的小夥伴互相監督，堅持天天輸出本身的學習心得，不輸出就出局。但願您能加入，咱們一塊兒終身學習。歡迎添加個人我的微信號：Pan1005919589