如何將參數傳遞給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);