Как передать аргументы анонимным функциям в 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>

При нажатии на кнопку должно появиться сообщение: it's working. Однако переменная 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

То, что вы сделали, не работает, потому что вы привязываете событие к функции. Таким образом, это событие, которое определяет параметры, которые будут вызываться при его возникновении (т. Е. 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>

Answer 3

Ниже приведен метод использования замыканий для решения проблемы, на которую вы ссылаетесь. Он также учитывает тот факт, что может изменить сообщение с течением времени, не влияя на привязку. И он использует JQuery для краткости.

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

Answer 4

При удалении параметра из анонимной функции будут доступны в теле.

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

Для получения дополнительной информации ищите 'javascript closures'

Answer 5

Обработчики событий ожидают один параметр, который является событием, которое было запущено. Вы переименовываете это в «myMessage» и, следовательно, предупреждаете объект события, а не свое сообщение.

Замыкание может позволить вам ссылаться на переменную, которую вы определили вне функции, однако, если вы используете Jquery, вы можете захотеть взглянуть на его специфичный для события API, например,

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

Имеется опция для передачи ваших собственных данных.

Answer 6

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

Пример:

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

Если вы напишите это как

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

Это сработает, но я не знаю, отвечает ли это на ваши вопросы.

Answer 10

Вы создали новую анонимную функцию, которая принимает один параметр, который затем присваивается локальной переменной myMessage внутри функции. Поскольку никакие аргументы на самом деле не передаются, а аргументы, для которых не передано значение, становятся нулевыми, ваша функция просто выдает предупреждение (нулевое).