Почему 'this' в обратных вызовах jquery с цепочкой является элементом DOM?

Question

Так что я знаю, что при использовании $.fn.each, $.fn.bindи т. д., это стандартно для this Ключевое слово в JQuery цепочки обратных вызовов, чтобы быть элементом DOM.

Я знаю, что в своей разработке, по крайней мере, я обычно хочу, чтобы элемент DOM был помещен в набор jQuery - 90% времени я в конечном итоге делаю var $this = $(this), Я уверен, что было хорошее (вероятно, основанное на производительности) обоснование того, почему они решили связать с развернутым элементом, но кто-нибудь знает, что именно это было?

Это одна из тех вещей, на которые мне хотелось бы знать ответ, и это может открыть дверь для понимания библиотеки и языка на более глубоком уровне.

Answer 1

Если кто-то не сможет указать на статью Джона Резига, в которой конкретно рассматривается этот вопрос, я сомневаюсь в том, что окончательный ответ предлагается. Но я часто задавался этим вопросом, когда начинал использовать jQuery, и пришел к выводу, что это наименее вредная вещь. В конце концов, вполне возможно, что все, что вам нужно, это элемент DOM. Если вам нужно / хотите использовать оболочку jQuery, то $() только три нажатия клавиш (или больше из вас делают var $this = $(this); вещь). В отличие от того, чтобы библиотека всегда делала это за вас, что включает в себя несколько вызовов функций и выделение памяти, когда вполне может оказаться, что вам это не нужно.

Например, рассмотрим:

$("input").each(function() {
    // Use this.value
});

Там нет никаких оснований для jQuery-оболочки вокруг элемента DOM. this.value это все, что вам нужно для всех input поля (кроме input type="file", но val() Вам там тоже не помогут). В обработчиках событий (где this также "просто" необработанный элемент), вы можете не смотреть на this совсем.

Но в этом случае:

$(":input").each(function() {
    var val = $(this).val();
    // Use `val`
});

... есть подлинная причина для использования $(this): :input селектор соответствует нескольким различным типам элементов (input, select, button, textarea) для которого значение исходит из разных свойств, и val() тезисы, которые для вас.

Итак, я пришел к выводу, что предоставление необработанного элемента - это вопрос производительности. Если вы его вообще не используете или используете только базовые свойства DOM, нет необходимости заключать его в экземпляр jQuery. Если вам нужно / хотите сделать это, вы можете сделать это в своем коде.

Answer 2

Я уверен, что было хорошее (вероятно, основанное на производительности) обоснование

Я уверен, что это именно так. Если есть вероятность того, что вам может не понадобиться оболочка jQuery (которая есть - вряд ли можно работать напрямую со свойствами DOM, особенно в обратных вызовах таких функций, как val; на самом деле, вам может не потребоваться смотреть на элемент вообще) тогда вы не хотите тратить время и ресурсы на создание объекта jQuery.

В качестве примера, вот jsperf, который показывает, что делать $(this) на каждом элементе в цикле несет столько же накладных расходов, сколько each Функция делает сама.