Ámbito y uso de la palabra this en el desarrollo de plugins jQuery

Un plugin jQuery tiene un propósito, lógicamente no vas a crear un plugin para realizar una salida "Hola Mundo", se supone que el trabajo que tienes entre manos es más complejo que eso, de no ser así, mejor ponerse a cotillear en el mural de Facebook, ¡Nooo! que se pierde el tiempo, mejor inventar algo ó por qué no, conocer el ambito y uso de la palabra reservada this en el desarrollo de plugins con jQuery.

Un plugin tan básico como el siguiente te dá la estructura básica para cosas más complejas, el típico "Hola Mundo" cansa ...

(function($){
	/* Método */
	$.fn.holamundo = function(){
		this.html("Hola Mundo cansino");
	};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("body").holamundo();
});

Dentro del método podéis encontrar la palabra this: this.html("Hola Mundo cansino"), curiosa esta palabra y tan útil, ya que con esta palabra estamos accediendo-referenciando al elemento que está llamando al método, en el ejemplo anterior a "body". this nos proporciona información, veamos como obtener un string con el selector que realiza la llamada ...

(function($){
	/* Método */
	$.fn._selector = function(){
	
		//Acceso al selector
		var self = this.selector;
		$(self).text(self);
		};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("body")._selector();
});

Si ejecutáis este código vais a ver como os muestra en el body el string "body", hemos accedido a lo más íntimo del elemento con this.selector. A tener en cuenta la importancia de utilizar la palabra reservada var al declarar variables dentro de los métodos, en los métodos casi todo es intimidad, que nadie se cuele en tu casa y te forme un lío.

El ámbito de this dentro del método también es muy importante aclararlo, un método puede tener en su código interno la llamada a otro método, dentro de la llamada a este método this deja de referenciar al padre y se somete a este otro que convive en su interior, vean el siguiente ejemplo ...

<script>

(function($){
	/* Método */
	$.fn.egocentrico = function(){
	
			//Elemento padre
			this.prepend("<p>Aquí afuera soy el puto amo</p>");
			//Detectar el evento click para los elementos p hijos del elemento padre
			this.find("p").on("mouseover", function(){
				//p interno, this hace referencia al elemento p
				$(this).html("Aquí dentro mando yo");
			});
		};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("#yo").egocentrico();
});
 
</script>

<div id="yo"><p>Que pasa chaval?</p></div>

Como podéis ver this funciona de forma distinta, según los casos descritos en el ejemplo, curioso también el método find() que nos permite acceder a los elementos internos, con un simple this.find("p"), en la construcción de plugins seguro que utilizaréis más de una vez el método find(), bueno y por el momento creo que está bien, es un buen comienzo conocer el ámbito y uso de la palabra reservada this en el desarrollo de plugins, si habéis entendido este concepto, ya tenéis las puertas abiertas para escribir vuestro propios plugins jQuery. A seguir investigando.