Discussion :

[mokadjo]

Bonjour à tous !
Voila j'ai un petit problème avec le javascript Objet.
En gros, je créé une boite avec un titre. dans le titre j'ai des boutons. Depuis leurs méthodes onmousedown, j'aimerai accéder à la box pour lancer sé fonction Edit().

Comment est-ce possible ?

Voici le code en question :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
function Bar(title){
	this.Content=document.createElement("div");
	this.Content.setAttribute("class","bar");
	this.Content.appendChild(document.createTextNode(title));
	this.fermer=document.createElement("img");
	this.fermer.setAttribute("src","images/icons/close.gif");
	this.fermer.setAttribute("class","button");
	this.edit=document.createElement("img");
	this.edit.setAttribute("src","images/icons/edit.gif");
	this.edit.setAttribute("class","button");
	this.edit.onmousedown=function(){
		?????????
	}
	this.Content.appendChild(this.edit);
	this.Content.appendChild(this.fermer);
}
 
 
function BoxMembersManager(title){
	this.Box=Box();
	this.Bar=new Bar(title);
	this.Infos=new Infos();
	ObjectDraggable(this.Bar);
	this.Box.appendChild(this.Bar.Content);
 
 
	this.Construct=function(){
		var containertext=document.createElement("div");
		..................
		this.Infos.appendChild(containertext);
		this.Box.appendChild(this.Infos);
	}
 
	this.Edit=function(){
 
	}
}

Merci beaucoup d'avance pour votre réponse !

[SpaceFrog]

déja setAttribute ...

Code :

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

this.Content.className="bar";

etc ...


sinon as tu essayé :

Code :

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

1
2
3
this.edit.onmousedown=function(){
		this.Edit()
	}

[mokadjo]

Alors, je viens d'essayer :

Code :

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

1
2
3
4
 
this.edit.onmousedown=function(){
		this.Edit()
	}

Mais visiblement il en veut pas, il cherche la fonction Edit() liée à this.edit (qui n'existe pas bien sur).


Ah et pour :

Code :

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

this.Content.className="bar";

ça fonctionne même s'il n'est pas encore dans le flux ? J'ai jamais essayé.

[DoubleU]

Essaie ca:

Code :

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

1
2
3
4
5
this.edit.onmousedown = function(obj){
   return function(){
      obj.Edit();
   }
}(this)

[mokadjo]

Yes !
Ca marche du tonnerre !
Par contre, je ne comprend pas bien ce que c'est que ce "(this)" tout seul.
Est-ce que t'aurais une petite explic ?
En tout cas, ça c'est RESOLU !

Merci beaucoup à vous 2

[DoubleU]

C'est un des plaisir du javascript ca

Si t'enleves la fonction du milieu et que tu gardes que ca:

Code :

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

this.edit.onmousedown = function(obj){}(this)

ce qui ce passe c'est que tu crées une fonction anonyme qui prend un paramètre obj, tu en définis le contenu (entre les accolades) et ensuite le (this) sert à appeler cette fonction anonyme, le paramètre this représentant le contexte d'exécution ou scope (ta classe donc).

Maintenant on rajoute la fonction interne:

Code :

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

1
2
3
4
5
this.edit.onmousedown = function(obj){
   return function(){
      obj.Edit();
   }
}(this)

C'est ce qu'on appelle en javascript une closure, une fonction qui en encapsule une autre (c'est par ailleurs par ce mécanisme que tu peux créer des classes en javascript). Et un des points particuliers des closures c'est qu'elles permettent aux fonctions interne (en rouge) d'accéder au contexte des fonctions encapsulantes (en bleu). Et dans ce cas, la fonction interne accède au paramètre obj de la fonction externe qui représente le contexte d'exécution donc ta classe (en vert).

Ouf, on y est

J'espère que j'ai pas été trop embrouillé (et que j'ai pas dit de conneries ), c'est pas évident à comprendre et à expliquer ca.

[mokadjo]

OUaw !
Ah là ça devient chaud à piger ! Mais j'adore parce que du coup avec tes explications ça me file des pistes pour fouiner encore et aller plus loin dans le dev !
Bon j'ai à peu près compris mais du coup j'me dis que y'a moyen d'aller plus loin encore.
Merci beaucoup en tout cas parce que du coup je ne vais pas avoir à faire de la bricole et des rustines dans mon code !
T un Boss

[Sharcoux]

Bonjour,

Je déterre ce topic parce qu'il me parait super intéressant mais que quelques trucs m'échappent malgré tout.

j'ai principalement 3 questions :
- (this) désignera une instance de Bar, ou de Box au final ?
- je ne comprends pas le premier "return". Quand on clique sur edit, la fonction onmousedown est exécutée et retourne une fonction, très bien, mais qui exécute la fonction retournée?
- comment on pourrait faire quelque chose de similaire avec un paramètre?

Merci pous vos réponses

[dukej]

déja setAttribute ...

Code :

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

this.Content.className="bar";

etc ...


sinon as tu essayé :

Code :

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

1
2
3
this.edit.onmousedown=function(){
		this.Edit()
	}

Ne dénigre pas jeune padawan le setAttribute a ses raisons d'exister, là c'est clair, c'est inutile.
Tiens si tu ne connais pas et j'y apprends pleins de chose :
http://www.javascript.info
et l'article en réponse aux attributs
http://javascript.info/tutorial/attr...tom-properties

[p3ga5e]

(this) désignera une instance de Bar, ou de Box au final ?

Je trouve le mot clef this en javascript est tres mla choisi, car il porte a confusion la lecture du code.
C’est au développeur de choisir quel objet this référencera lors de l’appel de la fonction !

Le mot clef this dans une fonction ne référence pas forcement l’objet dans lequel il est contenu ! regarde ca :

Code :

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

1
2
3
4
5
6
7
8
9
var obj = 
{   A: 2,
    B: 2,
 
    Func : function() { alert(this.A +this.B); }
};
 
obj.Func.call(obj); // alert 4 , equivalent syntaxique a obj.Func();
obj.Func.call({ A: "Hello,", B : " world!" }); // alert "Hello, world!"

je ne comprends pas le premier "return". Quand on clique sur edit, la fonction onmousedown est exécutée et retourne une fonction, très bien, mais qui exécute la fonction retournée?

Faux ! Tu as mal lut le code la fontion onmousedown est exécutée a l’évaluation du script. Regarde après ça déclaration, elle tous de suite appelé par "(this)", donc seul la fonction retourné et affecté a l’événement onmousedown tout en sauvegardant la référence de l’objet courant.

Tu as déjà eu ce meme probleme ici , je préfère ma mécanique de Delegate c’est plus élégant au niveau du code, son utilisation ici serait le suivant :

Code :

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

this.edit.onmousedown= this.Edit.Delagate(this);

C’est plus claire que ca :

Code :

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

1
2
3
4
5
this.edit.onmousedown = function(obj){
   return function(){
      obj.Edit();
   }
}(this)

comment on pourrait faire quelque chose de similaire avec un paramètre?

Je comprend pas cet question! désolé

[Sharcoux]

Ah ok ! J'avais pas du tout compris en fait ^^

Du coup, je comprends tout l'intérêt de ton système de Délégate. D'ailleurs, ça répond à ma question sur les paramètres :

Code :

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

1
2
3
4
5
Function.prototype.Delegate = function(obj)
{
    var method = this;
    return function() { return method.call(obj, arguments); };
};

Comme tu l'as écrit ici

[Bovino]

Je trouve le mot clef this en javascript est tres mla choisi, car il porte a confusion la lecture du code.
C’est au développeur de choisir quel objet this référencera lors de l’appel de la fonction !

Le mot clef this dans une fonction ne référence pas forcement l’objet dans lequel il est contenu !

Je ne suis pas spécialement d'accord avec toi...
Il faut bien voir JavaScript comme un langage orienté objet par prototype, toute tentative de vouloir l'assimiler aux langages OO à classes est une erreur !
Donc en JavaScript, this ne correspond jamais à l'objet (ou la fonction) dans lequel il se trouve mais à celui qui l'a appelé.
Par exemple, si tu utilises une fonction classique :

Code :

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

function exemple(){alert(this);}

tu obtiendras window car la fonction est appelée dans le contexte global, en revanche, dans un exemple d'événement DOM 0 :

Code :

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

ElementHTML.onclick = function(){alert(this);}

c'est l'objet ElementHTML qui appelle la fonction et l'alerte t'afficheras par exemple "HTMLDivElement".
Enfin, dans un constructeur :

Code :

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

1
2
3
4
5
6
var MonObjet = function(){
    this.alerte = function(){alert(this.toto);}
}
var instance = new MonObjet();
instance.toto = 'Instance';
instance.alerte();

tu as bien l'affichage de "Instance" car this correspond à l'instance de MonObjet qui a appelé le constructeur.

Sinon, ce n'est pas parce que le développeur peut définir la valeur de this via call ou apply que c'est à lui de le choisir...

[p3ga5e]

Code :

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

1
2
3
4
5
6
var MonObjet = function(){
    this.alerte = function(){alert(this.toto);}
}
var instance = new MonObjet();
instance.toto = 'Instance';
instance.alerte();

tu as bien l'affichage de "Instance" car this correspond à l'instance de MonObjet qui a appelé le constructeur.

Sinon, ce n'est pas parce que le développeur peut définir la valeur de this via call ou apply que c'est à lui de le choisir...

C’est pourtant bien le développeur qui choisi toujours la référence de this et pas le langage JavaScript.
comme je l’ai indiqué

Code :

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

instance.alerte();

est un raccourci syntaxique a

Code :

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

instance.alerte.call(instance);

si comme pour gestionnaire d’événement je sauvegarde la référence de la fonction alerte, et l’appelle ensuite, le context this sera perdu

Code :

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

1
2
3
4
5
6
7
var MonObjet = function(){
    this.alerte = function(){alert(this.toto);}
}
var instance = new MonObjet();
instance.toto = 'Instance';
var onclick = instance.alerte;
onclick(); // bug this est undefined !

Par lisibilité du code, je pense qu’il est de bonne pratique que this référence toujours l’objet dans lequel il est contenu. Et c’est bien a la charge du développeur car le langage JavaScript ne peut te le garantir.

[Bovino]

C’est pourtant bien le développeur qui choisi toujours la référence de this et pas le langage JavaScript.
comme je l’ai indiqué

Code :

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

instance.alerte();

est un raccourci syntaxique a

Code :

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

instance.alerte.call(instance);

Ne le prend pas mal, mais c'est pas parce que tu l'as dit que c'est vrai
Si tu redéfinis call(), l'appel de fonction se fait toujours correctement :

Code :

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

1
2
3
4
5
6
7
8
Function.prototype.call = function(){alert('toto');}
var MonObjet = function(){
    this.alerte = function(){alert(this.toto);}
}
var instance = new MonObjet();
instance.toto = 'Instance';
instance.alerte();
instance.alerte.call();

call(), comme apply() ne sont que des méthodes de l'objet Function() et n'entrent pas en jeu dans la définition de this.
Alors je ne dis pas que ces méthodes sont inutiles, bien au contraire, mais elles sont généralement utilisées que dans des cas bien spécifiques.
Ce n'est donc pas, à priori, le développeur mais bien le langage qui défini la valeur de this.

Sinon, dans ton exemple

Code :

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

1
2
3
4
5
6
7
var MonObjet = function(){
    this.alerte = function(){alert(this.toto);}
}
var instance = new MonObjet();
instance.toto = 'Instance';
var onclick = instance.alerte;
onclick(); // bug this est undefined !

tu ne définis pas un gestionnaire d'événement mais une variable globale, donc selon la règle de définition de this, il a pour valeur l'objet qui a appelé la fonction, c'est à dire l'objet global et dans le cadre d'une page Web, l'objet window, qui ne comporte pas de propriété toto ce qui explique le undefined, ce n'est pas un bug, c'est la logique du langage (ensuite, savoir si c'est bien ou mal pensé reste une question d'ordre "philosophique" et ton avis peut tout à fait se justifier), mais si tu remplaces this.alerte = function(){alert(this.toto);} par this.alerte = function(){alert(this);}, tu obtiens bien "Object window" ce qui est conforme à la règle d'attribution de this

[p3ga5e]

ah oui ! j'ai trouvé la source de notre discorde, j'evalu mes scripts sur mon propre interpreteur JavaScript...
qui lui ne respecte aucune règle en terme de définition de this.
Existe t'il une norme decrivant ces regles ?

tu ne définis pas un gestionnaire d'événement mais une variable globale, donc selon la règle de définition de this, il a pour valeur l'objet qui a appelé la fonction, c'est à dire l'objet global et dans le cadre d'une page Web, l'objet window, qui ne comporte pas de propriété toto ce qui explique le undefined, ce n'est pas un bug, c'est la logique du langage

C'est plus une logique de l'interpreteur ! certaine personne, dont je fait parti utilise le javascript en dehors d'un navigateur.
je compte meme l'utiliser pour l'ecriture de shader sur le GPU, tous comme le fait Haxe avec la techno molehill de flash

Sinon ,quelque soit la maniere d'ecrire un gestionaire d'evenement et la facon dont tu stock la reference sur un type Function, le probleme reste le meme!
on peut pas garantir la reference que prendra this lors de l'execution d'une fonction par ca simple ecriture, meme si celle-ci est definit dans la fonction "constructeur" de l'objet.
tu peut au moins m'accorder cela ^^ non ?

[Bovino]

tu peut au moins m'accorder cela ^^ non ?

Rassures-toi, je t'accorde beaucoup plus que ça, en particulier, j'accorde beaucoup de crédit à ce que tu dis

j'ai trouvé la source de notre discorde, j'evalu mes scripts sur mon propre interpreteur JavaScript...

Je n'irais pas jusqu'à parler de discorde ! :mrgeen:
Mais effectivement, pour ma part, je connais essentiellement JavaScript pour la partie navigateur (et je sais que ce n'est pas son seul terrain d'application) donc mes réponses et les certitudes que j'avance (qui sont parfois fausses ) sont essentiellement basées sur le navigateur !
Maintenant que je t'ai bien ciré les pompes () et en restant dans le cadre du navigateur, si la référence prise par this est toujours garantie, même si elle est parfois surprenante voire déroutante dans un schéma habituel d'objet par classes, elle reste toujours logique si on prend bien en considération qu'il n'existe pas de classes en JavaScript, donc pas le processus classique d'héritage, ce qui fait que lorsque tu invoques une méthode qui te semble héritée. Par exemple :

Code :

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

1
2
3
4
5
var MaClasse = function(){    // Nom inapproprié : pas de classes en JS
    this.toto = 'tata';    // Ici this correspond à l'instance de l'objet
    this.elem = document.getElementById(this.toto); // on référence un objet du DOM
    this.elem.onclick = function(){...}  // Attention, ici la fonction anonyme est appelée par un élément du DOM, c'est donc lui qui prend la référence à this, c'est surprenant, mais c'est garantit !
}

[Watilin]

Ce topic est une mine d'or !

Je viens de comprendre la véritable essence de l'opérateur new. Je me souviens, un jour, m'être vaguement demandé pourquoi ça ne provoquait pas d'erreur d'appeler une fonction constructeur sans utiliser new. Bien sûr, c'est parce que les constructeurs sont des fonctions comme les autres… Mais voyons ça de plus près :

Code JS :

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

1
2
3
4
5
6
7
function A() {
   this.x = 42;
}
 
var obj = A(); // ici, pas de new
 
alert(x);

Ô stupeur ! L'alerte indique 42. En fait, l'appel a été fait par window, c'est donc window qui récupère la propriété x.
Et obj ? Il n'est pas défini, car la fonction A n'a pas de valeur de retour.

Alors que se passe-t-il quand on fait new ? Au moins quatre choses :

1. un nouvel objet « vierge » est créé,
2. cet objet reçoit les propriétés de son prototype,
3. il est passé en tant que contexte à la fonction constructeur, et reçoit éventuellement d'autres propriétés à ce moment-là,
4. il est renvoyé comme résultat de l'appel de la fonction constructeur (à la place d'un éventuel return déjà présent).

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function B() {
   this.str = "chouette"; // (3)
 
   return 0.224; // sera ignoré (4)
}
 
B.prototype = { // (2)
   faireQuelqueChose: function() {
      return this.str;
   }
}
 
var obj2 = new B(); // (1)

Il se passe peut-être encore d'autres choses, je n'en sais rien, par exemple peut-être qu'il reçoit une propriété cachée pour l'identifier quand on utilise instanceof, ce genre de choses. Ce ne sont que mes déductions, elles sont peut-être inexactes.

Mais je suis content, je dormirai moins idiot ce soir