Aprendiendo Ext JS 3

El contexto y la variable “this” Más videos

Descripción del tema

El contexto es el objeto en el que se está operando al tiempo de ejecución, en JavaScript tu código siempre tendrá un contexto. En este tema se muestra como se puede cambiar o asignar el contexto a métodos o funciones.

El video

Quiero pedir una disculpa por que no se ha realizado el video para este tema, pues por falta de tiempo me ha sido imposible hacerlo, pero creo que con la explicación escrita es suficiente para comprender el concepto.

El contexto

La manera como funciona el contexto es mediante la variable “this” la cual hace referencia al objeto en el que está contenido el código en ejecución. En temas anteriores se ha mostrado que el “global scope” está contenido en el objeto “window” por lo tanto si se imprime en la consola de Firebug, la variable “this” desplegará al objeto “window”.
// this == window
console.debug(this);

function test(){
	// this == window
console.debug(this);
}

test();
La función “test” ha creado un nuevo scope pero no se le ha especificado un contexto en cual debe ejecutarse por lo tanto toma el contexto global y la variable “this” dentro del scope de la función “test” apunta al objeto “window”, es por eso que al imprimir en la consola la variable “this” mostrará al objeto “window”. Ahora veamos un ejemplo de una función en el contexto de un objeto:
var obj = {
	name: 'obj',
	run: function(){
		// this == obj
		this.value = 1;
		console.debug(this.name);
	}
};

obj.run();
En el código anterior se muestra cómo es que mediante la palabra reservada “this” se hace referencia al objeto “obj”, de esta manera se le pueden agregar o leer propiedades al objeto en cuestión.

Cambiar el contexto de una función

Cuando se crea una función anónima o una función dentro de algún método del objeto “obj” adopta un nuevo contexto por lo tanto estas funciones están en el contexto global, examinemos el siguiente ejemplo:
var obj = {
	name: 'obj',
	run: function(){
		this.value = 1;
		console.debug(this); // this == obj
		
		(function(){ // se crea un nuevo scope
			console.debug(this); // this == window
		})();
		
		function test(){ // se crea un nuevo scope
			console.debug(this); // this == window
		}
		
		test();
	}
};

obj.run();
Como se puede ver la variable “this” dentro de la función anónima y la función “test” apuntan al objeto “window” en lugar de apuntar al objeto “obj”, esto sucede porque estas funciones no han sido definidas como métodos el objeto “obj”, por lo tanto no pertenecen a “obj” y adoptan el contexto global. A continuación se muestra el mismo código anterior con una modificación en la función anónima y en la función “test”:
var obj = {
	name: 'obj',
	run: function(){
		this.value = 1;
		console.debug(this); // this == obj
		
		(function(){
			console.debug(this); // this == obj
		}).call(this); // se autoejecuta con el método call
		
		this.test = function(){ // se define como método de obj
			console.debug(this); // this == obj
		}
		
		this.test(); // se ejecuta dentro del contexto de obj
	}
};

obj.run();
En la función anónima se está utilizando el método “call” para ejecutarse a si misma y se le pasa como parámetro el objeto que utilizará como contexto al momento de ser ejecutada; de esta manera hemos cambiado el contexto global que anteriormente tenía por el contexto “obj”. Para la función “test” se ha cambiado la manera en que se definía anteriormente y ahora se ha definido como un método del objeto “obj”, de esta manera se ejecutará en el mismo contexto. El llamado de la función también ha cambiado, ya que ahora le anteponemos la variable “this” al método “test”. Existe otro método para cambiar el contexto de una función y es el método “apply” que recibe como primer parámetro el objeto que utilizará como contexto al ejecutarse y como segundo parámetro un arreglo con los parámetros que se necesiten pasar. El siguiente ejemplo muestra como usar esta función:
function notGlobal(){
	console.debug(this);
}

notGlobal.apply(obj,[1,2,'3',true]);

Conclusiones

Este tema es muy importante pues es necesario comprender el uso de la variable “this” para los siguientes temas de este curso. El contexto puede ser una herramienta muy poderosa si se sabe utilizar correctamente, pero también puede darnos muchos dolores de cabeza si no se ha comprendido su uso.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

18Comentarios

  • Avatar-7 Lestat 20/04/2009

    Hola ya no abra videos en el resto del curso :(? Saludos!

    • Avatar-8 Crysfel 20/04/2009

      Claro que si habrá!! solo que tengo una laringitis que no me deja hablar :( espero que este semana pueda recuperarme para continuar con los videos, mientras tanto pues solamente escribo. saludos y sigue pendiente.

      • Avatar-9 Juan Carlos Garcia 25/04/2009

        Hola, en cambiar el contexto de una funcion, como se que las funciones no estan definidas como metodos del objeto obj ?? me pierdo entre la 3ra y 4ta. impresion de pantalla.

        • Avatar-3 Giovani Generali 26/04/2009

          Hola, Crysfel. Me faltan los videos, que ayudan a comprender mejor. Aun así sigo en el camino:)

          • Avatar-1 Crysfel 26/04/2009

            Las funciones no estan definidas dentro del objeto Obj cuando no las creas en el prototipo o utiliando "this.nombrefuncion = function(){...". saludos

            • Avatar-9 spit 20/07/2009

              Crysfel espero que te mejores... estamos unos cuantos liados con tus tuto que son muy buenos

              • Avatar-10 treboR 17/10/2009

                Salud2, me perdí en esta línea # notGlobal.apply(obj,[1,2,'3',true]); de donde salen esos parámetros? probé kitarlos y funciona igual, pero me surge la duda de pk los mismos?

                • Avatar-11 Crysfel 18/10/2009

                  Hola Trebor, Esos parámetros son cualquier cosa que se me ocurrió, solo los puse para mostrar como podemos pasar parámetros cuando cambiamos el contexto de una función. saludos

                  • Avatar-4 treboR 18/10/2009

                    vale vale, muchas gracias.... Crysfel cómo seguís de la garganta? continúa con los videos ke están super wenos... thnxz

                    • Avatar-9 Carlos Andres Nino 18/02/2010

                      felicitaciones, hasta ahora he realizado todo el curso y es muy bueno, gracias Crysfel.

                      • Avatar-7 pattiya 23/06/2010

                        Mar 10, 2009 a 23jun 2010, debes tener mucho trabajo

                        • Avatar-4 Luis 24/02/2011

                          Hola amigo tengo un problema que tengo un grid en el cual quiero poner un filtro que consegui que se puede hacer una busqueda por columna. El problema es que estoy trabajando con clases y hago el store.load en un archivo que tengo como principal donde esta el onredy. El problema es que para que funcione debo crear una variable la cual dentro maneja un listener, pero este listener necesita una referencia al store. El problema es que yo creo la instancia del grid en el onredy y posteriormente hago el store.load(), por lo que el listener que mencione antes dice que el store no existe. Me puedes dar una idea de como manejar esto? Gracias

                          • Avatar-3 Richard 15/08/2011

                            Hola, gracias a tu post pude responderme algunas preguntas, ahora tengo una consulta, si me podrias ayudar, te lo agradeceria mucho. -Tengo un objeto el cual me construye una grilla a la cual le asigno un CheckboxSelectionModel(). Mas adelante defino una funcion para eliminar, la cual cuenta el total de registros seleccionados usando this.sm.each, de la siguiente forma. operacion = { init: function(){ ...... this.sm = new Ext.grid.CheckboxSelectionModel(); ........ }, eliminar : function(){ ........ var contador = 0; this.sm.each(function(rec){ contador++; }); ........ } } No me funciona como debe de ser, me sale un mensaje: this.sm is undefined. Se supone que sm esta dentro del contexto de mi objeto??, entonces porque sale undefined. Muchas Gracias de Antemano.

                            • Avatar-6 Crysfel 15/08/2011

                              Como es que estás invocando la función "eliminar"? si es mediante un botón entonces éste le esta cambiando el contexto y por eso this.sm te aparece como undefined.

                              • Avatar-2 Richard 15/08/2011

                                Gracias por responder, tengo definida una ventana y llamo a la funcion usando this.eliminar. ventana = new Ext.Window({ tbar : [ ....... {text: 'Eliminar', iconCls : 'eliminar', iconAlign: 'top' , handler: this.eliminar}, ... ], width : 560, height : 380, items : grilla })

                                • Avatar-8 Crysfel 15/08/2011

                                  Ahí esta tu problema, ya que el botón está ejecutando el handler (la función que tu definiste) en el contexto del botón, para indicarle que la ejecute en el contexto del objeto tendrías que usar la configuraci´øn "scope:this", donde this hace referencia al objeto donde existe this.sm Saludos

                                  • Avatar-4 Richard 15/08/2011

                                    Si tienes razon, tambien lo probe usando: Ext.getCmp('eliminalo').on('click', this.eliminar, this) Muchas gracias, saludos desde Perú

                                    • Avatar-6 Richard 15/08/2011

                                      Richard Aug 15, 2011 Si tienes razon, tambien lo probe usando: Ext.getCmp(‘eliminalo’).on(‘click’, this.eliminar, this) Muchas gracias, saludos desde Perú

                                      Instructor del curso

                                      Crysfel3

                                      Autor: Crysfel Villa

                                      Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                      Descarga Código Fuente

                                      Regístrate a este curso

                                      Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                      Tendrás acceso a descargar los videos, códigos y material adicional.

                                      Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                      Llevarás un registro de tu avance.