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?
javascript
scope
closures
Thomas L Holaday
la source
la source
this
dans un rappel?")Réponses:
Voir cet article sur alistapart.com . (Ed: L'article a été mis à jour depuis le lien d'origine)
self
est utilisé pour conserver une référence à l'originalthis
mê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
self
est maintenant déconseillée comme ellewindow.self
existe 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:
la source
var that = this;
Je pense que le nom de variable «self» ne devrait plus être utilisé de cette façon, car les navigateurs modernes fournissent une variable globale
self
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 = this
ou à lavar that = this
place.la source
_this
that
" (auquel mon cerveau ne s'habituera jamais).self
tant que vous le déclarez comme unvar
iable, il masquera le global. Bien sûr, si vous avez oublié le,var
cela ne fonctionnerait pas non plus avec un autre nom.Oui, vous le verrez partout. C'est souvent
that = this;
.Voir comment
self
est utilisé à l'intérieur des fonctions appelées par les événements? Celles-ci auraient leur propre contexte, elles sont doncself
utilisées pour contenir cellesthis
qui sont entréesNote()
.La raison
self
pour laquelle les fonctions sont toujours disponibles, même si elles ne peuvent s'exécuter qu'une fois l'exécution de laNote()
fonction terminée, est que les fonctions internes obtiennent le contexte de la fonction externe en raison de la fermeture .la source
self
n'a pas de signification particulière. Personnellement, je préfère utiliser un var nommé autre chose queself
car cela me confond souvent, car je m'attends à ce que «moi» soit un mot réservé. Donc j'aime votre réponse. Et dans l'exemple de l'OP, je préfèrevar thisNote = this
ou similaire.Il convient également de noter qu'il existe un autre modèle de proxy pour conserver une référence à l'original
this
dans un rappel si vous n'aimez pas l'var self = this
idiome.Comme une fonction peut être appelée avec un contexte donné en utilisant
function.apply
oufunction.call
, vous pouvez écrire un wrapper qui renvoie une fonction qui appelle votre fonction avecapply
ou encall
utilisant le contexte donné. Voir laproxy
fonction de jQuery pour une implémentation de ce modèle. Voici un exemple d'utilisation:var wrappedFunc = $.proxy(this.myFunc, this);
wrappedFunc
peut alors être appelé et aura votre version dethis
comme contexte.la source
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
:Nous pouvons maintenant utiliser une fonction flèche sans
var self = this
:Les fonctions fléchées n'ont pas les leurs
this
et assument simplement la portée englobante.la source
.addEventListender("click", (x) => { console.log(x); });
vous avez expliqué très clairement comment et pourquoi, et je suis d'accord que l'utilisation des fonctions fléchées est plus logique, mais quand même ... c'est juste une programmation terrible, paresseuse, désordonnée.La variable est capturée par les fonctions en ligne définies dans la méthode.
this
dans 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 àthis
dans la portée externe.la source
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 = this
afin de préserver ce dont ils ont besoin dans la fonction interne.la source
En fait, self est une référence à window (
window.self
) donc quand vous dites quevar 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 = this
plusvar 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éveloppeursPar 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ébrauxla source
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.
la source
thisss.sayHi.call (thatt);
la source