javascript - 名前による Javascript バインディングイベントハンドラー関数

Question

重複の可能性:
JavaScript: var functionName = function() {} vs function functionName() {}

なぜこれが機能するのですか...

$("#clickme").click( showAlert );

function showAlert() {
  alert( "Hiya" );
}

…でもこれじゃない…？

$("#clickme").click( showAlert );

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

score 4 · Accepted Answer

これは巻き上げが原因で発生しています。
最初のケースでは、コードは次のように解釈されます（関数宣言が最初にどのように評価されているかに注意してください）。

function showAlert() {
   alert( "Hiya" );
}
$("#clickme").click( showAlert );

そしてあなたの2番目は次のように解釈されます：

var showAlert;
$("#clickme").click( showAlert );

showAlert = function() {
   alert( "Hello" );
}

は変数宣言であり、関数宣言ではないため（キーワードにshowAlert注意）、変数宣言が最初に評価され、イベントハンドラーをバインドするまでに、変数が宣言されますが、値は保持されます。 varshowAlertundefined

これが巻き上げの機能です。変数と関数の宣言をクロージャーの先頭に巻き上げます。ここSOを含め、そこに住む
ための優れたリソースがいくつかあります。

score 3 · Accepted Answer

最初はFunction Declaration..

2番目はfunction Expression..

関数宣言は、コードが実行される前に最初に読み取られます。

したがって、最初のケースが機能します。2 番目の方法は、関数が割り当てられるまでにはまだ定義されていないため、機能しません..

だからこれはうまくいく

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

$("#clickme").click( showAlert );

つまり、関数を定義してからハンドラを割り当てます

javascript - 名前による Javascript バインディング イベント ハンドラー関数