Question

我是Javascript的新手并试图了解匿名函数的工作原理，

当我运行下面的页面时，我会看到“飞向太阳”警告框。不知道为什么会被触发

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script>
            function flytothemoon()
            {
            alert("Zoom")
            }

            var flytothesun = function(){
            alert("Fly to the Sun");    
            }
            flytothesun();
        </script>
    </head>
    <body>
        <input type="submit" onclick=flytothesun()>
    </body>
</html>

Answer 1

function flytothemoon() { // definition of flytothemoon
    alert("Zoom")
}

var flytothesun = function(){ // definition of flytothesun
    alert("Fly to the Sun");    
}
flytothesun(); // invocation of flytothesun

<input type="submit" onclick=flytothesun()> // handler

我用4条评论注释了代码：

flytothemoon的定义。该部分定义了一个可以在代码中的任何地方使用的函数（甚至在您定义它之前的行）。
flytothesun的定义。该部分定义了一个引用匿名函数的变量。您可以使用该变量来调用该函数，但只能在执行定义它的行之后。
调用flytothesun方法。使用2处的引用，您调用了该函数。这是警报出现的时间。
添加了作为处理程序的函数。你的语法错了。它应该是onclick="flytothesun()"。这也将调用该函数，但仅当在输入字段上触发click事件时（当您在输入上按下鼠标按钮时）。

Answer 2

如果您正在尝试onclick，那么您忘记在函数周围提供双引号并且dint为它提供任何值（尝试下面的html代码）：

<input type="submit" onclick="flytothesun()" value="click" />

Answer 3

如果你还没有，我强烈建议你阅读一篇很棒的文章Named function expressions demystified，我将从中引用答案。

在ECMAScript中创建函数对象的两种最常用方法之一是通过函数表达式或函数声明。两者之间的区别相当混乱。至少这对我来说。 ECMA规范唯一明确的一点是，函数声明必须始终具有标识符（或函数名称，如果您愿意），并且函数表达式可以省略它：

功能声明：
  函数标识符（FormalParameterList opt）{FunctionBody}

FunctionExpression：
  function Identifier opt（FormalParameterList opt）{FunctionBody}

使用函数声明

声明了您的第一个函数

function flytothemoon()  {
    alert("Zoom")
}

的

首先，在任何其他表达式之前解析和评估函数声明。即使声明位于源的最后位置，它也将首先评估范围中包含的任何其他表达式。 的

所以，没什么特别的。一个通常声明的函数，可以使用函数标识符flytothemoon后跟parens ()来调用。

你的第二个功能有点不同，因为它是一个函数表达式。

我们可以看到，当省略标识符时，“某些东西”只能是表达式。

第二种情况会发生什么？

为了使理解更容易，函数是JavaScript中的第一类成员，最后，它们只是对象，可以分配给变量。

var flytothesun = function(){
        alert("Fly to the Sun");    
        }

声明了一个新变量flytothesun。
然后评估初始化变量的表达式。
1. 表达式的结果是对匿名函数的引用
2. 然后将此引用分配给您的变量flytothesun

请记住，parens ()会调用这些函数吗？

flytothesun ();

您只是调用变量flytothesun引用的函数。

如评论中所述，您还可以命名函数表达式，其目的和好处在文章中有很好的描述。
如果您有兴趣，请阅读;）

由于它没有直接解决问题中的一点，我将仅添加两个最小的（可能不是那些实用的）示例。

的 1。递归。函数引用可通过函数中的标识符访问。

var sixthParent = (function parent (el,n) { return n?parent (el.parentElement,--n):el})(someChildElement,6);

如您所见，我们可以使用命名函数表达式，通过使用标识符来递归地获取父元素

var results = [];
someAjaxReqeust (function callback (response) {
                     results.push (response.data);
                     if (response.has_more) {
                         someAjaxRequest (callback);
                     } else {
                         console.log (results);
                     }
                 });

在这种情况下，我们使用标识符将回调函数引用传递给我们的ajaxhandler，以便在响应指示有更多数据时进行连续的ajax调用。

的 2。调试。函数表达式可选标识符将包含在stacktrace中，以防出现错误，这有助于我们进行调试。如果没有名字，我们会得到<anonymous>

例如

try {
    (function debug() {
        throw new Error("dummy")
    })()
} catch (e) {
    console.log(e.stack)
}
/*
Error: dummy
    at debug (<anonymous>:4:15)
    at <anonymous>:5:7
    at Object.InjectedScript._evaluateOn (<anonymous>:581:39)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:540:52)
    at Object.InjectedScript.evaluate (<anonymous>:459:21) 
/*

Answer 4

以下是解释：

var flytothesun = function(){
    alert("Fly to the Sun");    
}

以上是您收到警报的功能。

以下代码在脚本部分中定义，这意味着在页面加载时，名为flytothesun的函数应该调用，这就是它执行警报的原因。

 flytothesun();

上面的代码表示在加载页面时调用该函数。由于您在页面加载时收到飞向太阳的消息。

匿名函数Javascript

4 个答案: