$this vs $(this) dans jQuery

Question

J'ai vu des discussions sur le SO concernant $(this) vs $this dans jQuery, et ils ont du sens pour moi. (Voir discussion ici pour un exemple).

Mais qu'en est-il de l'extrait ci-dessous, tiré du tutoriel sur le plugin de site web jQuery, qui montre comment fonctionne la chaînabilité ?

(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);

Qu'est-ce que $this représenter au-dessus ? Juste quand je pense que j'ai tout compris...

Answer 1

$this est juste une variable ordinaire. Le site $ est un caractère valide dans les noms de variables, donc $this agit de la même manière que tout autre nom de variable non réservé. C'est fonctionnellement identique à l'appel d'une variable JellyBean .

Answer 2

Vous utilisez généralement var $this = $(this); pour éviter de créer un nouvel objet jQuery plus souvent que nécessaire. Dans le cas du code ci-dessous, vous ne créez qu'un seul objet au lieu de deux/quatre. Cela n'a rien à voir avec la chaînabilité.

Vous pourriez aussi l'appeler that , $thi$ ou n'importe quoi d'autre (n'utilisez pas ce dernier cependant, il est moche :p) en tant que $ est un simple caractère en JavaScript, exactement comme les lettres a-z.

Answer 3

this en javascript (généralement) représente une référence à l'objet qui a invoqué la fonction courante. Ce concept est quelque peu brouillé par les tentatives de jQuery de rendre l'utilisation de la fonction this plus conviviale au sein de leur .each() stucture en boucle.

à l'extérieur de le site .each() , this représente l'objet jQuery qui .lockDimensions est invoqué par.

à l'intérieur de le site .each() il représente l'objet DOM itéré actuel.

En général, le but du stockage $(this) dans une variable locale est pour vous empêcher d'appeler la fonction jQuery $() plusieurs fois en mettant en cache une jQueryized this devrait aider à l'efficacité si vous devez l'utiliser plusieurs fois.

$ est simplement un caractère de nom de variable valide et est utilisé comme premier caractère d'un nom de variable. généralement pour signaler au programmeur qu'il s'agit déjà d'un objet jQuery (et qu'il dispose des méthodes/propriétés associées).

Cette question n'est en fait pas liée à la possibilité d'enchaîner, mais pour maintenir la possibilité d'enchaîner, vous devez renvoyer les données suivantes this afin que d'autres appels de fonction puissent être ajoutés, et maintenir la signification de this dans ces appels également.

Answer 4

Vous avez peut-être négligé cette ligne :

var $this = $(this);

Ici, $this est juste une variable qui contient la valeur de $(this) . Vous pouvez l'utiliser indifféremment avec $(this) avec l'avantage que vous ne faites pas la même recherche encore et encore.

Answer 5

$this est simplement une variable locale, nommée de cette façon pour vous rappeler de $(this) . Il permet d'éviter de créer la version jQuery de l'application this et vous pouvez l'utiliser plusieurs fois.