1. 程式人生 > >javascript閉包理解之onload事件遍歷獲取陣列元素

javascript閉包理解之onload事件遍歷獲取陣列元素

我們在學javascript的時候是否遇到過這樣的程式碼,例如我們要在onload事件裡迴圈遍歷一個數組,對遍歷到的陣列元素進行操作。需要用到this物件,如下程式碼所示:

onload = function () {
            var links = document.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = function () 
                //這樣只有最後一個標籤的內容可以顯示出來 
                    alert
(links[i].innerHTML); }; } };


這裡對一種型別的標籤(假設是瀏覽器中所有a標籤)進行遍歷,並獲取個當前標籤元素,當點選標籤時,瀏覽器會彈出標籤中的內容。考慮一下,上面的程式能否執行成功,答案是否定的。很顯然,這個遍歷寫在了onload的事件裡了,當瀏覽器載入完畢後,這個i已經遍歷結束了,而在出發onclick事件的時候,我們獲取到的是最後一個標籤元素。

對於這種情況,我們一般是用this代替links[i],來完成的。那麼怎樣使用links[i],也可以完成類似的操作呢。閉包就可以解決。如下所示

  onload = function () {
            var links = document.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = (function () {
                    var res = i;
                    //因為閉包內要使用i,所以外層i還依舊存在記憶體中
                    return function
() {
alert(links[res].innerHTML); alert(typeof this); } })(); } }


這裡我是這樣理解的,程式運用了閉包原理,而閉包幽靈就是i 變數,它在第二個function()的外面,而function內部引用了i變數,所以導致瀏覽器在載入的時候保留了i變數遍歷結束之前的資料,當某個標籤被點選後,便能找到它所在陣列的位置,從而對其作出相應的操作。

此段程式碼親測,可以執行。至於更深次的理解,需要在不斷的學習中探索。

相關推薦

javascript理解onload事件獲取陣列元素

我們在學javascript的時候是否遇到過這樣的程式碼,例如我們要在onload事件裡迴圈遍歷一個數組,對遍歷到的陣列元素進行操作。需要用到this物件,如下程式碼所示: onload = fu

javascript 理解

閉包的含義:閉包就是能夠讀取其他函式內部變數的函式,一個函式內部的函式 閉包的用途: 讀取函式內部的變數;讓這些變數的值始終保持在記憶體中 閉包的弊端:由於閉包會使得函式中的變數都被儲存在記憶體中,記憶體消耗很大, 所以不能濫用閉包,否則會造成網頁的效能問題,在IE中可能

javascript理解2

閉包的形成需要兩個條件: 1.在函式內部建立新的函式; 2.新的函式在執行時,訪問了函式的變數物件; 總結一下閉包: 閉包是在函式被呼叫執行的時候才被確認建立的。 閉包的形成,與作用域鏈的訪問順序有直接關係。 只有內部函式訪問了上層作用域鏈中的變數物件時,才會

JavaScript理解

什麼是閉包 普通函式中,函式內部可以直接讀取全域性變數,函式外部無法讀取函式內部的區域性變數。 而閉包能夠讀取其他函式內部變數的函式,由於在 Javascript 語言中,只有函式內部的子函式才能讀取區域性變數,因此可以把閉包簡單理解成 “定義在一個函式內部的函式”。所以

C#泛型效能進階(排序後輸出元素值)

而foreach語句是通過迭代變數來列舉集合的元素,為集合的每個元素執行嵌入語句。也就是說,foreach語句是通過迭代變數在集合內對其自身的引用來實現遍歷的,ArrayList類列表同樣是通過物件值引用來實現的。 而這也是稱之為強型別的原因,因為在編譯時沒有辦法告訴我們列表中資料的實際型別

C語言中for迴圈陣列元素賦值需注意的問題

在C語言中,我們通常是用malloc函式分配記憶體得到一個數組a,然後使用for迴圈遍歷給陣列賦值,賦值的方式有很多種,比如a[i]=i,*(a++)=i,建議使用第一種方法,第二種方法一不小心就容易出錯,看下面的一個程式設計例子 我們使用*(data_col++) =

Javascript理解

閉包概念 An inner function always has access to the vars and parameters of its outer function, even after the outer function has returned… 內

javascript理解和實例

bject 閉包 內存 ron 獲得 工程師 基本 語義 法則 所謂閉包,值得是詞法表示包括不必要計算的變量的函數,也就是說,該函數可以使用函數外定義的變量。 順便提示一下: 詞法作用域:變量的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決於源碼,通過靜態分析

理解JavaScript

知識 重新 整體 應該 表達式 上下 發現 同時 位置 我從沒理解過 JavaScript 閉包直到有人這樣跟我解釋…… 正如標題所說,JavaScript 閉包對我來說一直是個迷。我 看過 很多 文章,在工作中用過閉包,甚至有時候我都沒有意識到我在使用閉包。 最近參加一個

【譯】理解JavaScript——新手指南

閉包是JavaScript中一個基本的概念,每個JavaScript開發者都應該知道和理解的。然而,很多新手JavaScript開發者對這個概念還是很困惑的。 正確理解閉包可以幫助你寫出更好、更高效、簡潔的程式碼。同時,這將會幫助你成為更好的JavaScript開發者。 因此,在這篇文章中,我將會嘗試解析

全面理解Javascript的幾種寫法及用途【轉】

內部 ron 除了 因此 擁有 否則 這一 sage ssa 一、什麽是閉包和閉包的幾種寫法和用法 1、什麽是閉包 閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。閉包的特點:  1. 作為一個函

JavaScript理解

閉包是指有權訪問另一個函式作用域中的變數的函式。 作用域 作用域分為全域性作用域和區域性作用域。 全域性作用域:最外層函式定義的變數擁有全域性作用域,任何內部函式都可以訪問。 區域性作用域:只在固定的程式碼片段內可以訪問,函式外部無法訪問。 全域性變數都是全域性物件windo

我從來不理解JavaScript,直到有人這樣向我解釋它...

重復 第一次 本地變量 由於 -exec 簡單 賦值 是否 函數聲明 正如標題所述,JavaScript閉包對我來說一直有點神秘,看過很多閉包的文章,在工作使用過閉包,有時甚至在項目中使用閉包,但我確實是這是在使用閉包的知識。 最近看國外的一些文章,終於,有人用於一種讓我

實戰理解JavaScript

前言     js的作用域分兩種,全域性和區域性,js作用域環境中訪問變數的權利是由內向外的,內部作用域可以獲得當前作用域下的變數並且可以獲得當前包含當前作用域的外層作用域下的變數,反之則不能,也就是說在外層作用域下無法獲取內層作用域下的變數,同樣在不同的函式作

全面理解Javascript的幾種寫法及用途

  好久沒有寫部落格了,過了一個十一長假都變懶了,今天總算是恢復狀態了。好了,進入正題,今天來說一說javascript裡面的閉包吧!本篇部落格主要講一些實用的東西,主要將閉包的寫法、用法和用途。  一、什麼是閉包和閉包的幾種寫法和用法 1、什麼是閉包 閉包,官方對

原生javascript的定義和理解

就是一個函式何以訪問另一個函式內部的區域性變數 可以避免垃圾回收機制 javascript 中的函式都可以稱為閉包,只不過巢狀的更厲害 可以吧值儲存在記憶體中。 閉包是指在函式外部訪問函式作用域中變數(區域性變數)的函式;或者說閉包就是能夠讀取其他函式內部變數的函式;或者說閉包是指有權訪問另

如何理解 JavaScript

作為 JS 初學者,第一次接觸閉包的概念是因為寫出了類似下面的程式碼: 給列表項迴圈新增事件處理程式。當你點選列表項時不會有任何反應。如何在初學就理解閉包?你需要接著讀下去。 § 什麼是閉包 說閉包前,你還記得詞法作用域嗎? 執行上面的程式碼打印出 1。 bar 函式

Javascript(Closure)理解

閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高階應用都要依靠閉包實現。 下面就是我的學習筆記,對於Javascript初學者應該是很有用的。 一、變數的作用域 要理解閉包,首先必須理解Javascript特殊的變數作用域。 變數的

讓你分分鐘理解 JavaScript

閉包,是 Javascript 比較重要的一個概念,對於初學者來講,閉包是一個特別抽象的概念,特別是 ECMAScript 規範給的定義,如果沒有實戰經驗,很難從定義去理解它。因此,本文不會對閉包的概念進行大篇幅描述,直接上乾貨,讓你分分鐘理解閉包! 閉包,一睹為快 在接觸一個新技術的時候,

javascript 理解

JavaScript閉包:1.javascript中的變數訪問規則     A:全域性變數可以任意訪問     B:區域性變數只能在本方法中訪問2.什麼是閉包    1)官方”的解釋是:閉包是一個擁有許多變數和綁定了這些變數的環境的表示式(通常是一個函式),因而這些變數也是該