DEV Community

Cover image for This en JavaScript
Cristobal Vega
Cristobal Vega

Posted on • Edited on

1

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This, se refiere al objeto instanciado "Angela".

Entonces en `this.name=name` lo hacemos sobre la instancia Luis no sobre el objeto prototipo.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up