[POO] visibilité d'une fonction dans un objet JavaScript

**lmanseau** · 12/04/2009, 18h41

Je définis un objet JavaScript qui contient une variable et des méthodes.

Lorsque j'essaie d'utiliser une des méthodes déjà définie à l'aide de this, le navigateur me retourne une erreur qui me dit que la méthode n'en n'est pas une.

Pourtant, j'utilise cette technique dans d'autres objets et ça fonctionne. Quelqu'un aurait-il une idée?

Voici les deux exemples, le premier génère une erreur et le deuxième est correct.
Ce que je veux, c'est utiliser la première méthode...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Fenêtre glissante</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<script type="text/javascript" >
			// =================================
			// Création de l'objet 
			function objNav( ) {
			}
			// ------------------------------------
			// Ajout des propriétés et des méthodes à l'objet
			objNav.prototype = {	
				navi: 0, 
 
				fn1: function ( ) {
					this.navi = "XXX";
				},
 
				fn2: function (e) {
					if (!this.navi) { 
						this.fn1 ();  // <- Probleme ici... fn1 non reconnue
					}
					alert (this.navi);
				}
			}
			// ===========================
			// Association des evenements
			function init() {
				var nav = new objNav ();
				document.onclick = nav.fn2;
			}
		// ]]>
		</script>
	</head>
 
	<body onload="init();">
		<h2>Objet en erreur</h2>
	</body>
</html>

Voici le deuxième

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Fenêtre glissante</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<script type="text/javascript" >
			// =================================
			// Création de l'objet 
			function objNav( ) {
			}
			// ------------------------------------
			// Ajout des propriétés et des méthodes à « interNavigateur »
			objNav.prototype = {	
				navi: 0, 
 
				fn2: function (e) {
					if (!this.navi) { 
						this.navi = "XXX";  
					}
					alert (this.navi);
				}
			}
			function init() {
				var nav = new objNav ();
				document.onclick = nav.fn2;
			}
		</script>
	</head>
 
	<body onload="init();">
		<h2>Objet OK</h2>
	</body>
</html>

**SpaceFrog** · 12/04/2009, 18h47

un petit return pour la route ?

**javatwister** · 13/04/2009, 09h20

Code :

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

document.onclick = function(){nav.fn2()};

**bigboomshakala** · 13/04/2009, 11h21

solution = remplacer this par objNav.prototype

tu tombes ici dans LE piège du this. this tient son sens du contexte à partir duquel il est appelé.

quand tu fais

Code :

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

document.onclick = nav.fn2;

alors la fonction fn2 est affectée à document.onclick et, dans ce contexte, this = document... et document ne défini pas de fonction fn1 (CQFD)

la solution de javatwister fonctionne car là fn2 est appelé dans le contexte de nav

**lmanseau** · 13/04/2009, 15h34

Merci pour vos réponses rapides.

J'avais bien lu que « this » se rapportait au contexte, mais là j'en comprends mieux la signification...

[POO] visibilité d'une fonction dans un objet JavaScript

JavaScript

Discussions similaires

Partager

Partager