您好,登錄后才能下訂單哦!
本文實例講述了JS閉包用法。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> // 第一,函數作為返回值 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"> // 第二,函數作為參數被傳遞 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>
第一步,代碼執行前生成全局上下文環境,并在執行時對其中的變量進行賦值。此時全局上下文環境是活動狀態。
全局上下文環境:max是undefined
第二步,執行var f1 = fn();代碼時,調用fn(),產生fn()執行上下文環境,壓棧,并設置為活動狀態。
fn()上下文環境:max是10
第三步,執行完var f1 = fn();,fn()調用完成。按理說應該銷毀掉fn()的執行上下文環境,但是這里不能這么做。
注意,重點來了:因為執行fn()時,返回的是一個函數。函數的特別之處在于可以創建一個獨立的作用域。
而正巧合的是,返回的這個函數體中,還有一個自由變量max要引用fn作用域下的fn()上下文環境中的max。
因此,這個max不能被銷毀,銷毀了之后bar函數中的max就找不到值了。因此,這里的fn()上下文環境不能被銷毀,還依然存在與執行上下文棧中。
執行到max = 100;時,全局上下文環境將變為活動狀態,但是fn()上下文環境依然會在執行上下文棧中。
另外,執行完max = 100;,全局上下文環境中的max被賦值為100。
全局上下文環境:max是100 fn()上下文環境:max是10
第四步,執行到f1(15);,執行f1(15),即執行bar(15),創建bar(15)上下文環境,并將其設置為活動狀態。
執行bar(15)時,max是自由變量,需要向創建bar函數的作用域中查找,找到了max的值為10。
這里的重點就在于,創建bar函數是在執行fn()時創建的。fn()早就執行結束了,但是fn()執行上下文環境還存在與棧中,因此bar(15)時,max可以查找到。如果fn()上下文環境銷毀了,那么max就找不到了。
使用閉包會增加內容開銷,現在很明顯了吧!
第五步,執行完f1(15);就是上下文環境的銷毀過程,這里就不再贅述了。
閉包和作用域、上下文環境有著密不可分的關系,真的是“想說愛你不容易”!
另外,閉包在jQuery中的應用非常多,無論你是想了解一個經典的框架/類庫,還是想自己開發一個插件或者類庫,像閉包、原型這些基本的理論,是一定要知道的。否則,到時候出了BUG你都不知道為什么,因為這些BUG可能完全在你的知識范圍之外。
更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。