Dentro de un complemento de jQuery, devuelve 'this' o '$ (this)'?

Question

Al crear un complemento jQuery, ¿qué debería devolverse en una función $.fn? ¿Es return this o return $(this)? Algunos de los sitios web me encontré cuando se busca utilizar la primera, mientras que otros sitios web utilizan este último:

• return $(this): http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx (consejo 10)
• return this: http://devheart.org/articles/tutorial-creating-a-jquery-plugin/

Cuál es el diferencia, y lo que se prefiere?

Answer 1

Directamente dentro de una función que vive en $.fn (el prototipo del constructor de jQuery), this hace referencia a la instancia de la colección jQuery en la que está funcionando la función. Devolver this es apropiado. Envolverlo en $() solo agrega un peso innecesario a su código.

Ver Context section of jQuery plugin authoring guidelines.

Answer 2

this es el objeto jQuery en el que se ha invocado su función; $(this) es una copia superficial del objeto (otro objeto jQuery, que hace referencia a los mismos elementos DOM o cualquier objeto que tenga el original). Normalmente, this debería ser mejor porque 1) crear una copia del objeto jQuery requiere una cantidad no trivial de operaciones, 2) generalmente no se cambian las propiedades del objeto jQuery.

Ahora bien, si haces propiedades de cambio de entonces los dos se comportan de manera diferente:

var foo = $('#id'); 
var bar = $(foo); 
foo.baz = 1; 
bar.baz; // undefined 

y en ese caso volver $(this) podría tener más sentido. Por ejemplo, la propia función de jQuery add hace algo como esto internamente:

var next = $(this); 
// add parameter to next 
return next; 

por lo que cuando se agrega un elemento a un objeto jQuery, que no modifica el original:

var foo = $('html'); 
var bar = foo.add('body'); 
bar.length; // 2 
foo.length; // 1