JS閉包分享


S的閉包用法給開發帶來了極大的便利,它的使用方式非常自然,以至於很多同學並不很了解閉包,卻可以在實際開發中順暢的使用了

例如下面的代碼,給button添加一個點擊事件,很多人經常這么寫,實際上這就是一個閉包

 

 

 

要了解閉包,需要先了解下JS變量的作用域

變量的作用域無非就是兩種:全局變量和局部變量

特點是 函數內部可以訪問外部變量,函數外部不能訪問函數內的變量

例如

 

 

 

這個很好理解,那么如何從外部讀取局部變量?

那就是在函數的內部,再定義一個子函數,這個子函數可以訪問外部的變量,然后父函數把這個子函數return,讓外部可以通過子函數訪問自己的局部變量

例如

 

 

 

這個實現方式就是閉包

什么是閉包

閉包其實就是將函數內部和函數外部連接起來的一座橋梁,可以讓函數外部的代碼訪問函數內容變量,可以把閉包簡單理解成“定義在一個函數內部的函數”

閉包在子作用域中保存了一份在父級作用域取得的變量,這些變量不會隨父級作用域的銷毀而銷毀,因為他們已經常駐內存了

閉包應用示例

(1)實現公共、私有作用域控制

既然閉包可以對外提供訪問內容變量的方式,就可以用這個特點實現類似 public private 作用域的需求


 

 

(2)循環添加DOM事件

先看下面的代碼,目標是點擊不同的輸入框給出不同的提示

這是個經典案例,開發中很容易出現類似錯誤

 

 

 

實際運行后,會發現,不管點擊哪個輸入框,都會提示年齡的信息

下面的是正確方式,可以按照需求正常顯示


 

 

原因

第一種方式出現錯誤,是因為在for循環結束后,變量item的值已經變為了最后一項,所以當點擊事件執行時,讀取的信息總是最后一項的信息

而第二個方式就是利用了閉包會把父級變量保存到自己作用域的特點,這樣每次循環添加點擊事件時,把當前循環中變量值傳給了function,這樣function就保存了正確的變量值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM