LuisLlamas Logo
ES
objeto-this-en-javascript

Cómo funciona this en JavaScript

  • 4 min
  • Avanzado

En términos sencillos, this es una palabra clave especial en JavaScript que se refiere al objeto actual o contexto de ejecución en el que una función está siendo llamada.

En JavaScript el comportamiento de this es uno de los conceptos que más cuestan entender, porque es algo diferente del de la mayoría de lenguajes.

Lo importante es que this siempre hace referencia al contexto de ejecución de la función. Este contexto de ejecución puede ser:

  • El contexto global al llamar una función desde fuera de un objeto
  • El objeto que llama a un método desde dentro del objeto.
  • Un objeto específico que “forzamos” explícitamente (mediante métodos call(), apply(), o bind()).

Vamos a ver cada uno de ellos detalladamente 👇

Comportamiento de this

En JavaScript, el valor de this depende de cómo se llama a la función, no de cómo está definida.

En funciones normales

Cuando se invoca una función de manera simple (sin utilizar objetos ni métodos especiales), this hace referencia al contexto global.

function saludar() {
  console.log(this);  // `this` hace referencia al objeto global
  console.log("¡Hola!");
}

saludar();

En este caso, cuando se ejecuta saludar(), el valor de this es el objeto global. (window en un navegador o global en Node.js)

En modo estricto ("use strict";), this no se refiere al objeto global, sino que será undefined.

Desde métodos de objetos

Cuando una función es invocada como un método de un objeto, el valor de this hace referencia al objeto al que pertenece el método.

const persona = {
  nombre: "Luis",
  saludar: function() {
    console.log(this.nombre);  // `this` hace referencia al objeto `persona`
  }
};

persona.saludar();  // Salida: "Luis"

En este caso, cuando se invoca persona.saludar(), this se refiere al objeto persona, lo que permite acceder a la propiedad nombre dentro del método.

Pérdida del objeto this

Una de las cosas que más quebraderos da con this es que es fácil que podamos “perder” la referencia del objeto que queríamos.

Cuando definimos una función dentro de un método, si no se tiene cuidado, this podría hacer referencia al objeto global en lugar del objeto esperado.

const persona = {
  nombre: "Luis",
  saludar: function() {
    function saludarInterno() {
      console.log(this.nombre);  // `this` hace referencia al objeto global
    }
    saludarInterno();
  }
};

persona.saludar();  // Error: `this.nombre` es `undefined`, ya que `this` es el objeto global

En este ejemplo,

  • Dentro de saludar(), definimos la función saludarInterno().
  • Sin embargo, this en saludarInterno() no hace referencia a persona, sino al contexto global
  • Esto puede causa que la propiedad nombre no se pueda acceder correctamente.

this en funciones flecha

Las funciones flecha en JavaScript tienen un comportamiento especial con respecto a this.

En lugar de establecer su propio valor de this, las funciones flecha heredan el valor de this del contexto léxico en el que fueron definidas.

const persona = {
  nombre: "Luis",
  saludar: function() {
    const decirHola = () => {
      console.log("¡Hola, soy " + this.nombre); // `this` se refiere a `persona`
    };
    decirHola();
  }
};

persona.saludar(); // "¡Hola, soy Luis"

En este caso,

  • persona es un objeto con una propiedad nombre y un método saludar.
  • Dentro del método saludar, definimos una función flecha llamada decirHola.
  • La función flecha hereda el contexto de this del método saludar, que apunta al objeto persona.
  • Al llamar a decirHola, utiliza el valor “correcto” de this y accede a persona.nombre.

Modificar explícitamente

En JavaScript, podemos modificar explícitamente el valor de this usando los métodos call(), apply() y bind().

Estos métodos permiten establecer el contexto de ejecución para una función, independientemente de cómo se invoca.

Lo vemos en la entrada Cómo funciona Call, Apply y Bind en JavaScript

Resumenazo de todo lo que hemos visto:

  • En funciones normales, this hace referencia al contexto global.
  • En métodos de objetos, this se refiere al objeto que contiene el método.
  • En funciones dentro de métodos, es necesario tener cuidado, ya que this puede cambiar según el contexto de la función interna.
  • Funciones flecha no tienen su propio this, sino que heredan el this de su contexto léxico.
  • call(), apply() y bind() permiten cambiar explícitamente el valor de this al invocar una función.

En esta página