[POO] Portée de variables

**franculo_caoulene** · 19/11/2008, 17h39

Salut,

Je continue mon exploration de la programmation orientée objet en Javascript. J'ai un problème sur la portée d'une variable (comme il est dit dans le titre). Voici de quoi illustrer mes propos :

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
<!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>test js</title>
</head>
<body>
    <script type="text/javascript">
	function o1() {
		this.f1 = function() {
			return "f1";
		}
	}
	function o2(a) {
		o1.call(this, a)
		function f3() {
			return this.f1;
		}
		this.f4 = function() {
			f3();
		}
	}
	o2.prototype = new o1;
 
	var t1 = new o2();
	alert(t1.f4(this));
    </script>
</body>
</html>

Comment récupérer f1 dans le scope de f3, si j'ai bien compris les termes?

Merci par avance.

**SpaceFrog** · 19/11/2008, 20h23

ben tu ne peux pas du fait de la portée relative de la "variable" qui peut être comparée çà une propriété de l'objet avec le this.
et le propre des propriétés c'est d'être propres à un objet

**franculo_caoulene** · 20/11/2008, 10h13

En fait j'avais aussi oublié un return, ça me retournait tout le temps undefined. En fait c'est possible en redéfinissant la prorpiété en tant que variable locale, mais je trouve ça fastidieux :

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
function o1() {
	this.f1 = function() {
		return "f1";
	}
	function f2() {
		return "f2";
	}
}
function o2(a) {
	o1.call(this, a)
	var fbis = this.f1;
 
	function f3() {
		return fbis();
	}
	this.f4 = function() {
		return f3();
	}
}
o2.prototype = new o1;
 
var t1 = new o2();
alert(t1.f4());

si vous avez une autre façon de faire, je suis preneur. Je qualifierai la discussion comme résolue un peu plus tard.

**DoubleU** · 20/11/2008, 10h22

Pour être plus clair, quand tu déclares

Code :

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

1
2
3
4
5
6
7
8
9
	function o2(a) {
		o1.call(this, a)
		function f3() {
			return this.f1;
		}
		this.f4 = function() {
			f3();
		}
	}

La fonction f3 peut être considérée uniquement comme une variable interne à ta fonction o2, c'est à dire qu'elle n'a pas d'existence hors de cette fonction et n'est donc pas partagée dans le scope de celle ci. Seuls les membres attachés à l'objet this sont partagés.

Ceci étant, je ne sais pas si c'est normal, mais il y a beaucoup de choses étranges dans ton code (peut être du au fait que c'est juste un exemple)

Edit: t'avais répondu entre temps. C'est quoi que tu cherches a faire exactement?

**franculo_caoulene** · 20/11/2008, 10h36

C'est clairement un exemple. En fait, je cherche à étendre un objet o1 vers o2. Mons soucis est d'utiliser des méthodes de o1 dans des méthodes de o2. L'idée est:

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
function o1() {
	this.f1 = function() {
		return "f1";
	}
	function f2() {
		return "f2";
	}
}
function o2(a) {
	o1.call(this, a)
	var f1 = this.f1;
 
	function f3() {
		alert(f1() + " qqch"); 
	}
	this.f4 = function() {
		f3();
		return f1() + " qqch d'autre";
	}
}
o2.prototype = new o1;
 
var t1 = new o2();
alert(t1.f4());

Après je suis preneur de toute remarque, lachez vous!

**DoubleU** · 20/11/2008, 10h55

T'as plusieurs façons de faire.

L'une d'entre elles est de déclarer tes fonctions via l'objet prototype:

Code :

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

o1.prototype.foo = function(){}

De cette façon, ton

Code :

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

o2.prototype = new o1;

te permet de récupérer toutes les méthodes ajoutées au prototype de 01 dans 02

L'autre façon consiste à recopier tous les objets de o1 dans o2, avec une fonction comme ceci par exemple:

Code :

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

1
2
3
4
5
6
7
function extend(parent, fils)
{
	for(var prop in parent)
	{
		fils[prop] = parent[prop];
	}
}

Attention quand même, avec cette méthode, tu ne peux copier que les objets attachés à l'objet this. Ton f1 dans o2 par exemple ne sera pas copié.

NB: en écrivant

Code :

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

1
2
3
4
	for(var prop in parent.prototype)
	{
		fils.prototype[prop] = parent[prop];
	}

tu te retrouves dans le premier cas.

**franculo_caoulene** · 20/11/2008, 11h03

Je trouve la première méthode moins lisible, c'est pour ça que je ne l'utilise pas.
J'utilise bien this et pour différencier les méthodes publiques et privées.

Concernant la seconde façon de faire, quelle est la différence avec un o1.call(this, bla)?

**franculo_caoulene** · 20/11/2008, 11h49

J'avais déjà remarqué que call exécutait o1 au moment de l'instanciation de o2.

J'aime l'idée de la fonction extend, mais je ne pense pas pouvoir l'utiliser. Comme j'utilise une API, j'ai une initialisation à faire. Chose que je ne montre pas dans mes exemples désolé.
Je dois donc exécuter o1 quoiqu'il arrive ou copier la partie initialisation dans o2, ce que je ne trouve pas très propre non plus...

Pour le fun, une autre syntaxe, sur deux lignes cette fois

Code :

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

1
2
3
4
5
function o2(a1, a2, a3) {
    this.base = o1;
    this.base(a1, a2, a3);
    // ...
}

[POO] Portée de variables

JavaScript

Vue hybride

Discussions similaires

Partager

Partager