Compléxité inutile du code ?

Version imprimable

29/09/2014, 07h00
loubigou

Compléxité inutile du code ?
Dans une méthode d'objet, pourquoi utiliser
Code:

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

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...
29/09/2014, 09h05
SpaceFrog

pourquoi pas encore plus directement

Code:

$("#id").on("mouseover",function(){ $(this).unemethode(); });
29/09/2014, 10h56
danielhagnoul

:weird:

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;

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

Code:

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

Code:

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()
    );
 
});

29/09/2014, 14h19
loubigou

Citation:

Envoyé par SpaceFrog

pourquoi pas encore plus directement

Code:

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

non, ce n'est pas ce que je veux faire (voir précisions + loin dans le fil)...
29/09/2014, 14h21
loubigou

Citation:

Envoyé par danielhagnoul

:weird:

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.

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:

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>

29/09/2014, 14h32
devyan
Bonjour,

Citation:

Envoyé par loubigou

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:

1 2 3 4 var self=this; $("#id").on("mouseover",function(){ console.log(self == this); // renvoie "false" });
29/09/2014, 14h52
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...