Blog

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.