深入解析JavaScript解析機制與閉包原理實例

篇文章主要介紹了JavaScript解析機制與閉包原理,結合實例形式詳細分析了javascript解析機制相關概念、功能、用法以及閉包的原理、定義、使用方法,寫的十分的全面細致,具有一定的參考價值,對此有需要的朋友可以參考學習下。愛掏網 - it200.com如有不足之處,歡迎批評指正。愛掏網 - it200.com

js解析機制:
js代碼解析之前會創建一個如下的詞法環境對象(倉庫):LexicalEnvironment{ }
在掃描js代碼時會把:

  • 1、用聲明的方式創建的函數的名字;
  • 2、用var定義的變量的名字存到這個詞法環境中;
  • 3、同名的時候:函數聲明會覆蓋變量,下面的函數聲明會覆蓋上面的同名函數;
  • 4、函數的值為:對函數的一個引用; 變量的值為undefined;
  • 5、如果用函數表達式的方式創建一個函數:
    var fn = function(){ } 這樣詞法環境中存的是一個變量名fn,并賦值為undefined;
    在調用函數的時候如果在函數上面調用就會出現和變量一樣的情況報錯undefined;
    這也是以兩種不同方式創建函數的區別;
    //在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
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、在計算機科學中,閉包是詞法閉包的簡稱,是引用了自由變量的函數,這個被引用的自由變量將和這個函數一同存在,即使已經離開了創造它的環境也不例外(意思就是不會被銷毀)。愛掏網 - it200.com
3、閉包是由函數和其相關的引用環境組合而成的實體。愛掏網 - it200.com(潛臺詞就是這個函數將和引用環境同時存在,必須有引用)
綜合來說,不管怎么定義都是在圍繞著兩個本質:函數在引用變量,這個變量將不會被銷毀。愛掏網 - it200.com
什么叫做被引用的自由變量離開了創造它的環境?如下:

function fn(){
  var a = 10;
  var b = 20;
  return function fn2(){
    alert(a);
  }
}//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
var result = fn();
result();//10;

以上代碼就是fn2在被return出去以后,離開了fn函數這個環境,但是在外部調用依然能夠訪問到fn的變量;
這就是被引用的變量不會被銷毀;同理在自執行函數這個閉包里,雖然自執行函數在自身執行過后內部變量本該被垃圾回收機制所回收,但是由于其內部有引用它的變量的子函數,也就是說構成了閉包,它的變量依然不會被銷毀;

由此可見閉包的一個作用就是:我們能夠通過閉包的方法來在外部訪問到一個內部函數的變量;
很多人在解釋閉包的時候都會把子函數return出去以后在外部調用,其實無論在哪里調用,閉包都已經形成了,只要是函數嵌套函數,并且子函數引用了父函數的變量,(不論子函數有沒有被調用,這個用一種方法證明:在子函數內部打斷點,在f12中觀察閉包里的內容,已經出現了引用函數,這時候調用還沒有被執行)這個時候閉包已經形成了。愛掏網 - it200.com
閉包的本質:就是形成了作用域鏈。愛掏網 - it200.com
//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
注意:形成閉包的條件: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 

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

1、匿名自執行函數

不污染全局變量,(否則被聲明為全局變量的話別的函數可能誤用這些變量;造成全局對象過于龐大,影響訪問速度(因為變量的取值是需要從原型鏈上遍歷的)。愛掏網 - it200.com提高效率;
//在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力
2、結果緩存:

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

3、實現封裝;

4、實現類和繼承(構造函數);

結語

感謝您的觀看,如有不足之處,歡迎批評指正。愛掏網 - it200.com
獲取資料

聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
發表評論
更多 網友評論0 條評論)
暫無評論

返回頂部

主站蜘蛛池模板: 亚洲欧洲中文日产| 国产精品手机在线| 全免费一级午夜毛片| 中文字幕日韩人妻不卡一区| 五月婷婷中文字幕| 青青青青久久久久国产| 精品国产一区AV天美传媒| 日本不卡在线观看| 国产亚洲婷婷香蕉久久精品 | 国产精品美女网站在线看| 亚洲福利电影一区二区?| 99久久精品免费看国产| 波多野结衣电影thepemo| 国内精品伊人久久久久777| 亚洲理论电影在线观看| 91精品国产亚洲爽啪在线影院 | xxxx黑人da| 韩国精品一区二区三区无码视频 | 欧美系列第一页| 国产精品综合色区在线观看| 亚洲免费视频网| 精品一久久香蕉国产二月| 日韩免费小视频| 国产产一区二区三区久久毛片国语| 久久久xxxx| 精品视频一区二区三三区四区| 小说专区亚洲春色校园| 伊人久久大香线蕉电影院| 91精品国产91久久综合| 欧美一级欧美一级高清| 国产剧情片视频资源在线播放| 久久久久久久无码高潮| 精品国产亚洲一区二区三区| 天堂√在线中文最新版8| 亚洲欧洲日产国码AV系列天堂| 黄色香蕉视频网站| 无码办公室丝袜OL中文字幕 | 97人人模人人爽人人少妇| 欧美式free群乱| 国产人澡人澡澡澡人碰视频| 两个人在线观看的高清|