爲什麼FileReader.onload處理程序中設置了自執行的函數

繼碼MDN for using files from web applications：爲什麼FileReader.onload處理程序中設置了自執行的函數

function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /image.*/; 

    if (!file.type.match(imageType)) { 
     continue; 
    } 

    var img = document.createElement("img"); 
    img.classList.add("obj"); 
    img.file = file; 
    preview.appendChild(img); // Assuming that "preview" is a the div output where the content will be displayed. 

    var reader = new FileReader(); 
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
    reader.readAsDataURL(file); 
    } 
}

專注於這一行：

reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

什麼是自執行功能背後的原因是什麼？據我所知，IMG傳遞給函數和返回功能的方法中使用，但爲什麼他們不只是引用它，像這樣：

reader.onload = function(e) { img.src = e.target.result; };

來源

2014-07-09 adriaanp

有一個for循環無特殊範圍，所以宣告循環內部的變量將覆蓋每個迭代變量，所以這個

for (var i = 0; i < 10; i++) { 

    var img = document.createElement("img"); 

    setTimeout(function() { 
     console.log(img); 
    }, 100); 

}

將記錄最後圖像只，十次。

同樣的方式，setTimeout是異步，reader.onload也是異步，它在以後的時間，執行回呼，那麼因爲在img變量的循環來創建一個新的範圍在鎖定需要一封閉內部錯誤定義的img價值，它可能只是以及被寫入

(function(aImg) { 

    reader.onload = function() { 
     aImg.src = e.target.result; 
    } 

})(img);

有人剛剛決定是一個小聰明，寫在img值鎖定在每次迭代與返回功能的IIFE的IIFE。因爲for循環會在每次迭代中完成並覆蓋img變量，並且onload函數將在稍後執行，因此，如果它們只是在沒有IIFE的情況下引用它，它們將最後只有最後一個img，因爲for循環會在每次迭代中完成並覆蓋img變量，循環已完成，並且img僅保留最後一個值集。

來源

2014-07-09 18:30:21 adeneo

爲什麼FileReader.onload處理程序中設置了自執行的函數

回答

相關問題