js 閉包深入理解與實例分析
本文實例講述了js 閉包。分享給大家供大家參考，具體如下：
1.什么是閉包
定義：是指有權訪問另一個函數作用域中的變量的函數
創建閉包：在一個函數內部創建另一個函數
基本特點 在返回的匿名函數中 可以調用外部函數的變量 如下例中所示 內部函數（匿名函數） 可以訪問外部函數的變量num 形式如a[num] 原因是匿名函數作用域鏈中包括外部函數test1的作用域
閉包有權訪問包含函數內部的所有變量 如下面的 外部函數定義變量d 在閉包中可以直接訪問到d (var dd=d)
function test1(num){ var d; return function(a,b){ var d1=a[num],d2=b[num]; var dd=d; } }
實例參考 此時點擊產品1 到 產品4 結果都是5 點擊匿名函數的作用域鏈中包括外部函數init的活動對象 都是引用的同一個變量i 都是5 。解決辦法 返回的匿名函數 通過立即執行函數 把參數i傳給匿名函數
<!DOCTYPE HTML><html><head> <meta charset='utf-8' /> <title>閉包演示</title> <style type='text/css'> p {background:gold;} </style> <script type='text/javascript'> function init() { var pAry = document.getElementsByTagName('p'); for( var i=0; i<pAry.length; i++ ) {pAry[i].onclick = function() { alert(i);} } } </script></head><body onload='init();'><p>產品 0</p><p>產品 1</p><p>產品 2</p><p>產品 3</p><p>產品 4</p></body></html>
彈出結果都是5截圖
解決辦法：立即執行匿名函數 參數i是循環i的值 傳遞給num形參 匿名函數里 在創建閉包 可以訪問這個傳遞過來的值num
pAry[i].onclick = function(num){//......}(i)
<!DOCTYPE HTML><html><head> <meta charset='utf-8' /> <title>閉包演示</title> <style type='text/css'> p {background:gold;} </style> <script type='text/javascript'> /*修改后*/ function init() { var pAry = document.getElementsByTagName('p'); for( var i=0; i<pAry.length; i++ ) { pAry[i].onclick = function(num) { return function(){ alert(num) } }(i) } } </script></head><body onload='init();'><p>產品 0</p><p>產品 1</p><p>產品 2</p><p>產品 3</p><p>產品 4</p></body></html>
結果點擊第一展示
還有這樣寫也是可以的
function a(){ var pAry = document.getElementsByTagName('p'); for( var i=0; i<pAry.length; i++ ) {(function(num){ pAry[num].onclick = function() { alert(num); }})(i) } }
1.1 閉包的原理
-1) 閉包的作用域鏈 包括 閉包自身的作用域（一般返回匿名函數的作用域），外部函數的作用域（包含的外部函數），全局作用域
-2）通常，函數的作用域和所有變量都會在函數執行結束后被銷毀
-3）函數返回一個閉包，這個函數的作用域會一直保存在內存中直到閉包不存在為止
使用閉包可以模仿塊級作用域
-1）創建閉包并立即執行這個函數 不會再內存中留下該函數的引用
-2 ）結果 函數內部的所有變量都會被立即銷毀
2.什么是作用域鏈
執行環境：定義了變量或函數有權訪問其他數據，決定它們各自的行為。
變量對象：每個執行環境都有一個與之關聯的變量對象。
執行環境定義的所有變量和函數都保存在變量對象中。編寫代碼無法訪問這個對象，解析器在處理數據時會在后臺使用它。
-1）全局執行環境是最外圍的一個執行環境
-2）web瀏覽器中，全局執行環境默認是window對象，因此所有全局變量和函數都是作為window對象的屬性和方法創建的
-3）某個執行環境中的所有代碼執行完畢后，該環境被銷毀，保存在其中的所有變量和函數定義都隨之銷毀 全局執行環境直到應用程序退出--例如關閉網頁或瀏覽器時才會被銷毀
-4）每個函數都有自己的執行環境
作用域鏈：當代碼在一個執行環境中執行時，會創建變量對象 一個作用域鏈
作用域鏈用途：保證對執行環境有權訪問的所有變量和函數的有序訪問
標識符解析：沿著作用域鏈一級一級的向上搜索標識符的過程。
函數參數也被當做變量來看待，因此訪問規則與執行環境中的其它變量相同。 例子：下面函數chageColor(num){} 在閉包里tempColor(a){}里可用a[num]訪問
實例解析
<script type='text/javascript'> /*全局變量*/ var color = ’red’ ; function changeColor(num){ var otherColor = ’blue’, another =color, chage = changeColor(); function tempColor(a){ var temp = otherColor, temp2 = color, temp3 = changeColor();/*這里可以訪問上層執行環境otherColor another chage 和全局color*/ var u =a[num]; } }</script>
全局 window
|
|-------------color 全局變量
|------------changeColor()
|
|---------------otherColor(局部變量 還有兩個就是調用的上層全局環境里的color變量和函數chageColor)
|---------------tempColor()
|-------------------h（變量h不能被上層執行環境調用 只能在tempColor()里調用 標識符向上搜索沿著作用域鏈 這個環境里可以調用外層環境和全局環境的變量）
參考：
https://www.jb51.net/article/183094.htm
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章：
1. java 運行報錯has been compiled by a more recent version of the Java Runtime2. UTF8轉成GB2312亂碼問題解決方案3. Android studio listview實現列表數據顯示 數據循環顯示效果4. Java并發編程之線程間的通信5. 詳解CSS偽元素的妙用單標簽之美6. 如何利用Python matplotlib繪制雷達圖7. 學習Python需要哪些工具8. 低版本IE正常運行HTML5+CSS3網站的3種解決方案9. 新手學python應該下哪個版本10. 解決VUE項目使用Element-ui 下拉組件的驗證失效問題
網公網安備