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.

Answer 3

你再次错过addEventListener的第三个参数！

这是因为第1行中使用的FirstNameFunction未定义，但第9行使用匿名函数语法。使用function语法FirstNameFunction符号已在范围内。

Answer 4

第一个函数在编译时绑定。 function foo()语法允许预先声明函数。

第二个是简单的变量声明。并且在声明它们之前你不能使用变量......

Answer 5

也许是因为他们都有相同的名字？我试过了：

<HEAD>
        <SCRIPT TYPE="text/JavaScript">
            // This does not get called?
            var FirstNameFunction = function (){
                alert("Hello");
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <button id="abutton" value="!"/>

        <SCRIPT TYPE="text/JavaScript">
            getById('abutton').addEventListener('click', FirstNameFunction);
            </SCRIPT>
    </BODY>

它起作用（至少在Chrome中）

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

5 个答案: