引数をコールバック関数に渡す場合

Question

JavaScriptのコールバック関数に多少の曖昧さがあります。

function firstFunction() 
{ 
var message = "something"; 
secondFunction(message); 
} 

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click',thirdFunction(message)); 
} 

function thirdFunction(message) 
{ 
console.log("the messages is: "+message); 
} 

私は上記のスクリプトを実行し、thirdFunctionは、ボタンをクリックせずに実行されます：次のように

最初のコードが構成されています。

若干の調査の後で、私はclosureについてジャバスクリプトで読んでいます。次にコードを次の構造に変更しました：

function firstFunction() 
{ 
var message = "something"; 
secondFunction(message); 
} 

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click',thirdFunction); 
} 

function thirdFunction(message) 
{ 
    return function(){ 
    console.log("the messages is: "+message); 
    } 
} 

私は期待した結果を得ました。 thirdFunctionは、ボタンをクリックしたときにのみ実行されます。

私の2番目のコード構造が正しいかどうか分かりませんか？以前のプログラミングで関数を返すことはなかったので、私はクロージャの概念を正しく得ているかどうかはわかりません。これは私にとって新しい概念です。私が間違っているなら、私を修正してください。ソリューションの一部はこのようにそれを書くことをお勧め ：

EDITコードの可読性のために

myButton.addEventListener('click', function() { thirdFunction(message) }); 

、私はこれを避けるためにしようとしています。私はthirdFunctionのコードをsecondFunctionの外に置くことを好みます。

Answer 1

は正しい環境でクロージャを作るために無名関数を使用します。

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click', function() { 
    thirdFunction(message) 
    }); 
}