El contexto y la variable “this” Más videos
Comentarios: 18
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
Instructor del curso
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.
18Comentarios
Hola ya no abra videos en el resto del curso :(? Saludos!
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.
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.
Hola, Crysfel. Me faltan los videos, que ayudan a comprender mejor. Aun así sigo en el camino:)
Las funciones no estan definidas dentro del objeto Obj cuando no las creas en el prototipo o utiliando "this.nombrefuncion = function(){...". saludos
Crysfel espero que te mejores... estamos unos cuantos liados con tus tuto que son muy buenos
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?
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
vale vale, muchas gracias.... Crysfel cómo seguís de la garganta? continúa con los videos ke están super wenos... thnxz
felicitaciones, hasta ahora he realizado todo el curso y es muy bueno, gracias Crysfel.
Mar 10, 2009 a 23jun 2010, debes tener mucho trabajo
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
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.
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.
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 })
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
Si tienes razon, tambien lo probe usando: Ext.getCmp('eliminalo').on('click', this.eliminar, this) Muchas gracias, saludos desde Perú
Richard Aug 15, 2011 Si tienes razon, tambien lo probe usando: Ext.getCmp(‘eliminalo’).on(‘click’, this.eliminar, this) Muchas gracias, saludos desde Perú