[POO] accès à une méthode

**julien.63** · 05/04/2007, 21h40

Salut,
Soit le petit script suivant qui crée une balise DIV et un gestionnaire d'événement avec onclick. Le souci c'est que dans cette méthode, le this renvoie au DIV et non plus l'objet. Ce qui fait que je ne peux plus accéder aux autres méthodes. Voyer la ligne en rouge dans le code ci-dessous.

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
function cityObj(name,id)
{
	
	this.name = name
	this.id = id
	this.div = document.createElement("div");
	this.div.id = this.id;
	
	this.createDiv = function(){
		document.getElementById('container').appendChild(this.div);
		this.div.appendChild(document.createTextNode(name));
	}
	
	this.div.onclick = function(){
		this.setForm() // ne fonctionne pas
		document.getElementById('newForm').elements[0].focus()
	}
	
	this.setForm = function(){
		var content = '<form action="" method="POST" id="newForm">';
		content += '<input type="text" name="data_'+this.id+'" value="'+this.name+'" />';
		content += '</form>';		
		this.div.innerHTML = content;
	}
}

Comment appeler la méthode setForm depuis this.div.onclick ?

**marcha** · 05/04/2007, 22h22

Salut,

regarde du coté des methodes call et apply elles permettent de
définir le contexte this lors de l'appel d'une fonction. Mais ce
n'est pas très pratique pour les appels événementiels.

Regarde les fonctions bind et bindAsEventListener du
framework prototype.js c'est propre.

**magnus2005** · 05/04/2007, 23h04

1
J ai un doute sur ton onclick ?
ça fonctionne bien sur tous les navigateurs ?

2
Pour le this
Ton code est faux, il ne pas fonctionner car il est hors contexte.
Quand tu ecris le code declarer dans function(){/*ton code*/}
tu n es plus dans le contexte de ton objet [du point de vue de la POO] si tu rajoute à ça le modele POO miteux de javascript tu as peu de chance que this pointe sur l objet souhaité.
Essaie de faire une fonction avec un eval

**Djakisback** · 05/04/2007, 23h17

Change de nom de membre ^^

**marcha** · 06/04/2007, 00h23

Envoyé par magnus2005

...le modele POO miteux de javascript...

c'est un langage à prototype, il faut savoir s'y adapter, c'est tout.

Julien était tout près de la solution. Voici ce qu'il manque. j'ai ajouté
le html autour pour pouvoir tester facilement

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
39
40
41
42
43
44
45
46
47
48
49
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<script type="text/javascript">
 
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
 
function cityObj(name,id)
{	
	this.name = name
	this.id = id
	this.div = document.createElement("div");
	this.div.id = this.id;
 
	this.createDiv = function(){
		document.getElementById('container').appendChild(this.div);
		this.div.appendChild(document.createTextNode(name));
	}
 
	this.div.onclick = function(){
		this.setForm() // ne fonctionne pas
		document.getElementById('newForm').elements[0].focus()
	}.bind(this);
 
	this.setForm = function(){
		var content = '<form action="" method="POST" id="newForm">';
		content += '<input type="text" name="data_'+this.id+'" value="'+this.name+'" />';
		content += '</form>';		
		this.div.innerHTML = content;
	}
}
 
function init() {
	new cityObj('nom', 'id_a').createDiv();
}
</script>
 
</head><body onload='init();'>
 
<div id='container'></div>
 
</body></html>

Le principe pour "rétablir" le context d'instance souhaité c'est
d'appeler la fonction en lui donnant le context désiré.

c'est faisable avec apply et call.

Mais comme le "onclick" attend une référence à une fonction
on peut lui donner une fonction anonyme qui contient cette
référence et qui appelle la fonction de l'objet avec apply pour
fixer le contexte.

Ce problème étant fréquent dans une même page, c'est bien de
disposer d'une fonction utilitaire pour faire cette liaison.

Ce qui est encore plus pratique c'est d'étendre le prototype de
l'object Function (j'ai bien dit objet Function)

et ça donne ça

Code :

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

1
2
3
4
5
6
7
8
9
10
 
Function.prototype.bind = function(object) {
	var __method = this; 
        // crée une variable pour mémoriser le context (this) de la fonction bind(...), 
	return function() {
               // la variable __method est visible d'ici (ça s'appelle une "closure" sauf erreur)
               // on appelle la methode apply en lui transmettant le context pour this (object) et les arguments de la fonction anonyme
		return __method.apply(object, arguments);
	}
}

**magnus2005** · 06/04/2007, 09h34

Mea Culpa

Je dirais plutot le modele Object de javascript est tres partiel ce qui peut induire en erreur toute personne se basant sur de la POO classic.
D un point de vue objet c est pas coherent que le this contenu dans une fonction pointe sur un object.
C est parce que la definition du this de javascript est variable ce qui est inconcevable du point de vie POO.

**Djakisback** · 06/04/2007, 14h11

C est parce que la definition du this de javascript est variable

En plus ca dépend du navigateur. C'est vrai que le this qui pointe sur l'élément déclencheur dans une callback d'événement c'est pratique mais bizzare.
Quelqu'un pourrait m'expliquer cette histoire de prototype ? a quoi ca sert ?
Personnellement je fais encore comme ca mais faudrait peut-être que j'évolue lol :

Code :

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

1
2
3
4
5
6
7
 
 
function Obj {
 this.func = function f {
  // etc
}
}

[edit]J'avais pas lu ton post marcha, j'ai l'impression que ca répond à ma question mais je comprends pas tout ^^. Surtout je vois pas où est le problème d'utiliser Obj.func() dans un onClick, par exemple [/edit]

**goodpz** · 06/04/2007, 14h16

Je dirais plutot le modele Object de javascript est tres partiel ce qui peut induire en erreur toute personne se basant sur de la POO classic.
D un point de vue objet c est pas coherent que le this contenu dans une fonction pointe sur un object.
C est parce que la definition du this de javascript est variable ce qui est inconcevable du point de vie POO.

Comment ça partiel ? Le modèle POO de javascript est plus puissant que le modèle "classique" basé sur l'héritage. Par contre, il est clair que javascript est The World's Most Misunderstood Programming Language

**julien.63** · 05/04/2007, 23h24

salut,
Merci pour ta réponse. J'ai procédé un peu différement.

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
 
function cityObj(name,id)
{
	this.name = name
	this.id = id
	this.div = document.createElement("div");
	this.div.id = 'div_'+this.id;
	obj[id] = this;
 
	this.createDiv = function(){
		document.getElementById('container').appendChild(this.div);
		this.div.appendChild(document.createTextNode(name));
	}
 
	this.div.onclick = setForm;
 
}
 
function setForm(event){
	var curObj = getObj(this.id);
	var content = '<form id="newForm">';
	content += '<input type="text" name="data_'+curObj.id+'" value="'+curObj.name+'" />';
	content += '</form>';
	curObj.div.innerHTML = content;
	document.getElementById('newForm').elements[0].focus()
}
 
function getObj(id){
	var key=id.split('_')[1];
	return obj[key];
}

[POO] accès à une méthode

JavaScript

Vue hybride

Discussions similaires

Partager

Partager