Pointeur Javascript "this" dans l'énigme des fonctions imbriquées

Dans un scénario de développement Web, le comportement du pointeur "this" dans les fonctions imbriquées peut être déroutant. Considérez le code suivant :

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();

Dans le code ci-dessus, le pointeur "this" à l'intérieur de la fonction imbriquée "doSomeEffects()" pointe de manière inattendue vers l'objet "window". Ce comportement contredit l'attente selon laquelle la fonction imbriquée hériterait de la portée de la fonction externe, où "this" fait référence à "std_obj".

Comprendre l'invocation et la portée de la fonction Javascript

Le comportement de "this" dans les fonctions Javascript dépend de la manière dont la fonction est invoquée. Généralement, il existe trois manières :

1. Invocation de méthode : someThing.someFunction(arg1, arg2, argN)
2. Invocation de Function.call : someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply Invocation : someFunction.apply(someThing, [arg1, arg2, argN])

Dans toutes ces invocations, l'objet "this" sera "someThing". Cependant, l'appel d'une fonction sans objet parent principal (par exemple, doSomeEffects() dans l'exemple) entraînera généralement la définition de l'objet "this" sur l'objet global, qui dans la plupart des navigateurs est l'objet "window".

Dans l'exemple de code, la fonction imbriquée "doSomeEffects()" est invoquée sans objet parent, elle hérite donc de la portée globale et son pointeur "this" pointe vers la "fenêtre". objet. C'est pourquoi vous observez ce comportement inattendu.

Pour garantir que la fonction imbriquée a accès à la portée "std_obj", vous pouvez l'invoquer à l'aide de la méthode Function.call() avec l'objet "std_obj" comme objet premier argument :

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

doSomeEffects.call(std_obj);

Comprendre les nuances subtiles du comportement du pointeur « ce » en Javascript est crucial pour créer des applications robustes et maintenables.