深入解析Javascript閉包及實現(xiàn)方法

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

1、什么是閉包

閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。閉包的特點：
1. 作為一個函數(shù)變量的一個引用，當函數(shù)返回時，其處于激活狀態(tài)。
2. 一個閉包就是當一個函數(shù)返回時，一個沒有釋放資源的棧區(qū)。
簡單的說，Javascript允許使用內(nèi)部函數(shù)—即函數(shù)定義和函數(shù)表達式位于另一個函數(shù)的函數(shù)體內(nèi)。而且，這些內(nèi)部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內(nèi)部函數(shù)。當其中一個這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時，就會形成閉包。

2、閉包的幾種寫法和用法

首先要明白，在JS中一切都是對象，函數(shù)是對象的一種。下面先來看一下閉包的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());

這種寫法沒什么特別的，只是給函數(shù)添加一些屬性。

//第2種寫法 
var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;  

   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}           //在此我向大家推薦一個前端全棧開發(fā)交流圈：619586920 突破技術(shù)瓶頸，提升思維能力

var c = new Circle();  
alert( c.area( 1.0 ) );

這種寫法是聲明一個變量，將一個函數(shù)當作值賦給變量。

//第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;  
        }                //在此我向大家推薦一個前端全棧開發(fā)交流圈：619586920 突破技術(shù)瓶頸，提升思維能力
};  
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中較為常見，大家可以根據(jù)習慣選擇。

上面代碼中出現(xiàn)了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

我們首先聲明一個變量，將一個函數(shù)賦給他，因為在Javascript中每個函數(shù)都有一個Portotype屬性，而對象沒有。添加兩個方法，分別直接添加和添加打破Prototype上面，來看下調(diào)用情況。分析結(jié)果如下：

1、不使用prototype屬性定義的對象方法，是靜態(tài)方法，只能直接用類名進行調(diào)用！另外，此靜態(tài)方法中無法使用this變量來調(diào)用對象其他的屬性！
2、使用prototype屬性定義的對象方法，是非靜態(tài)方法，只有在實例化后才能使用！其方法內(nèi)部可以this來引用對象自身中的其他屬性！

本次給大家推薦一個免費的學(xué)習圈，里面概括移動應(yīng)用網(wǎng)站開發(fā)，css，html，webpack，vue node angular以及面試資源等。**獲取資料