1. 程式人生 > >深入解析Javascript閉包及實現方法

深入解析Javascript閉包及實現方法

開發 選擇 屬性。 ror pla 類名 資料 允許 {}

一、什麽是閉包和閉包的幾種寫法和用法

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閉包及實現方法