Pointeur Javascript «this» dans la fonction imbriquée

J'ai une question concernant la façon dont le pointeur "this" est traité dans un scénario de fonction imbriquée.

Disons que j'insère cet exemple de code suivant dans une page Web. J'obtiens une erreur lorsque j'appelle la fonction imbriquée "doSomeEffects ()". J'ai vérifié dans Firebug et cela indique que lorsque je suis dans cette fonction imbriquée, le pointeur "this" pointe en fait vers l'objet "window" global - ce à quoi je ne m'attendais pas. Je ne dois pas comprendre quelque chose correctement car je pensais que depuis que j'ai déclaré la fonction imbriquée dans une fonction de l'objet, elle devrait avoir une portée "locale" par rapport à la fonction (c'est-à-dire que le pointeur "this" ferait référence à l'objet lui-même comme comment c'est dans ma première déclaration "si").

Tous les pointeurs (sans jeu de mots) seraient appréciés.

var std_obj = {
  options : { rows: 0, cols: 0 },
  activeEffect : "none",
  displayMe : function() {

    // the 'this' pointer is referring to the std_obj
    if (this.activeEffect=="fade") { }

    var doSomeEffects = function() {

      // the 'this' pointer is referring to the window obj, why?
      if (this.activeEffect=="fade") { }

    }

    doSomeEffects();   
  }
};

std_obj.displayMe();

En JavaScript, l' thisobjet est vraiment basé sur la façon dont vous effectuez vos appels de fonction.

En général, il existe trois façons de configurer l' thisobjet:

1. someThing.someFunction(arg1, arg2, argN)
2. someFunction.call(someThing, arg1, arg2, argN)
3. someFunction.apply(someThing, [arg1, arg2, argN])

Dans tous les exemples ci-dessus, l' thisobjet sera someThing. L'appel d'une fonction sans objet parent principal vous donnera généralement l' objet global qui, dans la plupart des navigateurs, signifie l' windowobjet.

Comme cela semble être l'une des questions les plus votées du genre, permettez-moi d'ajouter, après toutes ces années, la solution ES6 utilisant les fonctions fléchées:

var std_obj = {
  ...
  displayMe() {
    ...
    var doSomeEffects = () => {
                        ^^^^^^^    ARROW FUNCTION    
      // In an arrow function, the 'this' pointer is interpreted lexically,
      // so it will refer to the object as desired.
      if (this.activeEffect=="fade") { }
    };
    ...    
  }
};

thisne fait pas partie de la portée de fermeture, il peut être considéré comme un paramètre supplémentaire à la fonction qui est liée au site d'appel. Si la méthode n'est pas appelée en tant que méthode, l'objet global est passé en tant que this. Dans le navigateur, l'objet global est identique à window. Par exemple, considérons la fonction suivante,

function someFunction() {
}

et l'objet suivant,

var obj = { someFunction: someFunction };

Si vous appelez la fonction en utilisant une syntaxe de méthode telle que,

obj.someFunciton();

alors thisest lié à obj.

Si vous appelez directement someFunction (), comme,

someFunction();

puis thisest lié à l'objet global, c'est-à-dire window.

Le travail le plus courant consiste à capturer cela dans la fermeture, par exemple,

displayMe : function() {      

    // the 'this' pointer is referring to the std_obj      
    if (this.activeEffect=="fade") { }      
    var that = this;  
    var doSomeEffects = function() {      

      // the 'this' pointer is referring to global
      // that, however, refers to the outscope this
      if (that.activeEffect=="fade") { }      
    }      

    doSomeEffects();         
 }      

Il y a une différence entre les variables de clôture et «ceci». "this" est en fait défini par l'invocateur de la fonction, tandis que les variables explicites restent intactes à l'intérieur du bloc de déclaration de fonction connu sous le nom d'enceinte. Voir l'exemple ci-dessous:

function myFirstObject(){
    var _this = this;
    this.name = "myFirstObject";
    this.getName = function(){
       console.log("_this.name = " + _this.name + " this.name = " + this.name);  
    }
}

function mySecondObject(){
    var _this = this;
    this.name = "mySecondObject";
    var firstObject = new myFirstObject();
    this.getName = firstObject.getName
}

var secondObject = new mySecondObject();
secondObject.getName();

vous pouvez l'essayer ici: http://jsfiddle.net/kSTBy/

Ce qui se passe dans votre fonction est "doSomeEffects ()", est appelé explicitement, cela signifie le contexte ou le "ceci" de la fonction est la fenêtre. si "doSomeEffects" était une méthode prototype, par exemple this.doSomeEffects sur disons "myObject", alors myObject.doSomeEffects () ferait en sorte que "this" soit "myObject".

Pour comprendre cette question, essayez d'obtenir le résultat de l'extrait de code suivant

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

Le code ci-dessus affichera les éléments suivants sur la console:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

Dans la fonction externe, this et self font référence à myObject et peuvent donc correctement référencer et accéder à foo.

Dans la fonction interne, cependant, cela ne fait plus référence à myObject. En conséquence, this.foo n'est pas défini dans la fonction interne, alors que la référence à la variable locale self reste dans la portée et y est accessible. (Avant ECMA 5, cela dans la fonction interne ferait référence à l'objet de fenêtre global; alors que, à partir de ECMA 5, cela dans la fonction interne serait indéfini.)

Comme expliqué par Kyle, vous pouvez utiliser callou applypour spécifier thisdans la fonction:

Voici ce concept appliqué à votre code:

var std_obj = {
    options: {
        rows: 0,
        cols: 0
    },
    activeEffect: "none",
    displayMe: function() {

        // the 'this' pointer is referring to the std_obj
        if (this.activeEffect == "fade") {}

        var doSomeEffects = function() {
            // the 'this' pointer is referring to the window obj, why?
            if (this.activeEffect == "fade") {}
        }

        doSomeEffects.apply(this,[]);
    }
};

std_obj.displayMe();

JsFiddle

J'ai également reçu un avertissement " Accès de référence potentiellement invalide à un champ de classe via ce "

class MyListItem {
    constructor(labelPrm) {
        this._flagActive = false;
        this._myLabel = labelPrm;
        labelPrm.addEventListener('click', ()=>{ this.onDropdownListsElementClick();}, false);
    }

    get myLabel() {
        return this._myLabel
    }
    get flagActive(){
        return this._flagActive;
    }

    onDropdownListsElementClick(){console.log("Now'this'refers to the MyListItem itself")}}//end of the class

Comme cela n'a pas été mentionné, je mentionnerai que l'utilisation .bind()est une solution -

        doSomeEffects=doSomeEffect.bind(this);
        doSomeEffects();   
      }
    };

    std_obj.displayMe();

Voici un exemple plus simple -

bad = { 
  name:'NAME', 
  z : function() { 
    function x() { console.log(this.name); }; 
    x() 
  } 
};
bad.z() // prints 'undefined'

good = { 
  name:'NAME', 
  z : function() { 
    function x() { console.log(this.name); }; 
    x=x.bind(this);
    x();
  } 
};
good.z() // prints 'NAME'

Il est vrai que l'utilisation d'une fonction de flèche =>semble plus simple et facile pour le programmeur. Cependant, il faut garder à l'esprit qu'une portée lexicale est susceptible de nécessiter plus de travail en termes de traitement et de mémoire pour configurer et maintenir cette portée lexicale, par rapport à la simple association d'une fonction thisà un pointeur via .bind().

Une partie de l'avantage de développer des classes dans JS était de fournir une méthode pour rendre la thisprésence et la disponibilité plus fiables, pour s'éloigner de la programmation fonctionnelle et des portées lexicales, et ainsi réduire les frais généraux.

De MDN

Considérations relatives aux performances Il n'est pas judicieux de créer inutilement des fonctions dans d'autres fonctions si des fermetures ne sont pas nécessaires pour une tâche particulière, car cela affectera négativement les performances du script en termes de vitesse de traitement et de consommation de mémoire.