Discussion :

[loubigou]

Dans une méthode d'objet, pourquoi utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$("#id").on("mouseover",(function(self) {
        return function() {
          self.unemethode();
        };
      })(this));

et pas directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var self=this;
$("#id").on("mouseover",function(){ self.unemethode(); });

qui marche très bien et est quand même plus lisible ?
Est-ce que dans le second cas, la variable self est référencée différemment dans le ramasse-miette ?
Merci pour vos lumières...

[SpaceFrog]

pourquoi pas encore plus directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#id").on("mouseover",function(){ $(this).unemethode(); });

[danielhagnoul]

Dans un gestionnaire d'événement, la fonction de rappel reçoit automatiquement l'objet "event" en premier argument.

Donc, "self" est "event" sauf s'il y a une déclaration préalable du style : var self = this;

[danielhagnoul]

Il nous manque le contexte d'emploi, pour comprendre l'utilité du return. Mais ici, self c'est window.document !

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="id">Hello !</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( "#id" ).on( "mouseover", 
        ( function( self ){
 
            // self est this et this est document !
 
            return function(){
 
                console.log( self, self.URL );
            };
 
        })( this ) // pas de ; c'est la fonction de rappel de on()
    );
 
});

[loubigou]

pourquoi pas encore plus directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#id").on("mouseover",function(){ $(this).unemethode(); });

non, ce n'est pas ce que je veux faire (voir précisions + loin dans le fil)...

[loubigou]

Dans un gestionnaire d'événement, la fonction de rappel reçoit automatiquement l'objet "event" en premier argument.

Donc, "self" est "event" sauf s'il y a une déclaration préalable du style : var self = this;

Merci pour ce rappel. Cependant, je n'ai pas passé self comme paramètre de la fonction callback transmise.

[loubigou]

Le contexte d'emploi, c'est une méthode d'objet.
Voici un exemple tout bête.
La méthode construire attache les gestionnaires à la div dont l'id est référencée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="idtest1">idtest1</div>
<script>
 
 var maclasse=function(id){
   this.id_=id;
 };
 maclasse.prototype={
   onmouseover:function() {
     $('#'+this.id_).html("onmouseover appelé => "+this.id_);
   },
   onmouseout:function() {
     $('#'+this.id_).html("onmouseout appelé => "+this.id_);
   },
   construire:function() {
     var self=this;
     $('#'+this.id_).on("mouseover", function() { self.onmouseover(); });
     $('#'+this.id_).on("mouseout", function() { self.onmouseout(); });
   }  
 };
 var x=new maclasse("idtest1");
 x.construire();
 
</script>

[devyan]

Bonjour,

Merci pour ce rappel. Cependant, je n'ai pas passé self comme paramètre de la fonction callback transmise.

Tout à fait et c'est bien pour ça que tes 2 codes ne sont pas identiques.

La callback de l'évènement "mouseover" en jQuery reçoit un objet EVENT et "this" correspond à l'élément DOM survolé (dans ton exemple l'élément ayant "id" pour id)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var self=this;
$("#id").on("mouseover",function(){ 
    console.log(self == this); // renvoie "false"
});

[loubigou]

Oui, la fonction callback est exécuté via un apply dans le contexte de l'élément du DOM auquel elle est rattachée (c'est bien pour cela que je ne mets pas this mais self). Mais je n'ai toujours pas la réponse à la première question de mon post.
Juste je me demandais si la première syntaxe présentait un intérêt du point de vue de la gestion de la mémoire.
Je ne crois pas en fait...