Вызов функции из 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

В качестве ответа я просто ищу некоторые термины, которые я могу понять, почему это происходит.

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

Метет является правильным, var uploadFile переопределяет function uploadFile() от внешнего. Тем не менее, я хотел бы добавить дополнительные пояснения относительно того, почему var test = function uploadFile() не сталкивается с местными var uploadFile

Причина в том, что при назначении функции переменной вы имеете выражение функции. Обычно они анонимны, но вы создали именованное выражение функции. В этом случае имя функции действует только в самой функции (может использоваться для рекурсии), поэтому она не сталкивается с uploadFile, определенным во внутренней функции.

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

Если вы хотите обратиться к текущей функции внутри тела функции, необходимо создать выражение с именем функции. Это имя затем локально только для тела функции (scope). Это также позволяет избежать использования нестандартного свойства arguments.callee.