快捷導(dǎo)航

JS閉包用法實(shí)例分析

更新時(shí)間：2017年03月27日 11:18:54 作者：哈尼heaven

這篇文章主要介紹了JS閉包用法,結(jié)合具體實(shí)例形式分析了javascript閉包的原理、執(zhí)行步驟與相關(guān)操作技巧,需要的朋友可以參考下

本文實(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)用完成。按理說(shuō)應(yīng)該銷毀掉fn()的執(zhí)行上下文環(huán)境，但是這里不能這么做。

注意，重點(diǎn)來(lái)了：因?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)系，真的是“想說(shuō)愛你不容易”！

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

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

您可能感興趣的文章: