JavaScript匿名函数访问局部变量

Question

我试图使用FileReader从文本文件中读取，下面是我的代码，它会引发错误。

var message = document.getElementById("message");
function upFiles(files){
          for(var x=0; x< files.length; x++){
              var fReader = new FileReader();
              fReader.onload = function(e){
                message.innerHTML += '<br>'+ files[x].name;
                 message.innerHTML += '<br>'+e.target.result;
                 
              }
              fReader.readAsText(files[x]);
              
          }

          
      }

<input type="file" multiple onchange="upFiles(this.files)">
<div id-"message"></div>

但是当我使用一个单独的变量来存储文件的名称时，它就可以了。

var message = document.getElementById("message");
function upFiles(files){
          for(var x=0; x< files.length; x++){
              var fReader = new FileReader();
              var fileName = files[x].name;
              fReader.onload = function(e){
                message.innerHTML += '<br>'+ fileName;
                 message.innerHTML += '<br>'+e.target.result;
                 
              }
              fReader.readAsText(files[x]);
              
          }

          
      }

 <input type="file" multiple onchange="upFiles(this.files)">
 <div id="message"></div>

我想知道它为什么第二次有效。为什么匿名函数在第一次尝试时无法访问局部变量

Answer 1

它没有用，因为你有

            message.innerHTML += '<br>'+ fileName;
             message.innerHTML += '<br>'+e.target.result;

但是你在这里没有说

var message = ... // whatever message is supposed to be - hopefully something DOM related lol