閉包,官方對閉包的解釋是:一個擁有許多變數和綁定了這些變數的環境的
表達式(通常是一個函數),因而這些變數也是該表達式的一部分。閉包的特點:1. 作為一個函數變數的一個引用,當函數返回時,其處於激活狀態
。 2. 一個閉包就是當一個函數回傳時,一個沒有釋放資源的堆疊區。 簡單的說,Javascript允許使用
內部函數
—即函數定義和函數表達式位於另一個函數的函數體內。而且,這些內部函數可以存取它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被呼叫時,就會形成閉包。 2、閉包的幾種寫法和用法
首先要明白,在JS中一切都是
物件,函數是物件的一種。下面先來看看閉包的5種寫法,簡單理解一下什麼是閉包。後面會具體解釋。 //第1种写法
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 ) );
。
//第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中較為常見,大家可以依照習慣選擇。
上面程式碼中出現了JS中常用的Prototype,那麼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
我們先宣告一個變量,將一個函數賦給他,因為在Javascript中每個函數都有一個Portotype屬性,而物件沒有。新增兩個方法,分別直接新增和新增打破Prototype上面,來看下呼叫情況。分析結果如下:
1、不使用prototype屬性定義的物件方法,是靜態
方法,只能直接用類別名稱進行呼叫!另外,此靜態方法中無法使用this變數來呼叫物件其他的屬性!2、使用prototype屬性定義的物件方法,是非靜態方法,只有在實例化後才能使用!其方法內部可以this來引用物件自身中的其他屬性!
下面我們再來看一段程式碼:var dom = function(){
var Name = "Default";
this.Sex = "Boy";
this.success = function(){
alert("Success");
};
};
alert(dom.Name);
alert(dom.Sex);
var html = { Name:'Object', Success:function(){ this.Say = function(){ alert("Hello,world"); }; alert("Obj Success"); } };
再來看看這種寫法,其實這是Javascript的一個”語法糖”,這種寫法相當於:
var html = new Object(); html.Name = 'Object'; html.Success = function(){ this.Say = function(){ alert("Hello,world"); }; alert("Obj Success");
變數html是一個對象,不是函數,所以沒有Prototype屬性,其方法也都是公有方法,html不能被實例化。否則會出現如下錯誤:
但是他可以作為值賦給其它變量,如var o = html; 我們可以這樣使用它:
alert(html.Name); html.Success();
說到這裡,完了嗎?細心的人會問,怎麼訪問Success方法中的Say方法呢?是html.Success.Say()嗎? 當然不是,上面剛說過由於作用域的限制,是無法存取的。所以要用下面的方法來存取:
var s = new html.Success(); s.Say(); //还可以写到外面 html.Success.prototype.Show = function(){ alert("HaHa"); }; var s = new html.Success(); s.Show();
關於Javascript作用域的問題,不是一兩句能說清楚的,有興趣的大家可以上網找些資料看看。
事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。
1、匿名自执行函数
我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,
比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一次,其内部变量无需维护,
比如UI的初始化,那么我们可以使用闭包:
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);
我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,关键是不污染全局对象。
2、结果缓存
我们开发中会碰到很多情况,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,
那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。
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");
这样我们在第二次调用的时候,就会从缓存中读取到该对象。
3、封装
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
4、实现类和继承
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,并添加自己的方法。
以上是具體介紹Javascript閉包深入解析及程式碼實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!