JavaScriptで無名関数に引数を渡す方法を理解しようとしています。
このサンプルコードをチェックしてください。私が何を意味するのかがわかると思います。
<input type="button" value="Click me" id="myButton" />
<script type="text/javascript">
var myButton = document.getElementById("myButton");
var myMessage = "it's working";
myButton.onclick = function(myMessage) { alert(myMessage); };
</script>
ボタンをクリックすると、メッセージ：it's workingが表示されます。ただし、myMessage無名関数内の変数はnullです。
jQueryは多くの無名関数を使用しますが、その引数を渡すための最良の方法は何ですか？
回答:
特定のケースは、機能するように簡単に修正できます。
<script type="text/javascript">
var myButton = document.getElementById("myButton");
var myMessage = "it's working";
myButton.onclick = function() { alert(myMessage); };
</script>
この例は、要素へのハンドラーとして作成および割り当てられた無名関数が、作成されたコンテキストで定義された変数にアクセスできるため、機能します。
レコードの場合、ハンドラー（onxxxプロパティの設定を通じて割り当てる）は、DOMによって渡されるイベントオブジェクトである単一の引数を取ることを想定しており、そこに他の引数を強制的に渡すことはできません。
イベントを関数にバインドしているため、実行したことは機能しません。そのため、イベントが発生したときに呼び出されるパラメーターを定義するのはイベントです（つまり、JavaScriptは、onclickにバインドした関数のパラメーターを認識しないため、何も渡すことができません）。
ただし、これを行うことができます。
<input type="button" value="Click me" id="myButton"/>
<script type="text/javascript">
var myButton = document.getElementById("myButton");
var myMessage = "it's working";
var myDelegate = function(message) {
alert(message);
}
myButton.onclick = function() {
myDelegate(myMessage);
};
</script>
以下は、クロージャーを使用して、参照する問題に対処する方法です。また、バインディングに影響を与えることなく、時間の経過とともにメッセージを変更する可能性があるという事実も考慮に入れています。また、jQueryを使用して簡潔にしています。
var msg = (function(message){
var _message = message;
return {
say:function(){alert(_message)},
change:function(message){_message = message}
};
})("My Message");
$("#myButton").click(msg.say);
_messageですか？なぜ使ってみませんmessageか？
匿名関数からパラメーターを削除することにより、本体で使用できるようになります。
myButton.onclick = function() { alert(myMessage); };
詳細については、「javascriptクロージャ」を検索してください
イベントハンドラーは、発生したイベントである1つのパラメーターを予期します。たまたまその名前を「myMessage」に変更しているため、メッセージではなくイベントオブジェクトにアラートを送信しています。
クロージャを使用すると、関数の外部で定義した変数を参照できますが、Jqueryを使用している場合は、そのイベント固有のAPIを確認することをお勧めします。
http://docs.jquery.com/Events/bind#typedatafn
これには、独自のデータを渡すためのオプションがあります。
<input type="button" value="Click me" id="myButton" />
<script type="text/javascript">
var myButton = document.getElementById("myButton");
myButton.myMessage = "it's working";
myButton.onclick = function() { alert(this.myMessage); };
</script>
これは、IE6 +のすべてを含む私のテストスイートで機能します。匿名関数はそれが属するオブジェクトを認識しているため、それを呼び出しているオブジェクト（この場合はmyButton）でデータを渡すことができます。
例：
<input type="button" value="Click me" id="myButton">
<script>
var myButton = document.getElementById("myButton");
var test = "zipzambam";
myButton.onclick = function(eventObject) {
if (!eventObject) {
eventObject = window.event;
}
if (!eventObject.target) {
eventObject.target = eventObject.srcElement;
}
alert(eventObject.target);
alert(test);
};
(function(myMessage) {
alert(myMessage);
})("Hello");
</script>
代表者：
function displayMessage(message, f)
{
f(message); // execute function "f" with variable "message"
}
function alerter(message)
{
alert(message);
}
function writer(message)
{
document.write(message);
}
displayMessage関数の実行：
function runDelegate()
{
displayMessage("Hello World!", alerter); // alert message
displayMessage("Hello World!", writer); // write message to DOM
}
これで、単一のパラメーターを受け取る新しい無名関数が作成され、関数内のローカル変数myMessageに割り当てられます。実際には引数は渡されず、値が渡されない引数はnullになるため、関数はalert（null）を実行するだけです。