Comprensión de la palabra clave "this" en JavaScript

"esto en JavaScript

En JavaScript es más complicado porque donde este depende no sólo de cómo esté definida la función, sino también de la forma de llamarla.

Mira cómo este funciona en función del lugar y la forma de invocación.

Contexto mundial

Se utiliza en un contexto global vinculado al objeto global, como ventana en un navegador web.

this; // ventana

Dentro del método del objeto

Se utiliza dentro de un método de objeto vinculado al objeto adyacente más cercano. El objeto es el nuevo contexto del método este palabra clave. Tenga en cuenta que no debe cambiar función () a la sintaxis ES6 fun: () => this.context porque cambiará el contexto.

const obj = {
  contexto: "objeto",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // objeto

En este ejemplo con un objeto anidado, este sigue refiriéndose a su contexto más próximo.

const nestedObj = {
  contexto: "padre",
  hijo: {
    contexto: "hijo",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // child

Función sin contexto

Se utiliza dentro de una función que no tiene contexto (no tiene un objeto como padre) vinculado al contexto global, incluso si la función está definida dentro del objeto.

Tenga en cuenta que utilizamos var contexto en lugar de let/const context porque deje y const cambiar el contexto adjunto de la variable. var es siempre el más cercano al contexto de ejecución global. deje y const declarar variables sólo en un ámbito de bloque local.

var context = "global";

const obj = {
  contexto "objeto",
  funA: function() {
    función funB() {
      const context = "función";
      return this.context;
    }
    return funB(); // invocada sin contexto
  }
};

obj.funA(); // global

Dentro de la función constructora

Se utiliza dentro de una función que es el constructor del nuevo objeto vinculado a ella.

var context = "global";

función Obj() {
  this.context = "Obj context";
}

const obj = new Obj();
obj.context; // Contexto del objeto

Dentro de la función definida en la cadena de prototipos

Se utiliza dentro de una función definida en la cadena de prototipos para crear un objeto vinculado a ella.

const ProtoObj = {
  fun: function() {
    return este.nombre;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

En llamar() y apply()

llamar() y aplicar() son JavaScript funciones. Con ellas, un objeto puede utilizar métodos pertenecientes a otro objeto. llamar() toma argumentos por separado donde aplicar() los toma como una matriz.

este se vincula aquí al nuevo contexto modificado en llamar() y aplicar() métodos.

const objA = {
  contexto: "objA",
  fun: function() {
    console.log(este.contexto, argumentos);
  }
};

const objB = {
  contexto: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Dentro de la función bind()

bind() también es un método JavaScript. Crea una nueva función que tendrá este en el primer parámetro pasado a bind()**.**

const objA = {
  contexto: "objA",
  fun: function() {
    console.log(este.contexto, argumentos);
  }
};

const objB = {
  contexto: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

Dentro de los controladores de eventos

Se utiliza en cualquier controlador de eventos (por ejemplo, addeventListener, onclick, attachEvent), se vincula al elemento DOM al que se adjuntó el evento.

document.querySelector(".foo").addEventListener("click", function() {
  this; // se refiere al elemento div `foo
});

Función de flecha ES6

Utilizado dentro de la función de flecha siempre está ligado a su ámbito léxico. En la función de flecha, no se puede reasignar el atributo este de ninguna manera.

const globalFunciónFlecha = () => this;

globalArrowFunction(); // Ventana

const obj = {
  contexto: "objeto",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // Ventana
obj.funB()(); // objeto

Más información:

• Los mayores retos del desarrollo de software a medida
• ¿Cuáles son las diferencias entre una empresa de software y una agencia de contratación de personal informático?