Comment conserver le pointeur \'this\' dans les fonctions JavaScript imbriquées

Pointeur JavaScript "this" dans les fonctions imbriquées

En JavaScript, la valeur du pointeur "this" peut prêter à confusion lorsque vous travaillez avec des fonctions imbriquées. fonctions. Contrairement aux attentes, l'appel d'une fonction imbriquée peut attribuer le pointeur "this" à l'objet global "window" plutôt qu'à la fonction englobante.

Considérez le code suivant :

<code class="javascript">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 unexpectedly refers to the window object
      if (this.activeEffect == "fade") { }
    };

    doSomeEffects();
  }
};

std_obj.displayMe();</code>

Dans ce Dans ce scénario, lorsque la fonction imbriquée doSomeEffects est appelée, le pointeur "this" pointe vers l'objet "window", même s'il est déclaré dans la portée de std_obj. En effet, JavaScript détermine le pointeur « this » en fonction de la manière dont la fonction est appelée.

Dans ce cas, doSomeEffects est appelé sans objet parent principal, ce qui aboutit à l'objet global (généralement l'objet « window » ) étant affecté à "ceci". Pour résoudre ce problème, trois méthodes peuvent être utilisées :

1. Appelez la fonction avec l'appel Méthode :

   <code class="javascript">doSomeEffects.call(std_obj);</code>

2. Appliquez la fonction avec la méthode d'application :

   <code class="javascript">doSomeEffects.apply(std_obj, []);</code>

3. Créez une fonction liée :

   <code class="javascript">var boundDoSomeEffects = doSomeEffects.bind(std_obj);
   boundDoSomeEffects();</code>

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!