深入理解javascript系列(十二):函式與函數語言程式設計(1)

Panthon發表於2018-06-14

函式是Javascript的基礎語法之一,當然,也是最重要的,是我們必須要掌握好的知識點之一。

前幾個所記錄的執行上下文、作用域、變數物件、閉包、this等知識點,其實都是在圍繞函式在展開(知道這一點,個人覺得非常重要)。

之前的筆記可以說都是在進一步認識函式,而這次開始,則是認識函式之後,來使用函式了。

在之前的學習中,我們學習了那麼多函式的本質,是時候來做個總結了。

1、在實際開發中,需要用函式來做些什麼?

2、可以用函式的這些特性玩哪些東西?

3、要怎樣使用函式才能讓程式碼更加清晰、直觀與合理?

好吧,還是來讓我們進一步學習奇妙的函式吧。

12.1  函式

在實際開發中,經常能遇到的函式形式大概有四種,分別是函式宣告、函式表示式、匿名函式與函式自執行。

可能大家對這幾種常見的函式形式已不在陌生,但是我還是專門總結一下吧。

1、函式宣告

函式宣告是指利用function關鍵字來宣告一個函式。

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

在變數物件的建立過程中,function宣告的函式比var宣告的變數有更加優先的執行順序,即我們常常提到的變數提升。因此在同一執行上下文中,無論在什麼地方宣告瞭函式,都可以直接使用。

2、函式表示式

函式表示式其實是將一個函式體賦值給一個變數的過程。

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 
    }
}複製程式碼

3、匿名函式

顧名思義,就是沒有名字的函式,一般會作為一個引數或者作為一個返回值來使用,通常不使用變數來儲存它的引用。常見場景如下:

(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()();複製程式碼

4、自執行函式

自執行函式是匿名函式一個非常重要的應用場景。因為函式會產生獨立的作用域,因此我們常常利用自執行函式來模擬塊級作用域,並進一步在此基礎上實現模組化的運用。

(function() {
    //....
})();複製程式碼

模組化的重要性,我們應該時刻提醒自己,並且在學習過程中,應慢慢養成對於模組化思維的一個認知和習慣。因此,雖然在上一個系列已經簡單說過模組化了,但這裡任然要藉助自執行函式來了解模組化。

一個模組可以包括:私有變數、私有方法、公有變數、公有方法。

當我們使用自執行函式建立一個模組時,也就意味著,外界已經無法訪問該模組內部的任何屬性和方法了。好在有閉包,作為模組之間能互相通訊的橋樑,讓模組能夠在我們的控制下選擇性地對外開放屬性與方法。

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

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

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

這些都是我以往的學習筆記。如果您看到此筆記,希望您能指出我的錯誤。有這麼一個群,裡面的小夥伴互相監督,堅持每天輸出自己的學習心得,不輸出就出局。希望您能加入,我們一起終身學習。歡迎新增我的個人微訊號:Pan1005919589


相關文章