This en diferentes situaciones y su comportamiento

18717

Debido a que muchas personas tienen problemas para entender this en JavaScript, me decidí por escribir una pequeña guía que ayude a entender un poco mejor este concepto.

Primero que nada hay que entender que this no es algo fijo, sino que siempre va a estar en constante cambio y depende de en donde se use, es como este se va a comportar.

this dentro de una función:

Si nosotros ejecutamos la siguiente función:

functionimprimeThis() {
   console.log(this);
};

imprimeThis();

Vamos a obtener el objeto global window:

Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

this intenta devolver un objeto; Como la function no es un objeto, se va a un nivel más arriba y encuentra al objeto window, es por ello por lo que en este caso this es igual a window.

this === windowtrue

En resumen, si this esta en el contexto global o en una función como la del ejemplo, este nos va a devolver window.

Ahora cambiemos un poco nuestro código:

functionimprimeThis() {
   "use strict"; // Ahora ponemos use strictconsole.log(this);
};

imprimeThis();

En este caso nos va a devolver: undefined, ya que el use strict no permite que se convierta en el objeto global (window).

this dentro de un método:

Si this esta dentro de una función, pero esta función pertenece a un objeto, su valor cambia.

let perro = {
  nombre: "Max",
  saludar: function() {
    return`Hola, me llamo ${this.nombre} Guau Guau`;
  }
};

En este caso, this se refiere al objeto perro.

Si nosotros ejecutamos lo siguiente:

perro.saludar();

Esto nos va a devolver:

"Hola, me llamo Max Guau Guau"

This dentro de un EVENT HANDLER

Un EVENT HANDLER es una función que se ejecuta cuando se dispara algún evento, por ejemplo cuando se hace click en cierto elemento.

HTML:

<ahref="#"id="boton">Yo soy un botón</a>

JavaScript:

const boton = document.getElementById("boton");

boton.addEventListener("click", function() {
  console.log(this.textContent);
});

Si nosotros le damos click a dicho botón, se imprimiría en consola:

Yo soy un botón

Extrajo el texto de nuestro HTML porque this en este caso, es nuestro elemento HTML.

This dentro de un constructor:

En este caso, this se refiere al objeto instanciado.

ECMAScript 5:

functionPersona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

let amigo = new Persona("Mario", 50);
let hermana = new Persona("Claudia", 27);
let madre = new Persona("María", 60);

ECMAScript 6:

classPersona{
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

}

let amigo = new Persona("Mario", 50);
let hermana = new Persona("Claudia", 27);
let madre = new Persona("María", 60);

amigo:

Persona {nombre: "Mario", edad: 50}

hermana:

Persona {nombre: "Claudia", edad: 27}

madre:

Persona {nombre: "María", edad: 60}

En conclusión el this, en la función constructora se refiere al objeto instanciado (Crear un nuevo a partir de un constructor).

this en un arrow function:

Las arrow functions tienen algo llamado Lexical this, que nos permiten con this llegar a un nivel superior de la función.

Por ejemplo si nosotros tenemos la clase Persona, y queremos aumentar su edad cada segundo, usamos el siguiente código´

classPersona{
  constructor() {
    this.edad = 0;
  }

  aumentarEdad() {
    setInterval(function(){
      this.edad++;
      console.log(this.edad);
    }, 1000)
  }
}

var fili = new Persona();

Si ejecutamos:

fili.aumentarEdad();

El resultado va a ser NAN cada segundo. Esto es porque this realmente es un objeto window (Como vimos anteriormente). Y lo que Javascript hace en this.edad++ realmente es window.edad++, es por ello por lo que regresa NaN (Not a Number).

Con los arrow functions no pasa esto, this en este caso va a tomar el valor que tiene this, fuera del contexto en el cual fue creada esa función. Es decir, en la clase Persona.

classPersona {
  constructor() {
    this.edad = 0;
  }

  aumentarEdad() {
    setInterval(() => {
      this.edad++;
      console.log(this.edad);
    }, 1000)
  }
}

var fili = new Persona();

Si ejecutamos: