JS閉包的特性分析

在body標籤中，加上一個u標籤,其id為node，ul標籤下面有5個li標籤。如何在點擊不同的li 標籤時，彈出其li下標？
1)首先需要取得ul節點 var  node = document.getElementsById('node')  
2) 取得node節點下子節點 var  list = node.children  
**3)為子節點循環新增onclick事件(此處注意，會存在閉包問題)。 for（var i=0;i< list.length; i++）{
list[i].onclick = function()console.log(i)}} ，從列印的結果發現，每次輸出的都是7。 **
4)分析輸出7，由於i 採用var宣告為全域變量，指向同一個位址。循環執行後，i的值為7，因此每次循環打印的結果均為7
採用兩種方式解決，1）聲明塊級作用域變量，每次傳進來i,都用let j = i , 接收。

let j = i; 
list[i].onclick = function(){console.log(j)}

在function方法，呼叫了區塊級變數j,該變數並不會被垃圾回收。每次for迴圈均指向不同的位址，因此觸發點擊事件時，可以正確列印其下標 2）採用閉包來解決。

list[i].onclick = function(i){ 
return function(){console.log(i)}。 
}

**解讀閉包
閉包就是能夠讀取其他函數內部變數的函數。在JavaScript語言中，只有函數內部的子函數才能讀取局部變數。可以簡單將閉包理解為「定義在一個函數內部的函數」。本質上，閉包就是將函數內部和函數外部連結起來的一座橋樑。

注意：使用閉包會讓函數中的變數保存在記憶體中，記憶體消耗較大，因此不能濫用閉包，將會造成網頁的效能問題，在IE瀏覽器中可能導致記憶體洩漏。 。結局辦法，在退出函數之前，將不使用的局部變數全部刪除。

借助別人的例子。供大家參考

var name = "this window";
var object = {
    name :"my object",
    getNameFunc:function () {
        return function () {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());/弹出this window2 。此时this对象指向window对象
var object2 = {
    name: "my object",
    getNameFunc2: function () {
        var that = th is;
        return function () {
            return that.name;
        }
    }
}
alert(‘that’+object2.getNameFunc2()()); ///弹出my object。此时this对象指向object2对象

相關推薦：

#簡單理解JS閉包

##JS閉包常見形式詳解

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

以上是JS閉包的特性分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！