Var self = this?

L'utilisation de méthodes d'instance comme rappel pour les gestionnaires d'événements modifie la portée de "Ma instance" à "Tout ce que l'on appelle simplement le rappel" . Donc, mon code ressemble à ça

 function MyObject() { this.doSomething = function() { ... } var self = this $('#foobar').bind('click', function(){ self.doSomethng() // this.doSomething() would not work here }) } 

Cela fonctionne, mais est-ce la meilleure façon de le faire? Cela me paraît étrange.

Cette question n'est pas spécifique à jQuery, mais spécifique à JavaScript en général. Le problème central est de «canaliser» une variable dans les fonctions intégrées. C'est l'exemple:

 var abc = 1; // we want to use this variable in embedded functions function xyz(){ console.log(abc); // it is available here! function qwe(){ console.log(abc); // it is available here too! } ... }; 

Cette technique repose sur l'utilisation d'une fermeture. Mais cela ne fonctionne pas avec this car this s'agit d'une pseudo variable qui peut changer de portée à portée dynamiquement:

 // we want to use "this" variable in embedded functions function xyz(){ // "this" is different here! console.log(this); // not what we wanted! function qwe(){ // "this" is different here too! console.log(this); // not what we wanted! } ... }; 

Que pouvons-nous faire? Assignez-le à une variable et utilisez-la à travers l'alias:

 var abc = this; // we want to use this variable in embedded functions function xyz(){ // "this" is different here! --- but we don't care! console.log(abc); // now it is the right object! function qwe(){ // "this" is different here too! --- but we don't care! console.log(abc); // it is the right object here too! } ... }; 

this n'est pas unique à cet égard: les arguments sont l'autre variable pseudo qui devrait être traitée de la même manière – par aliasing.

Un bon article qui explique ces petits problèmes en javascript est celui-ci:

http://www.alistapart.com/articles/getoutbindingsituations

J'espère que cela t'aides.

Ouais, cela semble être une norme commune. Certains codeurs utilisent soi-même, d'autres m'utilisent. Il sert de référence à l'objet «réel» par opposition à l'événement.

C'est quelque chose qui m'a pris un peu de temps pour vraiment, il semble étrange d'abord.

Je le fais habituellement au sommet de mon objet (excusez mon code de démonstration – c'est plus conceptuel que toute autre chose et n'est pas une leçon sur une excellente technique de codage):

 function MyObject(){ var me = this; //Events Click = onClick; //Allows user to override onClick event with their own //Event Handlers onClick = function(args){ me.MyProperty = args; //Reference me, referencing this refers to onClick ... //Do other stuff } } 

Si vous exécutez ES2015 ou faites le script de type et ES5, vous pouvez utiliser des fonctions de flèche dans votre code et vous ne faites pas face à cette erreur et cela se réfère à la portée souhaitée dans votre instance.

 this.name = 'test' myObject.doSomething(data => { console.log(this.name) // this should print out 'test' }); 
 var functionX = function() { var self = this; var functionY = function(y) { // If we call "this" in here, we get a reference to functionY, // but if we call "self" (defined earlier), we get a reference to function X. } } 

Edit: malgré les fonctions imbriquées dans un objet, prend l'objet de la fenêtre globale plutôt que l'objet environnant.

Je n'ai pas utilisé jQuery, mais dans une bibliothèque comme Prototype, vous pouvez lier des fonctions à une portée spécifique. Donc, dans cet esprit, votre code ressemblerait à ceci:

  $('#foobar').ready('click', this.doSomething.bind(this)); 

La méthode bind renvoie une nouvelle fonction qui appelle la méthode d'origine avec la portée que vous avez spécifiée.

Une solution à cela est de lier tous vos rappels à votre objet avec la méthode javascript bind .

Vous pouvez le faire avec une méthode nommée,

 function MyNamedMethod() { // You can now call methods on "this" here } doCallBack(MyNamedMethod.bind(this)); 

Ou avec un rappel anonyme

 doCallBack(function () { // You can now call methods on "this" here }.bind(this)); 

Le faire au lieu de recourir à var self = this montre que vous comprenez comment la liaison de this comportement se déroule en javascript et ne repose pas sur une référence de fermeture.

En outre, l'opérateur de flèche en graisse dans ES6 est essentiellement le même appelant .bind(this) sur une fonction anonyme:

 doCallback( () => { // You can reference "this" here now }); 

Je pense que cela dépend vraiment de ce que vous allez faire dans votre fonction doSomething . Si vous allez accéder MyObject propriétés de MyObject aide de ce mot-clé, vous devez l'utiliser. Mais je pense que le fragment de code suivant fonctionnera également si vous ne faites pas de choses spéciales en utilisant les propriétés de l' object(MyObject) .

 function doSomething(){ ......... } $("#foobar").ready('click', function(){ }); 

En ajoutant à cela que dans ES6 en raison des fonctions de flèche, vous ne devriez pas le faire car ils capturent this valeur.