Как я могу передать аргументы анонимным функциям в JavaScript?


Я пытаюсь выяснить, как передать аргументы анонимной функции в 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 использует много анонимных функций, каков наилучший способ передать этот аргумент?

10 69

10 ответов:

ваш конкретный случай можно просто исправить, чтобы работать:

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

этот пример будет работать, потому что анонимная функция, созданная и назначенная в качестве обработчика элементу, будет иметь доступ к переменным, определенным в контексте, в котором она была создана.

для записи обработчик (который вы назначаете через свойство setting 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);

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

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

для получения дополнительной информации выполните поиск 'javascript closures'

обработчики событий ожидают один параметр, который является событием, которое было запущено. Вы переименовываете это в "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).

Если вы пишите

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

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