Sobes.tech
Junior

¿Qué se mostrará en la consola si se usa this en console.log?

sobes.tech AI

Respuesta de la IA

Depende del contexto de la llamada a console.log y del modo estricto de JavaScript ("use strict").

En el contexto global (fuera de funciones y módulos):

  • En modo no estricto ("use strict" ausente o declarado en una función): this hará referencia al objeto global (window en el navegador, global en Node.js).
  • En modo estricto: this será undefined.

Dentro de una función:

  • En modo no estricto: this hará referencia al objeto global si la función se llama como una función normal (myFunction()). Si la función se llama como método de un objeto (myObject.myMethod()), this hará referencia al objeto (myObject). Si la función se usa como constructor (new MyClass()), this hará referencia a la nueva instancia del objeto.
  • En modo estricto: this será undefined si la función se llama como función normal. En otros casos (método de objeto, constructor), el comportamiento es el mismo que en modo no estricto.

Dentro de una función flecha (=>):

  • this se hereda léxicamente del contexto circundante. Esto significa que el valor de this dentro de una función flecha será igual al de la función externa normal o al contexto global donde fue declarada, independientemente de cómo se llame. Las funciones flecha no enlazan this con su propio contexto de llamada.

Ejemplo:

// Contexto global
console.log(this); // En navegador: Window, en Node.js: global (modo no estricto)
                    // En navegador: undefined, en Node.js: undefined (modo estricto)

// Función normal
function showThisNonStrict() {
  console.log(this);
}

showThisNonStrict(); // En navegador: Window, en Node.js: global

function showThisStrict() {
  "use strict";
  console.log(this);
}

showThisStrict(); // undefined

const myObject = {
  methodNonStrict: function() {
    console.log(this);
  },
  methodStrict: function() {
    "use strict";
    console.log(this);
  }
};

myObject.methodNonStrict(); // myObject
myObject.methodStrict();   // myObject

// Función flecha
const arrowFunc = () => {
  console.log(this);
};

arrowFunc(); // En navegador: Window, en Node.js: global (hereda del contexto global)

const myObjectWithArrow = {
  arrowMethod: () => {
    console.log(this);
  }
};

myObjectWithArrow.arrowMethod(); // En navegador: Window, en Node.js: global (hereda del contexto de declaración)