JS閉包用法實(shí)例分析
本文實(shí)例講述了JS閉包用法。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> // 第一,函數(shù)作為返回值 function fn(){ var max = 10; return function bar(x){ if(x > max) { console.log(x); } }; } var f1 = fn(); f1(15); </script> <script type="text/javascript"> // 第二,函數(shù)作為參數(shù)被傳遞 var max = 10; fn = function(x){ if(x > max){ console.log(x);//15 } }; (function(f){ var max = 100; f(15); })(fn); </script> <script> function fn(){ var max = 10; return function bar(x){ if(if > max){ console.log(x); } }; } var f1 = fn(); max = 100; f1(15); </script> </body> </html>
第一步,代碼執(zhí)行前生成全局上下文環(huán)境,并在執(zhí)行時(shí)對(duì)其中的變量進(jìn)行賦值。此時(shí)全局上下文環(huán)境是活動(dòng)狀態(tài)。
全局上下文環(huán)境:max是undefined
第二步,執(zhí)行var f1 = fn();代碼時(shí),調(diào)用fn(),產(chǎn)生fn()執(zhí)行上下文環(huán)境,壓棧,并設(shè)置為活動(dòng)狀態(tài)。
fn()上下文環(huán)境:max是10
第三步,執(zhí)行完var f1 = fn();,fn()調(diào)用完成。按理說應(yīng)該銷毀掉fn()的執(zhí)行上下文環(huán)境,但是這里不能這么做。
注意,重點(diǎn)來了:因?yàn)閳?zhí)行fn()時(shí),返回的是一個(gè)函數(shù)。函數(shù)的特別之處在于可以創(chuàng)建一個(gè)獨(dú)立的作用域。
而正巧合的是,返回的這個(gè)函數(shù)體中,還有一個(gè)自由變量max要引用fn作用域下的fn()上下文環(huán)境中的max。
因此,這個(gè)max不能被銷毀,銷毀了之后bar函數(shù)中的max就找不到值了。因此,這里的fn()上下文環(huán)境不能被銷毀,還依然存在與執(zhí)行上下文棧中。
執(zhí)行到max = 100;時(shí),全局上下文環(huán)境將變?yōu)榛顒?dòng)狀態(tài),但是fn()上下文環(huán)境依然會(huì)在執(zhí)行上下文棧中。
另外,執(zhí)行完max = 100;,全局上下文環(huán)境中的max被賦值為100。
全局上下文環(huán)境:max是100 fn()上下文環(huán)境:max是10
第四步,執(zhí)行到f1(15);,執(zhí)行f1(15),即執(zhí)行bar(15),創(chuàng)建bar(15)上下文環(huán)境,并將其設(shè)置為活動(dòng)狀態(tài)。
執(zhí)行bar(15)時(shí),max是自由變量,需要向創(chuàng)建bar函數(shù)的作用域中查找,找到了max的值為10。
這里的重點(diǎn)就在于,創(chuàng)建bar函數(shù)是在執(zhí)行fn()時(shí)創(chuàng)建的。fn()早就執(zhí)行結(jié)束了,但是fn()執(zhí)行上下文環(huán)境還存在與棧中,因此bar(15)時(shí),max可以查找到。如果fn()上下文環(huán)境銷毀了,那么max就找不到了。
使用閉包會(huì)增加內(nèi)容開銷,現(xiàn)在很明顯了吧!
第五步,執(zhí)行完f1(15);就是上下文環(huán)境的銷毀過程,這里就不再贅述了。
閉包和作用域、上下文環(huán)境有著密不可分的關(guān)系,真的是“想說愛你不容易”!
另外,閉包在jQuery中的應(yīng)用非常多,無論你是想了解一個(gè)經(jīng)典的框架/類庫,還是想自己開發(fā)一個(gè)插件或者類庫,像閉包、原型這些基本的理論,是一定要知道的。否則,到時(shí)候出了BUG你都不知道為什么,因?yàn)檫@些BUG可能完全在你的知識(shí)范圍之外。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 通俗易懂地解釋JS中的閉包
- JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式
- 淺談JavaScript作用域和閉包
- JS閉包的幾種常見形式實(shí)例詳解
- JS實(shí)現(xiàn)閉包中的沙箱模式示例
- JavaScript閉包的簡單應(yīng)用
- 通過示例徹底搞懂js閉包
- JavaScript閉包和回調(diào)詳解
- 淺談JS封閉函數(shù)、閉包、內(nèi)置對(duì)象
- JavaScript閉包_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- 深入理解Javascript中的作用域鏈和閉包
- JS閉包可被利用的常見場(chǎng)景小結(jié)
- 利用js的閉包原理做對(duì)象封裝及調(diào)用方法
- javascript閉包功能與用法實(shí)例分析
- JavaScript中閉包的詳解
- 圖解Javascript——作用域、作用域鏈、閉包
- 輕松理解JavaScript閉包
- js中的閉包學(xué)習(xí)心得
相關(guān)文章
ES6中的rest參數(shù)與擴(kuò)展運(yùn)算符詳解
rest參數(shù)和擴(kuò)展運(yùn)算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴(kuò)展運(yùn)算符的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-07-07JavaScript實(shí)現(xiàn)垂直滾動(dòng)條效果
這篇文章為大家詳細(xì)主要介紹了JavaScript實(shí)現(xiàn)垂直滾動(dòng)條效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JS+CSS實(shí)現(xiàn)簡單的二級(jí)下拉導(dǎo)航菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡單的二級(jí)下拉導(dǎo)航菜單效果,通過簡單的JavaScript頁面元素遍歷及樣式操作實(shí)現(xiàn)下拉菜單效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
這篇文章主要介紹了詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片DIV豎向滑動(dòng)的方法,涉及javascript操作div層的相關(guān)技巧,需要的朋友可以參考下2015-04-04