如何将参数传递给JavaScript中的匿名函数？

Question

我想弄清楚如何将参数传递给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> 

当点击按钮的消息：应该会出现。但是匿名函数中的myMessage变量为空。

jQuery使用了很多匿名函数，传递该参数的最佳方式是什么？

Answer 1

您的特定情况下，可以简单地进行了修正工作：

<script type="text/javascript"> 
    var myButton = document.getElementById("myButton"); 
    var myMessage = "it's working"; 
    myButton.onclick = function() { alert(myMessage); }; 
</script> 

本示例将工作，因为匿名函数创建并分配一个处理程序元素将有机会获得在它的上下文中定义的变量创建。

对于记录，处理程序（您通过设置onxxx属性分配）预计单个参数取即用DOM传递事件对象，你不能强迫传递其他参数在那里

Answer 2

通过消除来自匿名函数的参数将在主体中可用。

myButton.onclick = function() { alert(myMessage); }; 

欲了解更多信息搜索“的JavaScript关闭”

Answer 3

你做了什么不工作，因为你是一个结合事件的功能。因此，事件定义了事件引发时会调用的参数（即，JavaScript不知道您绑定的函数中的参数，因此无法传递任何东西）。

你可以这样做但是：

<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> 

Answer 4

您所做的一切是创建一个新的匿名函数，它然后把它分配给函数内部的局部变量myMessage一个参数。由于没有参数实际传递，并且没有传递值的参数变为null，所以你的函数只是alert（null）。

Answer 5

如果你把它写像

myButton.onclick = function() { alert(myMessage); }; 

它将工作，但我不知道这是否回答您的问题。

Answer 6

例子：

<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> 

Answer 7

代表的发言：

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 
} 

Answer 8

事件处理程序期待一个参数，它是被解雇的事件。您恰好将其重命名为'myMessage'，因此您提醒事件对象而不是您的消息。

闭包可以让你引用你在函数外部定义的变量，但是如果你正在使用Jquery，你可能想看看它的事件特定API例如

http://docs.jquery.com/Events/bind#typedatafn

这对于传递自己的数据的选项。

Answer 9

<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）。

Answer 10

以下是使用闭包来解决您引用的问题的方法。它还考虑到可能随时间改变消息而不影响绑定的事实。它使用jQuery来简洁。

var msg = (function(message){ 
    var _message = message; 
    return { 
    say:function(){alert(_message)}, 
    change:function(message){_message = message} 
    }; 
})("My Message"); 
$("#myButton").click(msg.say);