JavaScript Sauvegarde pour utilisation dans les fonctions / objets imbriqués


Exemple

Un écueil commun est d'essayer d'utiliser this dans une fonction imbriquée ou d' un objet, où le contexte a été perdu.

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(function(result){
      if (result) { // success
        this.className = 'success';
      }
    })
}

Ici, le contexte ( this ) est perdu dans la fonction de rappel interne. Pour corriger cela, vous pouvez enregistrer la valeur de this dans une variable:

document.getElementById('myAJAXButton').onclick = function(){
    var self = this;
    makeAJAXRequest(function(result){
      if (result) { // success
        self.className = 'success';
      }
    })
}
6

ES6 a introduit des fonctions fléchées qui incluent this liaison lexicale. L'exemple ci-dessus pourrait être écrit comme ceci:

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(result => {
      if (result) { // success
        this.className = 'success';
      }
    })
}