Blog
JavaScript – Contexto de la función
- Publicado por: Rafael Fernandez
- Categoría: Nivel Medio Javascript
En la programación orientada a objetos se maneja el concepto de encapsulación; el cual se refiere a la acción de colocar todo dentro de los objetos. Cuando decimos todo, incluimos las funciones constructoras, los métodos y las propiedades.
Por ello, cuando hablamos de contexto de la función nos referimos a un pequeño espacio de memoria donde se guardan las variables que la función necesita para ejecutarse. Dicho contexto se almacena como una pila de elementos, se mantiene allí hasta que termina el proceso y luego desaparece.
Ahora bien, cuando se declaran funciones en distintas partes del código surge la complicación de no tener claro que variables serán accesibles a menos que nos fijemos bien donde han sido declaradas cada una.
No obstante, a fin de facilitar la ejecución de una función contamos con la palabra clave “this”, pues con esta variable podemos obtener los valores correctos aun cuando el contexto cambie.
¿Qué es “This”?
Herramienta que se emplea dentro de un objeto para establecer que la variable a la que apunta pertenece al objeto.
Para entenderlo veamos el siguiente ejemplo:
var persona1 = { nombre: 'Carolina', saludo: function() { alert('Hola me llamo ' + this.nombre + '.'); } } var persona2 = { nombre: 'Leonardo', saludo: function() { alert('Hola me llamo ' + this.nombre + '.'); } }
Como vemos en el ejemplo, tenemos dos instancias de la misma clase; es decir ambas poseen las mismas propiedades y el mismo método. Pero a pesar de esto, cada función arrojará el valor de la variable “nombre” que corresponde a cada objeto gracias a que hemos empleado la palabra reservada “this”.
Por otra parte, debemos tomar en consideración que, dentro de una función, el valor de this dependerá de como se invoque. Veamos,
Como un constructor
Usar una función como un constructor incluyendo la palabra clave “new”, hace que “this” se enlace con el nuevo objeto; a no ser que haya una instrucción de retorno cuyo valor sea un objeto. Veamos,
function A (){ this.num = 37; } var Obj = new A(); console.log(Obj.num)// muestra 37 function B(){ this.num = 37; return {num:38}; } Obj = new B(); console.log(Obj.num); // muestra 38
Con esta sintaxis hemos vinculado una función con un objeto. Ahora bien, la diferencia entre estos dos códigos es que en el último se devuelve el valor durante la construcción, de modo que el valor 37 es descartado.
Funciones call y apply
A fin de entrelazar el valor de this a un objeto en particular podemos utilizar los métodos call() o apply(). El siguiente ejemplo lo demuestra:
function suma(num3, num4){ return this.num1 + this.num2 + num3 + num 4; } Var Obj = {num1: 4 , num2: 9};
En esta parte hemos usado “this” para obtener los valores de las variables num1 y num2; el resto los hemos pasado como argumentos en la llamada de la función:
</pre> add.call (Obj, 3, 6); add.apply (Obj, [3, 6]); // 4 + 9 + 3 + 6 = 25
Hola, gracias por compartir conocimiento, Tengo una duda; porque es necesario usar this dentro del cuerpo de una función que pertenece a un objeto, si estaría encapsulado, a que otro contenido de la variable nombre podría referirse si no al de ese mismo objeto, ¿En memoria, se crea un único espacio para construir todos los objetos de ese tipo o uno por cada objeto ” en el ejemplo uno para persona1 y otro para persona2 ?. Vengo del mundo Java y usamos this para referirnos a la instancia de una clase que puede autoInvocar cualquiera de sus propiedades o métodos de esa clase. Gracias!