Puntero "este" de Javascript en el enigma de funciones anidadas

En un escenario de desarrollo web, el comportamiento del puntero "esto" dentro de funciones anidadas puede resultar desconcertante. Considere el siguiente código:

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

En el código anterior, el puntero "este" dentro de la función anidada "doSomeEffects()" apunta inesperadamente al objeto "ventana". Este comportamiento contradice la expectativa de que la función anidada heredaría el alcance de la función externa, donde "this" se refiere a "std_obj".

Comprensión de la invocación y el alcance de la función Javascript

El comportamiento de "esto" en las funciones de Javascript depende de cómo se invoca la función. Generalmente, hay tres formas:

1. Invocación de método: someThing.someFunction(arg1, arg2, argN)
2. Invocación de función.call: algunaFunción.call(alguna Cosa, arg1, arg2, argN)
3. Función.aplicar Invocación: someFunction.apply(someThing, [arg1, arg2, argN])

En todas estas invocaciones, el objeto "este" será "algo". Sin embargo, invocar una función sin un objeto principal principal (por ejemplo, doSomeEffects() en el ejemplo) generalmente dará como resultado que el objeto "este" se establezca como el objeto global, que en la mayoría de los navegadores es el objeto "ventana".

En el código de ejemplo, la función anidada "doSomeEffects()" se invoca sin un objeto principal, por lo que hereda el alcance global y su puntero "este" apunta al objeto "ventana". Es por eso que observa el comportamiento inesperado.

Para asegurarse de que la función anidada tenga acceso al alcance "std_obj", puede invocarla usando el método Function.call() con el objeto "std_obj" como primer argumento:

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

Comprender los sutiles matices de "este" comportamiento del puntero en Javascript es crucial para crear aplicaciones sólidas y fáciles de mantener.