DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js學習之----深入理解閉包
js學習之----深入理解閉包
編輯:JavaScript基礎知識     

閉包算是js裡面比較不容易理解的點,尤其是對於沒有編程基礎的人來說。

其實閉包要注意的就那麼幾條,如果你都明白了那麼征服它並不是什麼難事兒。下面就讓我們來談一談閉包的一些基本原理。

 閉包的概念

一個閉包就是一個函數和被創建的函數中的作用域對象的組合。(作用域對象下面會說)

通俗一點的就是 “ 只要一個函數中嵌套了一個或多個函數,那麼我們就可以稱它們構成了閉包。 ”

類似這樣:

function A() {
 var i = 5;
 return function() {
  console.log('i = '+i);
 }
}

var a = A();
a(); // i = 5

閉包的原理

1、外部函數的局部變量若會被閉包函數調用就不會在外部函數執行完畢之後立即被回收。

我們知道,不管什麼語言,操作系統都會存在一個垃圾回收機制,將多余分配的空間回收掉以便減小內存。而一個函數的生命周期的是從調用它開始的,在函數調用完畢的時候函數內部的局部變量等都會被回收機制回收。

我們拿上述例子來說,當我們的外部函數A調用完畢時,A中的局部變量i按理說就會被操作系統回收而不存在,但是當我們用了閉包結果就不是那樣了,i並不會被回收。試想,如果i被回收了那麼返回的函數裡面豈不是就是打印undefined了?

i為什麼沒有被回收?

在javascript執行一個函數的時候都會創建一個作用域對象,將函數中的局部變量(函數的形參也是局部變量)保存進去,伴隨著那些傳入函數的變量一起被初始化。

所以當調用A的時候就創建了一個作用域對象,我們姑且稱之為Aa,那麼這個Aa應該是這樣的: Aa { i: 5; };  在A函數返回一個函數之後,A執行完畢。Aa對象本應該被回收,但是由於返回的函數使用了Aa的屬性i,所以返回的函數保存了一個指向Aa的引用,所以Aa不會被回收。

所以理解作用域對象,就能理解為什麼函數的局部變量在遇到閉包的時候不會在函數調用完畢時立即被回收了。

再來個例子:

function A(age) {
 var name = 'wind';
 var sayHello = function() {
  console.log('hello, '+name+', you are '+age+' years old!');
 };
 return sayHello;
}
var wind = A(20);
wind(); // hello, wind, you are 20 years old!

你能說出的它的作用域對象Ww是什麼嗎?

Ww{ age: 20; name: 'wind'; };

2、每調用一次外部函數就產生一個新的閉包,以前的閉包依舊存在且互不影響。

3、同一個閉包會保留上一次的狀態,當它被再次調用時會在上一次的基礎上進行。

每調用一次外部函數產生的作用域對象都不一樣,你可以這樣想,上面的例子,你每次傳入的參數age不一樣,所以就每次生成的對象不一樣。

每調用一次外部函數那麼就會生成一個新的作用域對象。

function A() {
 var num = 42;
 return function() { console.log(num++); }
}
var a = A();
a(); // 42
a(); // 43

var b = A(); // 重新調用A(),形成新閉包
b(); // 42   

這個代碼讓我們發現了兩個事情,一、當我們連續調用兩次a();,num會在原基礎上自加。說明同一個閉包會保留上一次的狀態,當它被再次調用時會在上一次的基礎上進行。 二、我們的b();的結果為42,說明它是一個新的閉包,並且不受其他閉包的影響。

我們可以這樣想,就好比我們吹肥皂泡一樣,我每次吹一下(調用外部函數),就會產生一個新的肥皂泡(閉包),多個肥皂泡可以同時存在且兩個肥皂泡之間不會相互影響。

4、在外部函數中存在的多個函數 “ 同生共死 ”

以下三個函數被同時聲明並且都可以對作用域對象的屬性(局部變量)進行訪問與操作。

var fun1, fun2, fun3;
function A() {
 var num = 42;
 fun1 = function() { console.log(num); }
 fun2 = function() { num++; }
 fun3 = function() { num--; } 
}

A();
fun1();  // 42
fun2(); 
fun2(); 
fun1();  // 44
fun3(); 
fun1();  //43

var old = fun1;

A(); 
fun1();  // 42
old();  // 43  上一個閉包的fun1()

由於函數不能有多個返回值,所以我用了全局變量。我們再次可以看出在我們第二次調用A()時產生了一個新的閉包。

當閉包遇到循環變量

當我們說到閉包就不得不說當閉包遇到循環變量這一種情況,看如下代碼:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var item = 'item' + i;
    result.push( function() {console.log(item + ' ' + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item2 undefined
fnlist[1](); // item2 undefined
fnlist[2](); // item2 undefined

怎麼會這樣呢?我們預想的三個輸出應該是 item0 1,  item1 2,  item2 3。為什麼結果卻是返回的result數組裡面存儲了三個 item2 undefined ?

原來當閉包遇到循環變量時都是循環結束之後統一保存變量值,拿我們上面的例子來說,i是循環變量,當循環全部結束的時候i正好是i++之後的3,而arr[3]是沒有值的,所以為undefined,有人會疑惑:為什麼item的值是item2,難道不應該是item3嗎?注意,在最後一次循環的時候也就是i = 2的時候,item的值為item2,當i++,i = 3循環條件不滿足循環結束,此時的item的值已經定下來了,所以此時的arr[i]為arr[3],而item為item2。這樣能理解嗎?如果我們將代碼改成這樣那就說得通了:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) { 
    result.push( function() {console.log('item' + i + ' ' + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[1](); // item3 undefined

那麼問題來了,如何改正呢?且看代碼:

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    result.push( (function(n) {
      return function() {
       var item = 'item' + n;
       console.log(item + ' ' + arr[n]);
      }
    })(i));
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item0 1
fnlist[1](); // item1 2
fnlist[2](); // item2 3

我們可以用一個自執行函數將i綁定,這樣i的每一個狀態都會被存儲,答案就和我們預期的一樣了。

所以以後在使用閉包的時候遇到循環變量我們要習慣性的想到用自執行函數來綁定它。

以上就是我對閉包的理解,如果有什麼意見或建議希望我們能在評論區多多交流。感謝,共勉。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved