This en JavaScript

¡Hola!, muchas gracias por darte el tiempo de leer este artículo, en él hablaremos sobre this en Javascript.

This

En Javascript siempre va a representar algo diferente dependiendo del contexto en el que se encuentre, ya sea en una función, objecto o clase.

// this en el scope global
console.log(`this: ${this}`);

// Print: this: [object Window]

nos dirá que this es un objeto Window. Siempre que usemos this de forma global el browser lo va a asignar a Window.

This en el Scope de una función

function whoIsThis() {
  return this
}

console.log(`whoIsThis: ${whoIsThis()}`);
// Print: whoIsThis: [object Window]

Al llamar la función directamente JavaScript le asigna Window.

El motor de JavaScript le asigna este valor por defecto, excepto si estamos usando JavaScript en el modo 'use strict'.

This en el scope de una función en strict mode

function whoIsThisStrict() {
  'use strict'
  return this
}

console.log(`whoIsThisStrict: ${whoIsThis()}`)
// Print: whoIsThisStrict: undefined

Strict mode nos sirve para evitar algunos errores

Errores que el puede pasar a cualquier programador.

This en el contexto de un objecto

Se refiere a un objeto. Ese objeto es el que actualmente está ejecutando un pedazo de código.

Básicamente, this está dentro de una función pero dicha función pertenece a un objeto, su valor cambia. En ese caso this se refiere al objecto.

// this en el contexto de un objeto
const person = {
  name: 'Gabriel',
  saludar: function() {
    console.log(`Hola soy ${this.name}`);
  },
};

person.saludar();
// Print: Hola soy Gabriel

This cuando sacamos la función saludar del objeto

// this cuando sacamos a una función de un objecto
const person = {
  name: 'Gabriel',
  saludar: function() {
    console.log(`Hola soy ${this.name}`);
  },
};

// Pasamos la función como referencia
const accion = person.saludar;
accion();
// Print: Hola soy

Esta función accion(), no se está llamando dentro del contexto de un objecto.

Es como ejecutar una función directamente.

This en este caso sería Window

This en el contexto de una "clase"

Las clase como tal no existen de la misma manera en Javascript como en otros lenguajes de programación.

// this en el contexto de una "clase"
function Person(name) {
    this.name = name;
}

Person.prototype.saludar = function() {
    console.log(`Me llamo ${this.name}`);
}

const angela = new Person('Angela');
angela.saludar();

// Me llamo Angela