javascript - javascript 中的函数 - 定义和调用它们，有或没有函数名

Question

我的问题最容易用代码块及其下方的问题来解释。

但这里尝试用英语解释我的问题:

我正在学习 JavaScript(而且我很懒，所以我使用了很多 jQuery...;) )并且我遇到了一些我不太了解的东西，而且我不知道它叫什么，因此我不知道应该研究什么术语。

基本上我想知道什么时候有必要使用 function(){ ... }(没有名字)以及什么时候使用 function function_name(){ ... }(带有名称)，以及如何使用 .click() .post() 或 setTimeout().

我知道一些 jQuery 函数，例如 .click() 需要您放入要调用的函数。但问题是，你不能只说 .click( function_name() ) (如果我正确解释了我的测试结果，这将在执行脚本后立即调用该函数)而你必须做 .click( function(){ ... }) 或者您可以执行 .click( function function_name(){ ... })。我还发现你可以说 .click( function_name ) 只要你事先定义 var function_name = function function_name(){ ... } 而函数名称是可选的，添加或不添加都可以。

我举了一个例子，包含了我能想到的所有可能的场景。我确实发现了哪些有效，哪些无效，现在我想找出为什么每个有效而其他无效的原因。

我希望理解这一点能帮助我更好地理解异步函数，例如 .post() 或 setTimeout()。

<button id="one">Button 1</button>
<button id="two">Button 2</button>
<button id="three">Button 3</button>
<button id="four">Button 4</button>
<button id="five">Button 5</button>
<button id="six">Button 6</button>
<button id="seven">Button 7</button>
<button id="eight">Button 8</button>
<button id="nine">Button 9</button>

<script type="text/javascript">
    function alert_three(){
        alert('three');
    }

    var alert_four = function(){
        alert('four');
    }

    function alert_five(){
        alert('five');
    }

    var alert_five = alert_five();
    //this will alert five right away, because we call to the function alert five, which does not return anything but creates an alert box.

    var alert_six = function alert_six(){
        alert('six');
    }

    $('#one').click( function(){
        alert('one');
    });
    //this will work correctly.

    $('#two').click( alert('two') );
    //this will alert two right away, because...?
    //it wont do anything else on click

    $('#three').click( alert_three() );
    //this will alert three right away, because...?
    //it wont do anything else on click

    $('#four').click( alert_four );
    //this will work correctly.

    $('#five').click( alert_five );
    //this wont do anything else on click

    $('#six').click( alert_six );
    //this will work correctly.

    $('#seven').click( function alert_seven(){
        alert('seven');
    });
    //this will work correctly.

    function alert_eight(){
        return function(){
           alert('eight');
        }
    }

    $('#eight').click( alert_eight() );
    //this will work correctly      

    function alert_nine(){
       alert('nine');
    }

    $('#nine').click( alert_nine ); 
    //this will not work
</script>

• 为什么这个脚本在启动时会先警告五个，然后警告两个，然后警告三个？
• 为什么只有按钮 1、4、6 和 7 可以正常工作？
• 您如何描述工作按钮之间的差异？
• 您会在何时以及为什么使用哪种变体？(意思是:何时给它一个name，什么时候把函数写在变量里？)

相同的 fiddle : http://jsfiddle.net/ZfnaM/5/

Answer 1

Basically I am wondering when it is necessary to use function(){ ... } (without a name) and when to use function function_name(){ ... } (with a name)

从来没有真正必要使用任何一个。只是有时使用其中一种更方便。

and how to execute a function with things like .click() .post() or setTimeout().

如果您正在使用接受回调的函数，那么您只需像任何其他变量或文字一样传递要用作回调的函数。

如果您想编写一个使用回调的函数，那么它基本上可以归结为:

function accepts_callback(callback) {
    callback();
}
function a_callback() {
    alert("This is a callback");
}
accepts_callback(a_callback);

you can't just say .click( function_name() )

在函数之后放置 () 将调用它。不要包括它们，因为您可以通过它。

Why will this script alert first five,

除了声明函数之外，您要做的第一件事是进行函数调用:var alert_five = alert_five();

then two

$('#two').click( alert('two') ); //this will alert two right away, because...?

你在这里调用alert

//it wont do anything else on click

alert 的返回值总是undefined，这不是一个函数

then three on startup?

$('#three').click( alert_three() ); //this will alert three right away, because...?

您正在立即调用 alert_three 函数。

//it wont do anything else on click

alert_three 没有返回语句，所以它返回 undefined，这不是一个函数

Why will only buttons 1, 4, 6, and 7 work correcty?

它们是唯一将函数作为参数提供给 click() 的对象。