深入解析Javascript閉包及實現方法
1、什麽是閉包
閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。閉包的特點:
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; } //在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力 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; } //在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力 }; 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來引用對象自身中的其他屬性!
本次給大家推薦一個免費的學習圈,裏面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。**獲取資料
深入解析Javascript閉包及實現方法