Pointeur Javascript \'this\' dans les fonctions imbriquées : comment résoudre la confusion ?

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 au "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 l'objet "window". C'est pourquoi vous observez le 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 de « ce » pointeur en Javascript est crucial pour créer des applications robustes et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!