Как я могу передать аргументы анонимным функциям в 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 ответов:
ваш конкретный случай можно просто исправить, чтобы работать:
<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).