JavaScript解析機制與閉包原理實例詳解
本文實例講述了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、在計算機科學中,閉包是詞法閉包的簡稱,是引用了自由變量的函數(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)用一次,就 會復制一份),也就是說形成一個新的詞法作用域,重新引用父函數(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)用一次,都會復制一份新的,可以說明for循環(huán)里i的問題;
for (var i = 0; i < 5; i++) {
(function(index){
oDiv.onclick = function() {
alert(index)
}
})(i)
}
自執(zhí)行函數(shù)每調(diào)用一次都會復制一份新的,傳進的i值也在變化,由于在函數(shù)靜態(tài)作用域里,在預解析階段已經(jīng)確定了變量的作用域,所以子函數(shù)引用的父函數(shù)變量index只能是每次復制的那個父函數(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ù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JavaScript碎片—函數(shù)閉包(模擬面向?qū)ο螅?/a>
- javascript中數(shù)組的常用算法深入分析
- 詳解javascript 變量提升(Hoisting)
- JavaScript使用小插件實現(xiàn)倒計時的方法講解
- JavaScript中常用的簡潔高級技巧總結(jié)
- Javascript之高級數(shù)組API的使用實例
- JavaScript實現(xiàn)預覽本地上傳圖片功能完整示例
- 詳解JavaScript函數(shù)callee、call、apply的區(qū)別
- JavaScript函數(shù)的4種調(diào)用方法實例分析
- Javascript讀寫cookie的實例源碼
相關(guān)文章
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
javascript編程開發(fā)中取色器及封裝$函數(shù)用法示例
這篇文章主要介紹了javascript編程開發(fā)中取色器及封裝$函數(shù),結(jié)合實例形式分析了javascript封裝$函數(shù)及數(shù)值運算、頁面元素動態(tài)操作實現(xiàn)取色器功能相關(guān)技巧,需要的朋友可以參考下2017-08-08
uniapp中實現(xiàn)canvas超出屏幕滾動查看功能
親愛的小伙伴,當你需要在uniapp中使用canvas繪制一個超長圖,就類似于橫向的流程圖時,這個canvas超出屏幕部分拖動屏幕查看會變得十分棘手,怎么解決這個問題呢,下面小編給大家介紹uniapp中實現(xiàn)canvas超出屏幕滾動查看功能,感興趣的朋友一起看看吧2024-03-03

