javascript中閉包的應用

hellowoody 發布于2019-08-21 14:43 / 2250人閱讀

摘要：在中，有許多閉包的運用。要修改這個可以引進一個立即執行的匿名函數，將當前的值傳入封裝變量有時候我們需要用一個全局變量來存儲一些在整個程序運行過程中都需要被保存下來的值，例如一組人名和對應。

在javascript中，有許多閉包的運用。

1. 事件響應函數

var divs = document.getElementsByTagName("div");
for(var i=0; i<3; i++){
   divs[i].onclick = function(){
       alert(i);
   } 
}

此例中，假設為3個div元素添加onclick事件，我們會發現無論點擊哪一個div都會輸出3。這是因為我們為div綁定的onclick事件處理函數就是一個閉包，它可以訪問到這個函數定義時所處作用域中的變量。并且事件響應是異步觸發的，當點擊某一個div時，實際上外層循環已經結束了，i的值始終為3。

要修改這個bug可以引進一個立即執行的匿名函數，將當前的i值傳入：

for(var i=0; i<3; i++){
   function(i){  
     divs[i].onclick = function(){
       alert(i);
     } 
   }(i);
}

2. 封裝變量

有時候我們需要用一個全局變量來存儲一些在整個程序運行過程中都需要被保存下來的值，例如一組人名和Id對應。


var persons = {};
var addPerson = function (name，id){
    if(persons.hasOwnProperty(name)){
        return false;
    }
    else {
        persons[name] = id;
        return true;
    }
}

假設只有在addPerson這個函數中我們用到了persons這個變量，就沒有必要將其暴露給其他的函數以防止不必要的變量沖突，但是又不能直接將其定義在函數內部，否則會隨著函數執行完畢而消失。這個時候就需要用到閉包了。修改代碼如下:

var addPerson = (function (){
    var persons = {};
    return function(name,id){
        if(persons.hasOwnProperty(name)){
            return false;
        }
        else {
            persons[name] = id;
            return true;
        }
    }
})();

此例中，我們將persons封裝在addPerson函數內部，并且通過在一個立即執行的匿名函數內部return一個閉包函數使得addPerson被賦值的這個函數（即return的函數）可以訪問到persons這個變量。

相比于直接在addPerson函數內部定義persons這個變量，我們同樣通過閉包延續了變量的生存周期，使其不至于因為函數執行結束而被銷毀。

參考《javascript開發實踐與設計模式》。

云服務器 GPU云服務器 javascript閉包 javascript閉包詳解編程語言中的+閉包 javascript的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88010.html

掌握Javascript面試：什么是閉包？

摘要：我的意思是大多數稱職的面試官會問你什么是閉包，并且在大多數時候你回答錯誤將失去這份工作。在閉包的范圍內定義的任何公開方法都是特權的。使對象的數據私有化并不是閉包的唯一用途。文章來源于:https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36 在J...

jifei 2019-08-21 18:21 評論0 收藏0
【譯】理解JavaScript：閉包

摘要：當面試中讓我解釋一下閉包時我懵逼了。這個解釋開始可能有點晦澀，讓我們抽絲剝繭摘下閉包的真面目。此文不詳述作用域有專門的主題闡述，不過作用域是理解閉包原理的基礎。這才是閉包的真正便利之處。閉包使用不當就會很坑。原文鏈接為什么深度學習JavaScript？ JavaScript如今是最流行的編程語言之一。它運行在瀏覽器、服務器、移動設備、桌面應用，也可能包括冰箱。無需我舉其他再多不相干...

岳光 2019-08-22 17:17 評論0 收藏0
溫故js系列（14）-閉包&垃圾回收&內存泄露&閉包應用&作用域鏈&

摘要：該對象包含了函數的所有局部變量命名參數參數集合以及，然后此對象會被推入作用域鏈的前端。如果整個作用域鏈上都無法找到，則返回。此時的作用域鏈包含了兩個對象的活動對象和對象。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：閉包 JavaScript-閉包閉包(closure)是一個讓人又愛又恨的somet...

Amio 2019-08-22 10:36 評論0 收藏0
JavaScript基礎系列---閉包及其應用

摘要：所以，有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。所以本文中將以維基百科中的定義為準即在計算機科學中，閉包，又稱詞法閉包或函數閉包，是引用了自由變量的函數。閉包(closure)是JavaScript中一個神秘的概念，許多人都對它難以理解，我也一直處于似懂非懂的狀態，前幾天深入了解了一下執行環境以及作用域鏈，可戳查看詳情，而閉包與作用域及作用域鏈的關系密不可分，所...

leoperfect 2019-08-22 18:08 評論0 收藏0
javascript - 閉包定義及應用場景

摘要：什么是閉包閉包是指有權訪問另一個函數作用域中的變量的函數。在內存中維持一個變量。什么是閉包閉包是指有權訪問另一個函數作用域中的變量的函數。 function createFunc() { var name = wheeler; return function () { return name; } } var nameFunc = crea...

Xufc 2019-08-23 11:53 評論0 收藏0
理解Javascript的閉包

摘要：但是閉包也不是什么復雜到不可理解的東西，簡而言之，閉包就是閉包就是函數的局部變量集合，只是這些局部變量在函數返回后會繼續存在。可惜的是，并沒有提供相關的成員和方法來訪問閉包中的局部變量。 (收藏自技術狂) 前言：還是一篇入門文章。Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包對于那些使用傳統靜態語言C/C++的程序員來說是一個新的語言特性。本文將...

dayday_up 2019-08-21 12:37 評論0 收藏0