DIV CSS 佈局教程網

javascript 閉包詳解
編輯:JavaScript綜合知識     

 這篇文章主要詳細介紹了javascript 閉包的相關資料,十分詳盡,需要的朋友可以參考下

   

javascript 閉包是一個很有趣的東東。看了些相關資料http://www.jb51.net/article/29472.htm,對其印象最深刻的是:實現了public 和private。

創建一個非匿名閉包最簡單的語法是:

 

代碼如下:
var obj = (function(){//各種代碼 });

 

閉包最經典的例子:

 

代碼如下:
var makeCounter = (function () {
var i = 1;
this.test=function(){
console.log(i);
i++;
}
return this;
});
var obj = makeCounter();
obj.test(); // 1
obj.test(); // 2
var obj1 = makeCounter();
obj1.test(); // 1
obj1.test(); // 2

 

private 與 public :

 

代碼如下:
var makeCounter= (function () {
var i = 1;
//這貨是private的
function log(){
console.log(i);
i++;
}
//這貨是public的
this.test(){
log();
}
return this;
});
var obj = makeCounter();
obj.test(); // 1
obj.test(); // 2
obj.log(); //undefined

 

自執行函數:

  第一次看到這樣的代碼時的感覺是:好高級;

 

代碼如下:
var obj = (function(window){
//各種代碼
}(window));

 

  然後google了下,發現他們經常都會這樣寫:

 

代碼如下:
var obj= (function () {
var i = 1;
this.test=function(){
console.log(i);
i++;
}
return this;
}());
obj.test(); // 1
obj.test(); // 2

 

最簡單的理解,程序員偷懶把兩步寫成了一步。

 

代碼如下:
//這是一個函數。它應該這樣用obj()
var makeCounter = function () {
//各種代碼
}
//這是一個對象。它類似於 var obj = makeCounter();
var obj = (function () {
//各種代碼
}());

 

  它也可以有參數:

 

代碼如下:
var output = "new test";
var obj = (function (msg) {
this.test = function(){
console.log(msg);
}
return this;
}(output));
obj.test();

 

  它還可以更復雜更高級點:

 

代碼如下:
var output = "new test";
var obj = (function (obj, msg) {
//這貨也是私有的。類似obj.i(!=obj.i),卻又不是obj.i(因為外部不可訪問)。
var i = 1;
//private
function log() {
console.log(i + " : " + msg);
i++;
}
//public
obj.test = function () {
log();
}
return obj;
}(obj, output));
obj.test(); // 1 : new test
obj.i = 100;
//i沒被改變
obj.test(); // 2 : new test

 

初次見面,留下了很深刻的印象。閉包的使用,實現了狀態,屬性的保持;避免了全局變量滿屏飛舞;結束了變量老是被重定義,重賦值的尴尬局面。它還可以將一個對象分部到多個js文件。實在是太好了。

上面所述就是本文的全部內容了,希望大家能夠喜歡。

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