这两种方式调用函数的区别

Question

PopupFirstNameButton.addEventListener('click', FirstNameFunction);

// This gets called
function FirstNameFunction(){
  alert("Hello");   
}

// This does not
var FirstNameFunction = function (){
    alert("Hello");   
}

Answer 1

var FirstNameFunction = function (){
    alert("Hello");   
}

这是一个赋值语句,因此只有在执行此操作后,FirstNameFunction才会为其分配一个值.所以当PopupFirstNameButton.addEventListener('click', FirstNameFunction); 执行时,FirstNameFunction是undefined

Answer 2

在第一个示例中,您将创建一个命名函数.函数的名称是FirstNameFunction.

在第二个示例中,您将创建一个匿名函数(一个没有名称的函数).但是,您还要定义一个名为FirstNameFunction的变量,该变量包含对匿名函数的引用.在这种情况下,FirstNameFunction不是函数本身,而只是引用它的变量.

在第一行分配事件处理程序时这些差异很重要的原因是因为全局范围命名函数可以从代码中的任何地方引用,只要它们在您尝试使用之前已经解析并解释了它们的声明他们.另一方面,变量只能在范围内使用.这意味着在它们被定义之后,并且在它们超出范围之前.因此,您应该能够将第二个声明方法与事件处理程序赋值一起使用,只要在调用事件处理程序之前声明指向匿名函数的变量并在同一范围内执行它.

这有效:

var FirstNameFunction = function (){
    alert("Hello");   
}    
PopupFirstNameButton.addEventListener('click', FirstNameFunction, false);

这不是:

PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // FirstNameFunction is undefined!!
var FirstNameFunction = function (){
    alert("Hello");   
}    

这也不是:

function declareFunction()
{
    var FirstNameFunction = function (){
        alert("Hello");   
    }    
}  // FirstNameFunction falls out of scope here and is no longer declared

declareFunction(); // The anonymous function exists while this is running but the reference is lost when the function returns

PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // This doesn't work.