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