爲什麼Javascript addEventListener更改對象指針的範圍？

Question

我有一些相當簡單的香草Javascript的麻煩。它所做的就是通過它們的標籤名獲取所有p元素，併爲每個元素附加一個事件處理函數，它調用一個將顏色更改爲紅色的函數。

外回調函數el指正確的元素，1-6。但是在循環內部，它始終指向最後一個，儘管javascript的詞法變量範圍本質。爲什麼會這樣，以及可以採取什麼措施來實施壓抑行爲？

小提琴：https://jsfiddle.net/7j4bg68g/

<p>1 This is a test.</p> 
<p>2 This is a test.</p> 
<p>3 This is a test.</p> 
<p>4 This is a test.</p> 
<p>5 This is a test.</p> 
<p>6 This is a test.</p> 

...

function takeAction() { 
    this.style.color = 'red'; 
} 

var els = document.getElementsByTagName('p'); 
for (var i = 0; i < els.length; i++) { 
    var el = els[i]; 

    // logs els 1 to 6 as expected. 
    console.log(el.innerHTML); 

    el.addEventListener('click', function() { 

    // logs "6 This is a test.", and makes the last <p> tag red, 
    // regardless of which <p> element you click on. 
    console.log(el.innerHTML); 
    takeAction.call(el); 

    }, false); 
} 

Answer 1

這是因爲封閉的，在你的代碼中所引用到 「厄爾尼諾」。所有的事件處理程序都會引用相同的變量el，並將其更改爲循環中給出的最後一個值。 試試這個，

function takeAction() { 
    this.style.color = 'red'; 
} 

var els = document.getElementsByTagName('p'); 
for (var i = 0; i < els.length; i++) { 
    var el = els[i]; 

    // logs els 1 to 6 as expected. 
    console.log(el.innerHTML); 
(function(elem){ 
    elem.addEventListener('click', function() { 

    // logs "6 This is a test.", and makes the last <p> tag red, regardless of which <p> element you click on. 
    console.log(elem.innerHTML); // logs "6 This is a test." 
    takeAction.call(elem); 

    }, false); 
})(el); 
}