js閉包實例匯總_基礎知識

Js閉包
閉包前要了解的知識
1. 函數作用域
(1).Js語言特殊之處在於函數內部可以直接讀取全域變數

複製程式碼 程式碼如下:

如果在php裡

複製程式碼 程式碼如下:

$n=100;
function parent(){
  echo $n;
}
parent();//會報錯 n未定義
?>

(2).在函數外部無法讀取函數內的局部變數

複製程式碼 程式碼如下:

注意函數內部宣告變數時一定要加var,否則就宣告了一個全域變數

複製程式碼 程式碼如下:

function parent(){
m=50;
}
parent();
alert(m);//50

//當然在php裡更是如此了，

複製程式碼 程式碼如下:

function parent(){
  global $m;//全域 ，定義與賦值要分開
  $m=50;
}
parent();
echo $m;//50
?>
//沒global的話，一樣會報沒定義的錯誤

有時，需要得到函數內部的的局部變量，就需要變通的方法實現利用js變量作用域的特點，如在函數內部定義子函數，對於子函數來說，父函數就是它的全局，子函數可以存取父函數裡的變數(對於整個js程式碼來說又是局部變數)

複製程式碼 程式碼如下:

Parent內部所有局部變數對其子函數來說都是可見的,但其子函數內的局部變數對其父函數是不可見的，這就是js特有的鍊式作用域結構,子物件會一級一級地向上查找所有父對象的變數,父對象的所有變數對子對像都是可見的，反之不成立！上面的son函數就是閉包
有些同學可能這樣

複製程式碼 程式碼如下:

function parent(){
   var m=50;
   function son(){
        alert(m);
   }
}
parent();
son()//會報 函數son未定義

注意 在javascript裡，在函數裡宣告的函數都是局部的，函數運行完後就釋放了
注意這點與php的差別

複製程式碼 程式碼如下:

function parent(){
  function son(){
      $m=50;
      echo $m;
  }
}
parent();
son();//輸出50 不會報錯
?>

閉包

函數內部定義函數，連接函數內部和外部的橋樑
閉包的作用有2個:
一是前面提到的讀取函數內部的變量，
二是讓這些變數的值保存在記憶體中，實現資料共享
下面是幾個閉包的例子

複製程式碼 程式碼如下:

把匿名函數的執行結果(即對裡面子函數的宣告賦給全域變數cut),i就保存在記憶體裡了
執行cut()時就直接從內存取值了,i只有cnt()函數才能調用，直接alert(i)是不行的
還可以向閉包內傳參

複製程式碼 程式碼如下:

var cnt=(function(num){
return function(){
    alert(num);
    num ;
  }
})(5);
cnt();//5
cnt();//6
cnt();//7
//當然還可以呼叫時傳參
var cnt=(function(){
    var i=0;
return function(num){
    num =i;
    alert(num);
    i ;
  }
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

為了對閉包有更好的理解，我們看以下程式碼
例如我想回傳一個數組，數組裡面有5個函數，第一個函數彈出0，第二個彈出1... 
程式碼如果這樣寫

複製程式碼 程式碼如下:

function box(){
  var arr=[];
  for(i=0;i       arr=function(){return i;}
    }
return arr;  
}
var a=box();
alert(a);//包含五個函數體的陣列
alert(a[0]());
alert(a[1]());

彈出的函數體
function(){return i;}    }
最後這個i是4,之後 成為5
For循環停止
發現均彈出5，明顯不符合我們的要求

解1
自我即時執行裡面的函數

複製程式碼 程式碼如下:

function box(){
  var arr=[];
  for(i=0;i       arr=(function(num){return i;})(i);
    }
return arr;  
}
var a=box();
for(var i=0;i   alert(a);
}

但是我們發現 傳回的陣列裡的元素是函數執行的結果，但我們想要的是函數有得升級我們的程式碼

解2
閉包實現

複製程式碼 程式碼如下:

function box(){
var arr=[];
        for(var i=0;i

                 arr=(function(num){
                     return function(){return num;}
                 })(i);

         }
return arr;        
}

var arr=box();

for(var i=0;i

    alert(arr());//0,1,2,3,4
}

關鍵程式碼

複製程式碼 程式碼如下:

arr=(function(num){
         return function(){return num;}
})(i);

i=0 時
arr[0]=(function(num){return function(){return num;}})(0);

1時

arr[1]=(function(num){return function(){return num;}})(1); 

  以上就是閉包的好處！非常簡單實用吧。