Sobes.tech
Middle

¿Cómo prohibir el cambio de contexto en JavaScript?

sobes.tech AI

Respuesta de la IA

En JavaScript, el contexto de ejecución de una función (el valor de this) se determina dinámicamente en el momento de la llamada. No se puede impedir completamente su cambio en un sentido absoluto, pero se puede controlar o fijar el contexto de varias maneras:

  1. Métodos call, apply, bind:

    • call y apply permiten llamar a una función con un contexto y argumentos explícitos (separados en call, en forma de array en apply).
    • bind crea una nueva función enlazada, en la que this está fijado de forma rígida al valor especificado al momento de su creación, independientemente de la llamada posterior. Esta es la forma más efectiva de "prohibir" el cambio de contexto para llamadas futuras.
    // Ejemplo con bind
    const obj = { value: 42 };
    function showValue() {
      console.log(this.value);
    }
    
    const boundShowValue = showValue.bind(obj);
    
    boundShowValue(); // Mostrará 42
    boundShowValue.call({ value: 100 }); // Aún así mostrará 42, el contexto está fijado
    
  2. Funciones flecha (Arrow Functions):

    • Las funciones flecha no tienen su propio this. capturan this del entorno circundante (lexicográfico) en el momento de su definición.
    • El contexto de una función flecha no puede ser cambiado usando call, apply o bind.
    // Ejemplo con función flecha
    const outerObj = { name: 'Outer' };
    
    class MyClass {
      constructor() {
        this.className = 'MyClass';
        this.showNameArrow = () => {
          // `this` aquí captura `this` del constructor o del ámbito de definición de `MyClass`
          console.log(this.className);
        };
      }
    
      showNameRegular() {
        // `this` aquí se determina en la llamada
        console.log(this.className);
      }
    }
    
    const instance = new MyClass();
    instance.showNameArrow(); // Mostrará 'MyClass'
    
    const anotherObj = { className: 'Another' };
    const boundArrow = instance.showNameArrow.bind(anotherObj); // Intento de cambiar el contexto
    boundArrow(); // Aún así mostrará 'MyClass', el contexto de la función flecha no cambia
    
    instance.showNameRegular.call(anotherObj); // Mostrará 'Another', el contexto de la función normal cambia
    

En resumen, "prohibir el cambio de contexto" se entiende mejor como fijar firmemente el contexto. Para ello, se usa bind en funciones normales y el enlace léxico natural en funciones flecha. Las funciones flecha en este sentido son más "inquebrantables".