JS閉包用法實例分析

2024-05-06 16:36:12

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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)上下文環境，并將其設置為活動狀態。