$ this проти $ (this) у jQuery

Я бачив деякі дискусії щодо SO щодо $(this)vs $thisв jQuery, і вони для мене мають сенс. (Див. Дискусію тут для прикладу.)

Але як щодо фрагмента нижче, з підручника з веб-сайтів jQuery, який показує, як працює прив’язка до мережі?

(function ($) {

    $.fn.lockDimensions = function (type) {

        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }

        });

    };
})(jQuery);

Що означає $thisвище? Просто коли я думаю, що я це зрозумів ...

$thisє просто звичайною змінною. $Символ є допустимим символом в іменах змінних, так$this діє так само , як і будь-яка інша , НЕ зарезервоване ім'я змінного. Це функціонально ідентично виклику змінної JellyBean.

Зазвичай ви використовуєте, var $this = $(this);щоб уникнути створення нового об’єкта jQuery частіше, ніж це потрібно. У випадку коду нижче ви створюєте лише один об'єкт замість двох / чотирьох. Це абсолютно не пов’язано з привабливістю.

Можна також назвати це that, $thi$або що - небудь ще (не використовувати останній один , хоча, це некрасиво: р) , як $це тільки простий символ в JavaScript, так само , як я є.

thisу javascript (зазвичай) являє собою посилання на об'єкт, який викликав поточну функцію. Ця концепція дещо розмита завдяки спробам jQuery зробити використання thisбільш зручним для користувачів у межах їх .each()циклічної структури.

поза.each() ,thisпредставляє об'єкт JQueryякий.lockDimensionsвикликається.

всередині.each() вона представляє поточний об'єкт итерационного DOM.

Як правило, метою зберігання $(this)в локальній змінній є запобігання виклику функції jQuery $() кілька разів , кешування jQueryized this повинно сприяти ефективності, якщо вам доведеться використовувати її кілька разів.

$є просто дійсним символом імені змінної та використовується як перший символ імені змінної, як правило, щоб поставити програміста в чергу, що він уже є об’єктом jQuery (і має відповідні методи / властивості).

Це питання насправді не пов'язане з ланцюговою здатністю, але для підтримки ланцюгової здатності ви повинні повернутися, thisщоб можна було додати інші виклики функцій, а також підтримувати значення thisцих дзвінків.

Ви, можливо, пропустили цей рядок:

var $this = $(this);

Тут $thisпросто змінна, що містить значення $(this). Ви можете використовувати його взаємозамінно, з $(this)тим перевагою, що ви не робите однаковий пошук знову і знову.

$thisце просто локальна змінна, названа таким чином, щоб нагадати вам $(this). Це економить роботу зі створення версії jQuery this, і ви можете використовувати її кілька разів.

$this- це просто локальна копія thisзагорнутого в jQuery.

У довгостроковій перспективі зберігати локальну копію, а не обгортати її thisкожного разу, коли це потрібно, набагато ефективніше.

$this = $(this)є способом кешування об’єкта jQuery. Кожного разу запустити функцію jQuery, тому зберігання вихідних даних дозволяє повторно використовувати селектор знову і знову, не викликаючи функції jQuery знову.

Він просто заповнює $thisзмінну $(this), так що вам не потрібно шукати $(this)кожен виклик елемента. Він має кращі показники

var $this = $(this);

 $this = $(this)

це означає, що ви присвоюєте поточний об'єкт змінній з іменем $this. Це не ключове слово.

Це просто ім'я змінної.

Це досить просто: $this = $(this). Це просто скорочення, що використовується в області внутрішньої функції. Знак долара в цьому випадку є лише символом, він взагалі не відноситься до jQuery. Це могло бути так само добре названо _thisабо xthis, $це лише нагадування про те, що містить змінна.

Це може здатися безглуздим, але він усуває три зайві виклики методів ( $()функція не є безкоштовною), тому вона, швидше за все, використовується там з міркувань продуктивності.

Всередині $.fn.lockDimensions, thisтобто об'єкт JQuery , який lockDimensionsназивається на ній.

Усередині .each, thisтепер посилається на DOMElement у поточній ітерації циклу. $(this)обгортає DOMElement в об’єкт jQuery і var $this = $(this);просто зберігає $(this)у викликовій змінній $this, тому конструктору jQuery не потрібно викликати кілька разів (якщо $(this)замість цього ви використовували ).

$знак зазвичай використовується перед іменами змінних у JavaScript, щоб розрізнити загальне значення та об'єкт jQuery. Отже, тут $thisпросто отримується значення, $(this)яке повертає об'єкт jQuery з this. $є лише частиною дійсного імені змінної.

$this- змінна з іменем, $thisщо містить посилання на $(this). Трохи безглуздо IMO.

Я хочу заскочити сюди, хоча я не маю експертних навичок jQuery.

Незліченну кількість разів я бачу рядки коду або поняття, подібні до:

var $this = $(this);

Тож я переробляю його подібно до:

var $jims_this = $(this);

І перевірити це. Також я роблю це, щоб усунути будь-яку плутанину, яка може виникнути у мене.

Ось ще один приклад подібного погано поясненого коду:

 <style>
    a.a { font-weight: bold; }
 </style>

Потім додайте виклик addClass до вашого сценарію:

  $("a").addClass("a");

Це працює, але бентежить. Це можна було записати так:

<style>
a.my_bold_class { font-weight: bold; }
</style>

 $("a").addClass("my_bold_class");

Джим

Ви заблукали у сферу дії та закриття javascript.

Короткий відповідь:

this.bar()

виконується в межах foo, (оскільки це стосується foo)

var barf = this.bar;
barf();

виконується в глобальному масштабі.

this.bar в основному означає:

виконати функцію, на яку вказує this.bar, у межах цього (foo). Коли ви скопіювали this.bar в barf, і запустіть barf. Javascript розуміється як запуск функції, на яку вказує barf, і оскільки цього немає, він просто працює в глобальному масштабі.

Щоб виправити це, ви можете змінити

barf();

до приблизно такого:

barf.apply(this);

Це говорить Javascript прив’язати область дії до barf перед його виконанням.

Для подій jquery вам потрібно буде використовувати анонімну функцію або розширити функцію прив'язки в прототипі для підтримки масштабування.