JavaScript設計模式基礎之閉包(終)

閉包設計模式 JavaScript · 發表 2018-09-24 14:46:00

摘要：對於前端程式員來說閉包還是比較難以理解的，閉包的形成與變數的作用域以及變數的生產週期密切相關，所以要先弄懂變數的作用域和生存週期。 1.變數作用域變數的作用域，就是指變數的有效範圍，通常我們指的作用域就是函式作用域（畢竟全域性的作用域沒有要指的意義，關鍵哪都能訪問）宣告變...

對於前端程式員來說閉包還是比較難以理解的，

閉包的形成與變數的作用域以及變數的生產週期密切相關，所以要先弄懂變數的作用域和生存週期。

1.變數作用域

變數的作用域，就是指變數的有效範圍，通常我們指的作用域就是函式作用域（畢竟全域性的作用域沒有要指的意義，關鍵哪都能訪問）

宣告變數的時候推薦使用es6語法中的let 和const 可以避免var宣告變量出現的一些不必要的錯誤而且let宣告變數只作用於當前作用域避免使用不帶var 或者let直接宣告變數，可能會導致命名衝突。

2.變數生存週期

除了變數作用域之外，另外一個跟閉包有關的概念就是變數生存週期。

對於全域性變數來說，它的生存週期就是永久，除非我們主動銷燬它，而對於函式裡面宣告的變數來說它的生存週期會隨著函式呼叫解釋而被銷燬。

閉包的定義：最簡單直白的說法就是函式返回函式

閉包的應用：封裝私有變數、延續區域性變數的壽命

1.封裝私有變數：

使用閉包可以把一些不需要暴露在全域性的變數封裝成“私有變數”

如有一個計算陣列偶數乘積的方法：

let num = function(arr){
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return a;
}

console.log( num([1,2,3,4]));//輸出8

加入快取機制提高函式效能：

let cache = {};
let num = function(arr){
let args = Array.prototype.join.call(arr,',');//輸出1,2,3,4
console.log(cache[args])//第一次呼叫輸出為undefined進行下一步計算 第二次呼叫輸出8 直接返回
//傳入相同引數就比不必進行計算 直接返回快取提高效能
if(cache[args]){
return cache[args];
}
//不是相同引數則進行計算
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return cache[args] = a;
}

console.log( num([1,2,3,4]));//8 進行計算
console.log( num([1,2,3,4]));//8 返回快取

這明顯能看到cache這個快取變數只在num函式裡面被使用，與其讓它們一起暴露在全域性不然把它封裝在num函式內部，減少頁面中的全域性變數，以免該變數在其他地方被修改而引發錯誤

封裝後代碼如下：

let num = (function(){
let cache = {};
return function(arr){
let args = Array.prototype.join.call(arr,',');//輸出1,2,3,4
console.log(cache[args])//第一次呼叫輸出為undefined進行下一步計算 第二次呼叫輸出8 直接返回
//傳入相同引數就比不必進行計算 直接返回快取提高效能
//判斷cache快取物件裡面有args這個key值沒
if(args in cache){
return cache[args];
}
//不是相同引數則進行計算
let a = 1;
for(let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0){
a *= arr[i];
}
}
return cache[args] = a;
}

})();

console.log( num([1,2,3,4]));//8 進行計算
console.log( num([1,2,3,4]));//8 返回快取

2.延續區域性變數壽命

src屬性會自動請求伺服器資料如下

let report = function(src){
let img = new Image();
img.src = src;
console.log(img.src);
}
report(`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537779456907&di=c72dd79d1dbb02bb9340743bf08e99f7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F94cad1c8a786c91723e93522c43d70cf3ac757c6.jpg`);

但是一些低版本的瀏覽器實現存在著bug，在這些瀏覽器上面使用該函式會丟失資料因為函式呼叫結束後變數銷燬我們可以用閉包封閉起來就能解決低版本瀏覽器bug

程式碼如下：

let report = (function(){
let imgs = [];
return function(src){
let img = new Image();
imgs.push(img);
img.src = src;
}

})()
report(`https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537779456907&di=c72dd79d1dbb02bb9340743bf08e99f7&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F94cad1c8a786c91723e93522c43d70cf3ac757c6.jpg`);

接下來要來點乾貨了

用閉包實現命令模式：

在JavaScript中閉包的各種設計模式實現裡面，閉包的運用特別廣泛，在我後續的部落格中將體會到這一點

簡單編寫一段閉包實現命令模式如果上述的閉包使用你基本會了的話不會對我們的理解造成困難

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="start">開啟電腦</button>
<button id="end">關閉電腦</button>
<script>
//命令
let Computer = {
open(){
alert('開啟電腦');
},
close(){
alert('關閉電腦');
}
}
//建立命令執行中介
let createCommand = function(receiver){
//執行
let execute = function(){
return receiver.open();
}
//關閉
let undo = function(){
return receiver.close();
}
return {
execute,
undo
}
};
//設定執行命令者
let setCommand = function(command){
document.querySelector('#start').onclick = function(){
command.execute();//輸出開啟電腦
}
document.querySelector('#end').onclick = function(){
command.undo();//輸出關閉電腦
}
}
//傳入命令方法 傳入執行中介 
setCommand(createCommand(Computer));
</script>
</body>
</html>

程式碼還是不難重在理解

JavaScript設計模式基礎之閉包(終)

您可能也會喜歡…