JavaScript解析機制與閉包原理的示例分析

小編給大家分享一下JavaScript解析機制與閉包原理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

js解析機制：

js代碼解析之前會創建一個如下的詞法環境對象（倉庫）：LexicalEnvironment{ }

在掃描js代碼時會把：

1、用聲明的方式創建的函數的名字;

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

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

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

5、如果用函數表達式的方式創建一個函數：

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

在調用函數的時候如果在函數上面調用就會出現和變量一樣的情況報錯undefined;

這也是以兩種不同方式創建函數的區別;

LexicalEnvironment（這個詞法環境===window）
{
fn： 對函數的一個引用;
b：undefined;
}

用聲明的方式創建的函數：

function fn(){ };

用var定義的變量：

var b=5;

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

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

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

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

閉包：

定義：（有多種定義）

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

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

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

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

什么叫做被引用的自由變量離開了創造它的環境？如下：

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

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

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

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

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

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

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

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

以下代碼說明：

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被調用兩次時，都形成了新的閉包，有各自新的詞法作用域，所以result2的輸出結果不受result1的影響;

函數每調用一次，都會復制一份新的，可以說明for循環里i的問題;

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

自執行函數每調用一次都會復制一份新的，傳進的i值也在變化，由于在函數靜態作用域里，在預解析階段已經確定了變量的作用域，所以子函數引用的父函數變量index只能是每次復制的那個父函數變量，所以就實現了我們想要取不同的i值的目的;

閉包的用途：

1、匿名自執行函數

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

2、結果緩存：

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

3、實現封裝;

4、實現類和繼承（構造函數）;

以上是“JavaScript解析機制與閉包原理的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！