閉包


1、什么是閉包閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。

閉包的特點:

1. 作為一個函數變量的一個引用,當函數返回時,其處於激活狀態。

2. 一個閉包就是當一個函數返回時,一個沒有釋放資源的棧區。

簡單的說,Javascript允許使用內部函數---即函數定義和函數表達式位於另一個函數的函數體內。而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時,就會形成閉包。

2、閉包的幾種寫法和用法

第一種寫法:
function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  
  
var c = new Circle(1.0);     
alert(c.area()); 
//這種寫法沒什么特別的,只是給函數添加一些屬性。

 

//第2種寫法  
var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;  
     
   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}  
  
var c = new Circle();  
alert( c.area( 1.0 ) ); 
//這種寫法是聲明一個變量,將一個函數當作值賦給變量。

 

//第3種寫法  
var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  
  
alert( Circle.Area( 1.0 ) ); 
//這種方法最好理解,就是new 一個對象,然后給對象添加屬性和方法。

 

//第4種寫法  
var Circle={  
   "PI":3.14159,  
 "area":function(r){  
          return this.PI * r * r;  
        }  
};  
alert( Circle.area(1.0) );  
//這種方法使用較多,也最為方便。var obj = {}就是聲明一個空的對象。

 

//第5種寫法  
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");  
  
alert( (new Circle()).area(1.0) ); 
//不常用

 總結:第2中和第4中較為常見

3、Prototype

 var dom = function(){
        
    };

    dom.Show = function(){
        alert("Show Message");
    };
    
    dom.prototype.Display = function(){
        alert("Property Message");
    };

    dom.Display(); //error
    dom.Show();  
    var d = new dom();
    d.Display();
    d.Show(); //error

 1、不使用prototype屬性定義的對象方法,是靜態方法,只能直接用類名進行調用!另外,此靜態方法中無法使用this變量來調用對象其他的屬性!
 2、使用prototype屬性定義的對象方法,是非靜態方法,只有在實例化后才能使用!其方法內部可以this來引用對象自身中的其他屬性!

4、作用域

var dom = function(){
        var Name = "Default";
        this.Sex = "Boy";
        this.success = function(){
            alert("Success");
        };
    };

    alert(dom.Name);
    alert(dom.Sex);
答案是兩個都顯示Undefined,這是由於在Javascript中每個function都會形成一個作用域,而這些變量聲明在函數中,所以就處於這個函數的作用域中,外部是無法訪問的。要想訪問變量,
就必須new一個實例出來。

 

var html = {
        Name:'Object',
        Success:function(){
            this.Say = function(){
                    alert("Hello,world");
            };
            alert("Obj Success");
        }
    };

相當於(js的一個語法糖)

var html = new Object();
    html.Name = 'Object';
    html.Success = function(){
            this.Say = function(){
                    alert("Hello,world");
            };
            alert("Obj Success");

 5、js閉包的用途

     匿名自執行函數  

var data= {    
    table : [],    
    tree : {}    
};    
     
(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    
       
})(data);

 我們創建了一個匿名的函數,並立即執行它,由於外部無法引用它內部的變量,因此在函數執行完后會立刻釋放資源,關鍵是不污染全局對象。

 結果緩存

當調用這個函數的時候,首先在緩存中查找,如果找不到,則進行計算,然后更新緩存並返回值,如果找到了,直接返回查找到的值即可。閉包正是可以做到這一點,因為它不會釋放外部的引用,從而函數內部的值可以得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果結果在緩存中    
              return cache[dsid];//直接返回緩存中的對象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新緩存    
           if(count.length > 100){//保正緩存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
     
CachedSearchBox.attachSearchBox("input"); 

 封裝

var person = function(){    
    //變量作用域為函數內部,外部無法訪問    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
     
print(person.name);//直接訪問,結果為undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());    
   
得到結果如下:  
   
undefined  
default  
abruzzi  

 實現類和繼承

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    };   

    var p = new Person();
    p.setName("Tom");
    alert(p.getName());

    var Jack = function(){};
    //繼承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName());

    我們定義了Person,它就像一個類,我們new一個Person對象,訪問它的方法。

   下面我們定義了Jack,繼承Person,並添加自己的方法。

 

參考文獻:https://www.cnblogs.com/yunfeifei/p/4019504.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM