javascript - 从 addEventListener 调用函数

Question

我有一个表单，我正在向该表单添加一个 addEventListener()。我想从 addEventListener() 中调用一个函数，但我在函数调用时收到了一个 Uncaught TypeError。

代码 1

$(document).ready(function(){
  function uploadFile(){
      alert("comes here");
  }

  uploadForm.addEventListener('submit', function(e) {
      var uploadFile = document.getElementById('upload-file').files;
      e.preventDefault();
      uploadFile();
  });
});

但是如果我把上面的代码改成

代码 2

$(document).ready(function(){
  var test = function uploadFile(){
      alert("comes here");
  }

  uploadForm.addEventListener('submit', function(e) {
      var uploadFile = document.getElementById('upload-file').files;
      e.preventDefault();
      test();
  });
});

它有效。我想知道为什么。它可能与范围相关。但据我所知，我认为函数 (uploadFile()) 和函数引用 (test) 具有相同的作用域。

我是一个自学成才的程序员，所以我不知道要用谷歌搜索什么来理解为什么会这样。我得到的最接近的是 this , function naming

作为答案，我只是在寻找一些可以通过谷歌搜索来理解为什么会发生这种情况的术语。

Answer 1

您已经使用名为 uploadFile 的变量覆盖了函数名称 uploadFile，这只是名称冲突

$(document).ready(function(){
  function uploadFile(){ //uploadFile function declaration
      alert("comes here");
  }

  uploadForm.addEventListener('submit', function(e) {
      //function uploadFile already declared, and now you are using var here
      var uploadFile = document.getElementById('upload-file').files;
      e.preventDefault();
      uploadFile();
  });
});

简单的改名会有帮助

$(document).ready(function(){
  function uploadFile2(){ //NOTICE NAME
      alert("comes here");
  }

  uploadForm.addEventListener('submit', function(e) {
      var uploadFile = document.getElementById('upload-file').files;
      e.preventDefault();
      uploadFile2(); //NOTICE NAME
  });
});

在第二个例子中，一切正常，因为你有函数名 test，它不会与 uploadFile 变量冲突

同时查看@JuanMendes 的回答，因为它解释了问题的原因并且对知识库非常有用