本文實例講述了JavaScript解析機制與閉包原理。分享給大家供大家參考，具體如下：

js解析機制：

js代碼解析之前會創(chuàng)建一個如下的詞法環(huán)境對象（倉庫）：LexicalEnvironment{ }

在掃描js代碼時會把：

1、用聲明的方式創(chuàng)建的函數(shù)的名字;

2、用var定義的變量的名字存到這個詞法環(huán)境中;

3、同名的時候：函數(shù)聲明會覆蓋變量，下面的函數(shù)聲明會覆蓋上面的同名函數(shù);

4、函數(shù)的值為：對函數(shù)的一個引用; 變量的值為undefined;

5、如果用函數(shù)表達式的方式創(chuàng)建一個函數(shù)：

var fn = function(){ } 這樣詞法環(huán)境中存的是一個變量名fn，并賦值為undefined;

在調(diào)用函數(shù)的時候如果在函數(shù)上面調(diào)用就會出現(xiàn)和變量一樣的情況報錯undefined;

這也是以兩種不同方式創(chuàng)建函數(shù)的區(qū)別;

LexicalEnvironment（這個詞法環(huán)境===window）
{
fn： 對函數(shù)的一個引用;
b：undefined;
}

用聲明的方式創(chuàng)建的函數(shù)：

function fn(){ };

用var定義的變量：

var b=5;

每次調(diào)用函數(shù)的時候就會創(chuàng)建一個新的詞法環(huán)境對象（倉庫）：LexicalEnvironment{ };
在解析函數(shù)內(nèi)部的變量和函數(shù)聲明的時候跟全局詞法環(huán)境相同，不過有兩點需要注意，如下：

LexicalEnvironment（這個詞法環(huán)境===fn）
{
a：對函數(shù)的一個引用;（解析的時候函數(shù)聲明把變量覆蓋了，盡管變量已經(jīng)被賦值為1）
b：2;（解析的時候把變量存在了詞法環(huán)境里，同時賦值為2）
}

function fn (a，b){
  alert(a)// function a(){ }
  alert(b)//2
  var b= 100;
  function a(){ }
}
fn(1,2);

調(diào)用函數(shù)并傳遞參數(shù)的時候，詞法環(huán)境里會再存變量名的同時賦值，如果是函數(shù)內(nèi)部有同名的函數(shù)聲明則會把傳入的參數(shù)覆蓋;如果形參只有一個，那么另一個實參則被賦值為undefined;

閉包：

定義：（有多種定義）

1、（比較通俗的定義）：函數(shù)嵌套函數(shù)，內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量，這些參數(shù)和變量不會被垃圾回收機制所回收;

2、在計算機科學(xué)中，閉包是詞法閉包的簡稱，是引用了自由變量的函數(shù)，這個被引用的自由變量將和這個函數(shù)一同存在，即使已經(jīng)離開了創(chuàng)造它的環(huán)境也不例外（意思就是不會被銷毀）。

3、閉包是由函數(shù)和其相關(guān)的引用環(huán)境組合而成的實體。（潛臺詞就是這個函數(shù)將和引用環(huán)境同時存在，必須有引用）

綜合來說，不管怎么定義都是在圍繞著兩個本質(zhì)：函數(shù)在引用變量，這個變量將不會被銷毀。

什么叫做被引用的自由變量離開了創(chuàng)造它的環(huán)境？如下：

function fn(){
  var a = 10;
  var b = 20;
  return function fn2(){
    alert(a);
  }
}
var result = fn();
result();//10;

以上代碼就是fn2在被return出去以后，離開了fn函數(shù)這個環(huán)境，但是在外部調(diào)用依然能夠訪問到fn的變量;

這就是被引用的變量不會被銷毀;同理在自執(zhí)行函數(shù)這個閉包里，雖然自執(zhí)行函數(shù)在自身執(zhí)行過后內(nèi)部變量本該被垃圾回收機制所回收，但是由于其內(nèi)部有引用它的變量的子函數(shù)，也就是說構(gòu)成了閉包，它的變量依然不會被銷毀;

由此可見閉包的一個作用就是：我們能夠通過閉包的方法來在外部訪問到一個內(nèi)部函數(shù)的變量;

很多人在解釋閉包的時候都會把子函數(shù)return出去以后在外部調(diào)用，其實無論在哪里調(diào)用，閉包都已經(jīng)形成了，只要是函數(shù)嵌套函數(shù)，并且子函數(shù)引用了父函數(shù)的變量，（不論子函數(shù)有沒有被調(diào)用，這個用一種方法證明：在子函數(shù)內(nèi)部打斷點，在f12中觀察閉包里的內(nèi)容，已經(jīng)出現(xiàn)了引用函數(shù)，這時候調(diào)用還沒有被執(zhí)行）這個時候閉包已經(jīng)形成了。

閉包的本質(zhì)：就是形成了作用域鏈。

注意：形成閉包的條件：1、函數(shù)要嵌套;2、子函數(shù)要引用父函數(shù)的變量（如果沒有引用，則不會形成閉包，如果是引用父函數(shù)的父函數(shù)的變量也會形成閉包）;

父函數(shù)每調(diào)用一次，就會形成一個新的閉包（函數(shù)每調(diào)用一次，就 會復(fù)制一份），也就是說形成一個新的詞法作用域，重新引用父函數(shù)的變量;

以下代碼說明：

function fn() {
  var num = 1;
  return function() {
    num++;
    alert(num);
  }
}
var result1 = fn();
result1();//2;
result1();//3;
var result2 = fn();
result2();//2;
result2();//3;

在fn被調(diào)用兩次時，都形成了新的閉包，有各自新的詞法作用域，所以result2的輸出結(jié)果不受result1的影響;

函數(shù)每調(diào)用一次，都會復(fù)制一份新的，可以說明for循環(huán)里i的問題;

for (var i = 0; i < 5; i++) {
  (function(index){
    oDiv.onclick = function() {
      alert(index)
    }
  })(i)
}

自執(zhí)行函數(shù)每調(diào)用一次都會復(fù)制一份新的，傳進的i值也在變化，由于在函數(shù)靜態(tài)作用域里，在預(yù)解析階段已經(jīng)確定了變量的作用域，所以子函數(shù)引用的父函數(shù)變量index只能是每次復(fù)制的那個父函數(shù)變量，所以就實現(xiàn)了我們想要取不同的i值的目的;

閉包的用途：

1、匿名自執(zhí)行函數(shù)

不污染全局變量，（否則被聲明為全局變量的話別的函數(shù)可能誤用這些變量;造成全局對象過于龐大，影響訪問速度(因為變量的取值是需要從原型鏈上遍歷的)。提高效率;

2、結(jié)果緩存：

我們開發(fā)中會碰到很多情況，設(shè)想我們有一個處理過程很耗時的函數(shù)對象，每次調(diào)用都會花費很長時間利用閉包，它不會釋放外部的引用，從而函數(shù)內(nèi)部的值可以得以保留。，這樣我們在第二次調(diào)用的時候，就會從緩存中讀取到該資源。

3、實現(xiàn)封裝;

4、實現(xiàn)類和繼承（構(gòu)造函數(shù)）;

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論