欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS閉包用法實例分析

 更新時間:2017年03月27日 11:18:54   作者:哈尼heaven  
這篇文章主要介紹了JS閉包用法,結(jié)合具體實例形式分析了javascript閉包的原理、執(zhí)行步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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í)行時對其中的變量進行賦值。此時全局上下文環(huán)境是活動狀態(tài)。

全局上下文環(huán)境:max是undefined

第二步,執(zhí)行var f1 = fn();代碼時,調(diào)用fn(),產(chǎn)生fn()執(zhí)行上下文環(huán)境,壓棧,并設(shè)置為活動狀態(tài)。

fn()上下文環(huán)境:max是10

第三步,執(zhí)行完var f1 = fn();,fn()調(diào)用完成。按理說應(yīng)該銷毀掉fn()的執(zhí)行上下文環(huán)境,但是這里不能這么做。

注意,重點來了:因為執(zhí)行fn()時,返回的是一個函數(shù)。函數(shù)的特別之處在于可以創(chuàng)建一個獨立的作用域。

而正巧合的是,返回的這個函數(shù)體中,還有一個自由變量max要引用fn作用域下的fn()上下文環(huán)境中的max。

因此,這個max不能被銷毀,銷毀了之后bar函數(shù)中的max就找不到值了。因此,這里的fn()上下文環(huán)境不能被銷毀,還依然存在與執(zhí)行上下文棧中。

執(zhí)行到max = 100;時,全局上下文環(huán)境將變?yōu)榛顒訝顟B(tài),但是fn()上下文環(huán)境依然會在執(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è)置為活動狀態(tài)。

執(zhí)行bar(15)時,max是自由變量,需要向創(chuàng)建bar函數(shù)的作用域中查找,找到了max的值為10。

這里的重點就在于,創(chuàng)建bar函數(shù)是在執(zhí)行fn()時創(chuàng)建的。fn()早就執(zhí)行結(jié)束了,但是fn()執(zhí)行上下文環(huán)境還存在與棧中,因此bar(15)時,max可以查找到。如果fn()上下文環(huán)境銷毀了,那么max就找不到了。

使用閉包會增加內(nèi)容開銷,現(xiàn)在很明顯了吧!

第五步,執(zhí)行完f1(15);就是上下文環(huán)境的銷毀過程,這里就不再贅述了。

閉包和作用域、上下文環(huán)境有著密不可分的關(guān)系,真的是“想說愛你不容易”!

另外,閉包在jQuery中的應(yīng)用非常多,無論你是想了解一個經(jīng)典的框架/類庫,還是想自己開發(fā)一個插件或者類庫,像閉包、原型這些基本的理論,是一定要知道的。否則,到時候出了BUG你都不知道為什么,因為這些BUG可能完全在你的知識范圍之外。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • ES6中的rest參數(shù)與擴展運算符詳解

    ES6中的rest參數(shù)與擴展運算符詳解

    rest參數(shù)和擴展運算符都是ES6新增的特性。下面這篇文章主要給大家介紹了關(guān)于ES6中rest參數(shù)與擴展運算符的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • JavaScript實現(xiàn)垂直滾動條效果

    JavaScript實現(xiàn)垂直滾動條效果

    這篇文章為大家詳細主要介紹了JavaScript實現(xiàn)垂直滾動條效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • js密碼強度檢測

    js密碼強度檢測

    這篇文章主要介紹了js密碼強度檢測的相關(guān)資料,并給出了詳細代碼,需要的朋友可以參考下
    2016-01-01
  • JS折半插入排序算法實例

    JS折半插入排序算法實例

    這篇文章主要介紹了JS折半插入排序算法,以完整實例形式較為詳細的分析了JavaScript實現(xiàn)折半插入排序的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-12-12
  • 微信小程序?qū)崿F(xiàn)登錄界面

    微信小程序?qū)崿F(xiàn)登錄界面

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登錄界面,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • JS+CSS實現(xiàn)簡單的二級下拉導航菜單效果

    JS+CSS實現(xiàn)簡單的二級下拉導航菜單效果

    這篇文章主要介紹了JS+CSS實現(xiàn)簡單的二級下拉導航菜單效果,通過簡單的JavaScript頁面元素遍歷及樣式操作實現(xiàn)下拉菜單效果,非常簡單實用,需要的朋友可以參考下
    2015-09-09
  • js實現(xiàn)右鍵彈出自定義菜單

    js實現(xiàn)右鍵彈出自定義菜單

    這篇文章主要為大家詳細介紹了js實現(xiàn)右鍵彈出自定義菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案

    詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案

    這篇文章主要介紹了詳解用js代碼觸發(fā)dom事件的實現(xiàn)方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • 游覽器中javascript的執(zhí)行過程(圖文)

    游覽器中javascript的執(zhí)行過程(圖文)

    在講這個問題之前,先來補充幾個知識點,如果對此已經(jīng)比較了解可以直接跳過
    2012-05-05
  • JavaScript實現(xiàn)圖片DIV豎向滑動的方法

    JavaScript實現(xiàn)圖片DIV豎向滑動的方法

    這篇文章主要介紹了JavaScript實現(xiàn)圖片DIV豎向滑動的方法,涉及javascript操作div層的相關(guān)技巧,需要的朋友可以參考下
    2015-04-04

最新評論