(轉）帶你一分鐘了解閉包--js面向對象程式設計

先看一段代碼：

複制代碼

function a(){

 var n = 0;

 function inc() {

 n++;

 console.log(n);

 }

 inc(); 

 inc(); 

}      

a(); //控制台輸出1，再輸出2

複制代碼

簡單吧。再來看一段代碼：

複制代碼

function a(){

 var n = 0;

 this.inc = function () {

 n++; 

 console.log(n);

 };

}

var c = new a();

c.inc(); //控制台輸出1

c.inc(); //控制台輸出2      

有權通路另一個函數作用域内變量的函數都是閉包。這裡 inc 函數通路了構造函數 a 裡面的變量 n，是以形成了一個閉包。

再來看一段代碼：

複制代碼

function a(){

 var n = 0;

 function inc(){

 n++; 

 console.log(n);

 }

 return inc;

}      

var c = a();

c(); //控制台輸出1

c(); //控制台輸出2

複制代碼

看看是怎麼執行的：

var c = couter()，這一句 couter()傳回的是函數 inc，那這句等同于 var c = inc;

c()，這一句等同于 inc(); 注意，函數名隻是一個辨別（指向函數的指針），而()才是執行函數。

後面三句翻譯過來就是： var c = inc; inc(); inc();，跟第一段代碼有差別嗎？ 沒有。

什麼是閉包？這就是閉包！

所有的教科書教程上都喜歡用最後一段來說明閉包，但我覺得這将問題複雜化了。這裡面傳回的是函數名，沒看過譚浩強C/C++程式設計的同學可能一下子沒反應出帶不帶()的差別，也就是說這種寫法自帶一個陷阱。雖然這種寫法更顯高大上，但我還是喜歡将問題單一化，看看代碼 1 和代碼 2，你還會糾結函數的調用，你會糾結 n 的值嗎？

為啥要這樣寫？

我們知道，js的每個函數都是一個個小黑屋，它可以擷取外界資訊，但是外界卻無法直接看到裡面的内容。将變量 n 放進小黑屋裡，除了 inc 函數之外，沒有其他辦法能接觸到變量 n，而且在函數 a 外定義同名的變量 n 也是互不影響的，這就是所謂的增強“封裝性”。

而之是以要用 return 傳回函數辨別 inc，是因為在 a 函數外部無法直接調用 inc 函數，是以 return inc 與外部聯系起來，代碼 2 中的 this 也是将 inc 與外部聯系起來而已。

常見的陷阱

看看這個：

複制代碼

function createFunctions(){

 var result = new Array();

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

 result[i] = function(){

 return i;

 };

 }

 return result;

}

var funcs = createFunctions();

for (var i=0; i < funcs.length; i++){

 console.log(funcs[i]());

}      

複制代碼

乍一看，以為輸出 0~9 ，萬萬沒想到輸出10個10？

這裡的陷阱就是：函數帶()才是執行函數！ 單純的一句 var f = function() { alert('Hi'); }; 是不會彈窗的，後面接一句 f(); 才會執行函數内部的代碼。上面代碼翻譯一下就是：

複制代碼

var result = new Array(), i;

result[0] = function(){ return i; }; //沒執行函數，函數内部不變，不能将函數内的i替換！

result[1] = function(){ return i; }; //沒執行函數，函數内部不變，不能将函數内的i替換！

...

result[9] = function(){ return i; }; //沒執行函數，函數内部不變，不能将函數内的i替換！

i = 10;

funcs = result;

result = null;


console.log(i); // funcs[0]()就是執行 return i 語句，就是傳回10

console.log(i); // funcs[1]()就是執行 return i 語句，就是傳回10

...

console.log(i); // funcs[9]()就是執行 return i 語句，就是傳回10