Qu'est-ce qui sous-tend cet idiome JavaScript: var self = this?

J'ai vu ce qui suit dans la source de WebKit HTML 5 SQL Storage Notes Demo :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

L'auteur utilise self à certains endroits (le corps de la fonction) et cela à d'autres endroits (les corps des fonctions définies dans la liste des méthodes des arguments). Que se passe-t-il? Maintenant que je l'ai remarqué une fois, vais-je commencer à le voir partout?

Voir cet article sur alistapart.com . (Ed: L'article a été mis à jour depuis le lien d'origine)

selfest utilisé pour conserver une référence à l'original thismême lorsque le contexte change. C'est une technique souvent utilisée dans les gestionnaires d'événements (en particulier dans les fermetures).

Edit: Notez que l'utilisation selfest maintenant déconseillée comme elle window.selfexiste et peut entraîner des erreurs si vous ne faites pas attention.

Ce que vous appelez la variable n'a pas d'importance particulière. var that = this;c'est bien, mais le nom n'a rien de magique.

Les fonctions déclarées dans un contexte (par exemple les rappels, les fermetures) auront accès aux variables / fonctions déclarées dans la même portée ou au-dessus.

Par exemple, un simple rappel d'événement:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

Je pense que le nom de variable «self» ne devrait plus être utilisé de cette façon, car les navigateurs modernes fournissent une variable globaleself pointant vers l'objet global d'une fenêtre normale ou d'un WebWorker.

Pour éviter la confusion et les conflits potentiels, vous pouvez écrire var thiz = thisou à la var that = thisplace.

Oui, vous le verrez partout. C'est souvent that = this;.

Voir comment selfest utilisé à l'intérieur des fonctions appelées par les événements? Celles-ci auraient leur propre contexte, elles sont donc selfutilisées pour contenir celles thisqui sont entrées Note().

La raison selfpour laquelle les fonctions sont toujours disponibles, même si elles ne peuvent s'exécuter qu'une fois l'exécution de la Note()fonction terminée, est que les fonctions internes obtiennent le contexte de la fonction externe en raison de la fermeture .

Il convient également de noter qu'il existe un autre modèle de proxy pour conserver une référence à l'original thisdans un rappel si vous n'aimez pas l' var self = thisidiome.

Comme une fonction peut être appelée avec un contexte donné en utilisant function.applyou function.call, vous pouvez écrire un wrapper qui renvoie une fonction qui appelle votre fonction avec applyou en callutilisant le contexte donné. Voir la proxyfonction de jQuery pour une implémentation de ce modèle. Voici un exemple d'utilisation:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFuncpeut alors être appelé et aura votre version de thiscomme contexte.

Comme d'autres l'ont expliqué, var self = this;permet au code dans une fermeture de se référer à la portée parent.

Cependant, nous sommes maintenant en 2018 et ES6 est largement pris en charge par tous les principaux navigateurs Web. L' var self = this;idiome n'est pas aussi essentiel qu'il l'était autrefois.

Il est maintenant possible d'éviter var self = this;grâce à l'utilisation des fonctions fléchées .

Dans les cas où nous aurions utilisé var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

Nous pouvons maintenant utiliser une fonction flèche sans var self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

Les fonctions fléchées n'ont pas les leurs thiset assument simplement la portée englobante.

La variable est capturée par les fonctions en ligne définies dans la méthode. thisdans la fonction fera référence à un autre objet. De cette façon, vous pouvez faire en sorte que la fonction contienne une référence à thisdans la portée externe.

C'est une bizarrerie JavaScript. Lorsqu'une fonction est une propriété d'un objet, mieux appelée méthode, cela fait référence à l'objet. Dans l'exemple d'un gestionnaire d'événements, l'objet conteneur est l'élément qui a déclenché l'événement. Lorsqu'une fonction standard est invoquée, cela fait référence à l'objet global. Lorsque vous avez des fonctions imbriquées comme dans votre exemple, cela n'a aucun rapport avec le contexte de la fonction externe. Les fonctions internes partagent la portée avec la fonction conteneur , donc les développeurs utiliseront des variations de var that = thisafin de préserver ce dont ils ont besoin dans la fonction interne.

En fait, self est une référence à window ( window.self) donc quand vous dites que var self = 'something'vous remplacez une référence de fenêtre à lui-même - parce que self existe dans l'objet window.

Voilà pourquoi la plupart des développeurs préfèrent var that = thisplusvar self = this;

En tous cas; var that = this;n'est pas conforme à la bonne pratique ... en supposant que votre code sera révisé / modifié ultérieurement par d'autres développeurs, vous devez utiliser les normes de programmation les plus courantes en ce qui concerne la communauté des développeurs

Par conséquent, vous devriez utiliser quelque chose comme var oldThis/ var oThis/ etc - pour être clair dans votre portée // .. ce n'est pas tant que ça, mais vous économiserez quelques secondes et quelques cycles cérébraux

Comme mentionné plusieurs fois ci-dessus, «soi» est simplement utilisé pour garder une référence à «ceci» avant d'entrer dans la fonction. Une fois dans la fonction «ceci» se réfère à autre chose.

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);