第三節、JavaScript 設計模式——閉包和高階函數

這一節同上一節一樣，都是爲後續學習打基礎的內容。對此非常瞭解的可以跳過。

一、閉包

閉包是什麼？

閉包就是有權訪問其他函數作用域內變量的函數。

閉包的作用

1. 通過閉包可以訪問局部變量
2. 可以讓局部變量的值始終保持在內存中（因此要注意不能濫用閉包）
3. 可以暫存數據,給變量開闢私密空間,避免外部污染。

閉包優缺點

優點:可以把局部變量駐留在內存中,可以避免使用全局變量;全局變量在複雜程序中會造成許多麻煩（比如命名衝突，垃圾回收等），所以推薦使用私有的,封裝的局部變量。而閉包可以實現這一點。

缺點：由於閉包裏作用域返回的局部變量資源不會被立刻銷燬回收,所以可能會佔用更多的內存;所以過度使用閉包會導致性能下降;

二、高階函數

高階函數是指至少滿足下列條件之一的函數：

• 函數可以作爲參數傳遞
• 函數可以作爲返回值輸出

函數作爲參數傳遞

1、回調函數

這個就比較常見了

let getUserInfo = (userId,callback)=>{
	$.ajax('http://xxx.com/getUserInfo?'+userId,function(data){
		if(typeof callback === 'function'){
			callback(data)
		}
	})
}
getUserInfo(121,(data)=>{
	console.log(data.userName)
})

2、map/reduce

由於map()方法定義在 JavaScript 的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作爲結果

再看reduce的用法。Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上，這個函數必須接收兩個參數（第一個是代碼執行的結果，第二個是當前項），reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：

// 1、map
function pow(x) {
    return x * x;
}
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

// 1、reduce
let arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

3、sort

這個經常見，排序函數，相信大家都使用過。

//默認從小到大排序
[1,9,8,7].sort() // [1,7,8,9] 

//從大到小排序
[1,9,8,7].sort((a,b)=>{
	return b-a
}) 
// [9,8,7,1]

4、filter

這個也經常用，用作篩選用的。

[1,4,9,12,3].filter((item)=>{
	return item>5
})
// 輸出 [9,12]

5、every / some

every()方法可以判斷數組的所有元素是否滿足測試條件。some()方法可以判斷是否存在元素滿足測試條件。

[1,4,9,12,3].every((item)=>{
	return item>5
}) // false

[1,4,9,12,3].some((item)=>{
	return item>5
}) // true

此外Array對象還提供了很多非常實用的高階函數，例如find(),findIndex(),forEach()…

函數作爲返回值輸出

1、判斷數據的類型

//判斷是否是字符串
let isString = (obj)=>{
	return Object.prototype.toString.call(obj) === '[Object String]'
}
//判斷是否是數組
let isArray = (obj)=>{
	return Object.prototype.toString.call(obj) === '[Object Array]'
}
//判斷是否是數字
let isNumber = (obj)=>{
	return Object.prototype.toString.call(obj) === '[Object Number]'
}

2、getSingle

單例模式，這個我們放到後面再將，後邊會針對這個單獨深入講解。