Hola ,

En este artículo intentaremos explicar los diferentes valores posibles de la thispalabra clave según el contexto en el que se utilice en JavaScript.

Alcance global

En el ámbito global, thisse refiere al objeto global ( windowen la web y globalen Node.js).

globalThistambién podría usarse como una forma independiente de la plataforma de alcanzar el objeto global.

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

Dentro de una función sin flecha, el valor de thisdependerá de cómo se llame a la función.

Llamado como una función independiente

• En modo no estricto , se refiere al objeto global: this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

Los métodos de clase se comportan de la misma manera que los métodos en los objetos literales.

Funciones de flecha

Dentro de una función de flecha, el valor de this es igual al del contexto léxico que la encierra .

En otras palabras, al evaluar una función de flecha, el motor JS no crea un nuevo thisenlace sino que usa el disponible en el ámbito circundante :

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

Constructores de funciones

Dentro de una función utilizada como constructor (con la newpalabra clave), thisestá vinculado al nuevo objeto que se está construyendo, sin importar cómo se acceda a la función:

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

aplicar(), llamar()

Los métodos call()y apply()podrían usarse para establecer explícitamente el valor de this en funciones que no son flechas:

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

Cuando se usa en una función de flecha, el thisparámetro se ignora (aunque aún puede pasar argumentos de función usando estos métodos):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};

console.log(getThis.call(myThis) === globalThis); // true
console.log(getThis.apply(myThis) === globalThis); // true

La bind()función se usa para crear una nueva función que está vinculada a un objeto dado.

Esto significa que cuando se llama a la nueva función, la thispalabra clave se referirá al objeto al que está vinculada:

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === myThis); // true
console.log(getMyThis.call(globalThis) === myThis); // true
console.log(getMyThis.apply(globalThis) === myThis); // true

Cuando se usa en una función de flecha, el thisparámetro se ignora (aunque aún puede pasar argumentos de función usando estos métodos):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === globalThis); // true
console.log(getMyThis.call(myThis) === globalThis); // true
console.log(getMyThis.apply(myThis) === globalThis); // true