2014-07-05 4 views
3

При указании функции обработчика в jQuery существует ли разница между заданием именованной функции для обработчика или оберткой вашей именованной функции в анонимной функции?Разница в указании именованной функции для обработчика или анонимной функции?

Задание именованной функции:

$("#foo").on("click", bar); 

по сравнению с оберточной именем функции в анонимной функции:

$("#foo").on("click", function() { 
    bar(); 
}) 
+2

'this' не будет связан в' bar' во втором. – Barmar

+2

Чтобы прояснить комментарий @ Barmar, 'this' * will * будет связан во втором, но не с элементом, который был нажат. Основное различие между ними - это вызывающий контекст, который определяет, что означает «это». – JAAulde

ответ

1

Они почти эквивалентны. Эквивалент версия с анонимной функцией будет:

$("#foo").on("click", function(event) { 
    bar.call(this, event); 
}); 

Когда JQuery запускает обработчик события, он связывает контекст к целевому элементу. this.bar() передает эту привязку к функции.

Если вы хотите убрать определенный обработчик с помощью .off(), вам нужно использовать первую версию с указанной функцией. Если вы используете анонимную функцию, нет способа ссылаться на нее при ее удалении.

+0

Вы уверены, что можете привязать 'bar()' к элементу? Как насчет 'bind()' (или call/apply)? – adeneo

+0

Я ничего не цепляю. Я просто воспроизвожу способ, которым jQuery связывает «this» с целевым объектом, когда он вызывает обработчик события. – Barmar

+0

Эх, не совсем! – adeneo

1

Только если вы хотите, чтобы иметь возможность вызвать функцию позже.

+0

Почему он не может называть 'bar' позже во второй версии? – Barmar

+0

Я неправильно читаю пример. вы правы. «bar» по-прежнему остается той же функцией, независимо от того, где она называется. Я подумал, что во втором примере он помещал код в функциональную панель, а не вызывал ее. –

1

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

Но, названная функция в целом лучше, если вы используете отладчики javascript. Очень приятно смотреть на трассировку стека, если каждый стек кадра имеет разумное имя вместо «анонимной функции».

PS - Вы можете назвать выражение функции, как так

$("#foo").on("click", function bar() { 
    // "this" will be bound to the clicked element 
}); 

Давать вам краткий синтаксис, именованный функцию, чтобы позже удалить обработчик событий с, полезным связывание «это», и лучше трассировки стека.

Смежные вопросы