深入解析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以及面試資源等。**獲取資料