Pourquoi utiliser \'var self = this\' en JavaScript ?

Idiome JavaScript : Comprendre "var self = this"

Le "var self = this;" L'idiome est couramment observé dans le code JavaScript, en particulier dans les gestionnaires d'événements. Il vous permet de conserver une référence à l'objet "this" d'origine dans les fonctions imbriquées ou dans les fermetures de gestionnaires d'événements.

Lorsque vous définissez une fonction à l'intérieur d'un constructeur ou d'un objet, le contexte d'exécution change et "this" fait référence à l'objet global (fenêtre) en mode non strict. En mode strict, "ceci" ne sera pas défini. Pour éviter cela, les développeurs utilisent "var self = this" pour conserver la référence à l'objet d'origine.

Pourquoi utiliser "var self = this" ?

Considérez le exemple suivant tiré de la démo HTML5 SQL Storage Notes de WebKit :

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;
  // ...
}

Dans ce code, "self" est affecté à "this" dans le constructeur. Cela garantit que lorsque les gestionnaires d'événements sont invoqués (par exemple en cliquant sur le div 'note'), "this" fera toujours référence à l'objet Note d'origine, permettant à des méthodes comme "onMouseDown" d'être appelées correctement.

Est-ce que "var self = this" est courant ?

Oui, cet idiome est largement utilisé dans les applications JavaScript, en particulier lorsqu'il s'agit de fermetures et d'événements. gestionnaires. Il permet aux développeurs de conserver une référence au contexte d'origine dans les fonctions imbriquées.

Approche alternative

Bien que "var self = this" soit efficace, il peut être déroutant de lire. Une approche alternative consiste à utiliser des fonctions fléchées (introduites dans ES6), qui préservent la liaison « ceci » du contexte environnant.

Par exemple :

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

Remarque :

Il est désormais déconseillé d'utiliser "var self = this" car cela peut potentiellement provoquer des erreurs dues à l'existence de "window.self". Il est recommandé d'utiliser des fonctions fléchées ou d'autres alternatives pour maintenir la liaison "cette".

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!