从 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）具有相同的范围。

我是一名自学成才的程序员，所以我不知道如何 google 来理解为什么会发生这种情况。我得到的最接近的是 this , function naming

作为答案，我只是在寻找一些我可以 google 理解为什么会发生这种情况的术语。

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 的回答，因为它解释了问题的原因并且对知识库非常有用

Answer 2

Medet 是正确的，var uploadFile 覆盖了外部的 function uploadFile()。但是，我想添加一些额外的解释，说明为什么 var test = function uploadFile() 与本地 var uploadFile

没有真正冲突

原因是当你将一个函数赋给一个变量时，你有一个函数表达式。通常它们是匿名的，但您已经创建了一个命名函数表达式。在这种情况下，函数名称仅在 uploadFile 函数本身内有效（可用于递归），这就是它不会与内部函数中定义的 uploadFile 冲突的原因。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#Named_function_expression

If you want to refer to the current function inside the function body, you need to create a named function expression. This name is then local only to the function body (scope). This also avoids using the non-standard arguments.callee property.

从 addEventListener 调用函数

Calling a function from addEventListener

javascript

dom-events