Prototype comportement de this et portée de variable

**mathspountz** · 17/02/2016, 23h49

Bonjour à tous,

En ce moment je découvre les objets javascript définis via prototype et j'ai encore du mal à comprendre le fonctionnement exact:

Voici mon exemple :

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
50
51
52
53
54
55
56
57
 
$(function() {
 
  function log(p){
    $("#log").append('<li>'+p+'</li>');
  }
 
  function o() {
    this.arr = [0,1,2,3];
    this.x = 'hello';
  }
 
  o.prototype = {
  	y: 'hi',
    debug: function(){
      log("this = "+JSON.stringify(this));
      log("y = "+this.y);
      log('');
      this.arr.forEach(function(el){
          log('el = '+el);
          log('this = '+this);
      });
    }
  }
 
  var a = new o();
  a.debug();
  a.x = 'a';
  a.y = 'b';
  a.debug();
});
 
/* résultat :
this = {"arr":[0,1,2,3],"x":"hello"}
y = hi
 
el = 0
this = [object Window]
el = 1
this = [object Window]
el = 2
this = [object Window]
el = 3
this = [object Window]
 
this = {"arr":[0,1,2,3],"x":"a","y":"b"}
y = b
 
el = 0
this = [object Window]
el = 1
this = [object Window]
el = 2
this = [object Window]
el = 3
this = [object Window]
*/

2 questions :
1)
D'après ce que j'avais compris, les propriétés déclarées dans le constructeur sont publiques alors que celles définies via prototype sont privées.
La première ligne du log confortait ma croyance, on accède bien à x mais pas à y.
Malheureusement on voit que la ligne "a.y = 'b';" remplace bien la propriété y, et la rend en plus publique... Est-ce normal ?

2)
Pourquoi this reprends son comportement par défaut (Window) au lieu de me renvoyer mon objet dans le forEach ? Et comment accéder à mon objet à l'intérieur du forEach alors ?

Pour ceux qui veulent tester :
https://jsfiddle.net/mathspountz/rmchcue4/2/

**progdebutant** · 18/02/2016, 06h11

Mais "y" il est pas déclaré de la même façon que x c'est à dire avec un this, peut-être que le problème vient de là ?

Moi je fais ça :

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
function Legumes(nom,couleur){
this.nom=nom;
this.couleur=couleur;
this.etat=100;
}
 
Legumes.prototype.Manger=function(){
   this.etat-=10;
}
 
var concombre=new Legumes("concombre","vert");
 
console.log(concombre.etat);
concombre.Manger(); // Manger une fois
console.log(concombre.etat);
concombre.Manger(); // Manger une deuxième fois
console.log(concombre.etat);

Code :

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

1
2
3
4
5
6
7
8
9
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="exemple_objet.js"></script>
</head>
<body>
 
</body>
</html>

Et le résultat est :

100
90
80

Voilà si ça peut te servir, je sais pas.

**dunjl** · 18/02/2016, 15h40

Bonjour,

Concernant la 1ère question:

D'après ce que j'avais compris, les propriétés déclarées dans le constructeur sont publiques alors que celles définies via prototype sont privées.
La première ligne du log confortait ma croyance, on accède bien à x mais pas à y.

Non ce n'est pas vrai, celles définies dans le prototype sont publiques. Pour t'en convaincre, ajoute

Code :

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

log(a.y);

après la création de ton instance, tu auras bien 'hi' loggué.

Si tu veux une propriété privée :

Code :

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

1
2
3
4
5
function o(param) {
    this.arr = [0,1,2,3];
    this.x = 'hello';
    var y = 'hi';
  }

ici, y et param sont privés.

Je te conseille un peu de lecture pour ta compréhension des objets js :
Programmation orientée objet avec le langage JavaScript (1ère partie)
Private Members in JavaScript
Héritage et chaîne de prototypes

Pour la seconde question, encore de la lecture !
https://developer.mozilla.org/fr/doc.../Array/forEach
L'opérateur this
La méthode forEach accepte un paramètre optionnel pour définir le contexte d'exécution, thisArg
Tu peux donc faire :

Code :

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

1
2
3
4
5
6
7
8
9
debug: function(){
      log("this = "+JSON.stringify(this));
      log("y = "+this.y);
      log('');
      this.arr.forEach(function(el){
          log('el = '+el);
          log('this = '+this);
      }, this);
    };

En espérant que cela t'éclaire

**mathspountz** · 18/02/2016, 19h24

Merci à tous les deux ça répond exactement à mes questions et je suis très content d'avoir de bons liens de lecture ! J'espère comprendre le fonctionnement exact de tout ça rapidement !

Bonne continuation !

**progdebutant** · 18/02/2016, 21h16

Et moi j'ai pas droit à un +1 ?
rhaaaaa

Prototype comportement de this et portée de variable

JavaScript

Vue hybride

Discussions similaires

Partager

Partager