JS閉包用法的範例程式碼分享-js教程-PHP中文網

首頁

web前端

js教程

JS閉包用法的範例程式碼分享

黄舟

Mar 27, 2017 pm 02:37 PM

js 閉包

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

本文實例講述了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可能完全在你的知識範圍之外。

以上是JS閉包用法的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7804

Java教學

1645

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

C++ lambda 表達式中閉包的意思是什麼？ Apr 17, 2024 pm 06:15 PM

在C++中，閉包是能夠存取外部變數的lambda表達式。若要建立閉包，請擷取lambda表達式中的外部變數。閉包提供可重複使用性、資訊隱藏和延遲求值等優點。它們在事件處理程序等實際情況中很有用，其中即使外部變數被銷毀，閉包仍然可以存取它們。

C++ 函式中閉包的優點和缺點是什麼？ Apr 25, 2024 pm 01:33 PM

閉包是一種巢狀函數，它能存取外層函數作用域的變量，優點包括資料封裝、狀態保持和靈活性。缺點包括記憶體消耗、效能影響和調試複雜性。此外，閉包還可以建立匿名函數，並將其作為回調或參數傳遞給其他函數。

C++ Lambda 表達式如何實作閉包？ Jun 01, 2024 pm 05:50 PM

C++Lambda表達式支援閉包，即保存函數作用域變數並供函數存取。語法為[capture-list](parameters)->return-type{function-body}。 capture-list定義要捕獲的變量，可以使用[=]按值捕獲所有局部變量，[&]按引用捕獲所有局部變量，或[variable1,variable2,...]捕獲特定變量。 Lambda表達式只能存取捕獲的變量，但無法修改原始值。

解決閉包導致的記憶體洩漏問題 Feb 18, 2024 pm 03:20 PM

標題：閉包造成的記憶體洩漏及解決方法引言：閉包是JavaScript中一個非常常見的概念，它可以讓內部函數存取外部函數的變數。然而，閉包在使用不當的情況下可能導致記憶體洩漏。本文將探討閉包所造成的記憶體洩漏問題，並提供解決方法及具體程式碼範例。一、閉包引起的記憶體洩漏問題閉包的特性是內部函數可以存取外部函數的變量，這意味著在閉包中引用的變數不會被垃圾回收。如果使用不當，