En el anterior post Funciones en JavaScript concluimos mostrando como crear (o instanciar) objetos anteponiendo la palabra new al nombre de una funcion ej: new MyObject().
Por otro lado, en nuestra otra entrada Objetos en JavaScript finalizamos mencionando que todo en JavaScript son objetos, vamos a ver como se relacionan Objetos, funciones y la palabra reservada this.

El valor de this generalmente va a depender desde donde se llama a la funcion que lo contiene.

This tomando diferentes valores



    function valorDeThis(){

      return this.valor;

    }

    var valor = "afuera";

    //si ejecutamos lo anterior en el navegador
    //lo hara en el ambito global, osea todo se guardara en la variable window
// por lo que this.valor hará referencia a window.valor

    console.log( valorDeThis() ) // "afuera"

    //Pero podemos usar la misma funcion dentro de un 
    //objeto y ver como se comporta

    var obj = {
      valor : "dentro",
      valorDeThis: valorDeThis
    }

    //llamamos a la funcion dentro del objeto

    console.log(  obj.valorDeThis() ); // "dentro"

    console.log( valorDeThis === obj.valorDeThis )
    //true

En la ultima linea comprobamos que la funcion es la misma, pero cambia el valor de this segun desde donde se llame a la funcion que lo utiliza.

El valor que toma this en una funcion se puede manipular de varias formas diferentes utilizando .call(), .apply() o .bind().

THIS dentro de la funcion utilizada como constructor

Esta es la forma de crear “clases” e instanciar Objetos en JavaScript.


var Persona = function( nombre ){

    this.nombre = nombre;

}

//creamos dos personas

var persona1 = new Persona('Elsa');

var persona2 = new Persona('Elber');

persona1.nombre; // Elsa

persona2.nombre;  // Elber

Haciendo el símil con lenguajes orientados a objetos, utilizar this dentro de una funcion/constructor seria crear atributos públicos, mientras que todo lo que este declarado sin this quedara como privado.


var Persona = function( nombre ){

    this.nombre = nombre;

    var edad = 8;

    this.getEdad = function(){
        return edad;
    }

}

//creamos dos personas

var persona1 = new Persona('Elsa');

persona1.nombre; // Elsa

persona1.edad // undefined

persona1.getEdad(); // 8

JavaScript no es un lenguaje netamente orientado a objetos, aunque de todas formas se puede utilizar Herencia, Polimorfismo, Encapsulamiento, etc.
Para poder entender como trabaja JavaScript con estos conceptos, es necesario comprender que es y como funciona la Cadena de prototipos.

Leave a Comment

Su dirección de correo no se hará público. Los campos requeridos están marcados *