Discussion :

[JackStrieger]

Bonjour,
j'essaie en ce moment de faire quelque chose d'un minimum construit en javascript et je me bute à un souci que j'ai un peu de mal à comprendre. La question a peut-être été déjà posée, mais je n'ai rien trouvé de mon côté.

Je créé des objets par cette 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
Object= (function () {
    var truc= function(name) { // Constructor
        if (name) {
            this.setTruc(name);
        }
    };
    truc.prototype =  {
        table : [],
        addTable : function (name, url, x, y) {
            this.table [String(name)]
        }
        getTable : function (name, url, x, y) {
            this.table [String(name)]
        }
    };
    return {
        truc: truc
    };
})();

Que je peux par la suite instancier ...

Code :

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

1
2
3
4
5
6
var personnage = new Object.truc();
personnage.addTable ('test');
var personnage2 = new Object.truc();
personnage2.addTable ('2');
personnage2.addTable ('test3');
personnage2.getTable ();

Peu importe comment j'instancie les objets, ils utilisent tous le même tableau derrière ... C'est à dire que quand je fais un getTable par exemple, il me retourne tout ce que j'ai mis, que ce soit dans personnage ou dans personnage2, aucune différence est faite.

Est-ce le javascript qui est comme ça ou j'utilise mal les notions objets de ce langage ? C'est assez surprenant, vu que je viens de d'autres langages objets. Y a t'il des solutions pour arriver à faire ce que je voudrais ? C'est à dire séparer une instance d'une autre ?

Merci !

[SylvainPV]

Effectivement c'est une erreur de compréhension du fonctionnement des prototypes.

Tous les objets héritent et partagent les propriétés de leurs prototypes. Si tu déclares la variable table dans le prototype, toutes tes instances vont partager cette même variable.

Sinon, ton code écrase le constructeur Object... c'est-à-dire le constructeur de tous les objets en JavaScript !!! A ne surtout pas faire

[JackStrieger]

Je vois ! Cela dit mon problème reste entier. Je voudrais faire de l'objet, avec des namespace et que les objets instanciés soient bien distinctes les uns des autres. Avez-vous une idée de comment ça peut se faire ? Je pense que j'ai du passer à côté de quelque chose !

[SylvainPV]

Il y a plusieurs façons de faire de l'objet en JavaScript. Le langage se veut multi-paradigme, pour le meilleur et pour le pire. La plupart des tutos que tu trouveras ici sont basés sur les constructeurs, et je pense que tu as voulu reprendre le même paradigme. Je ne comprends pas ton exemple, mais il pourrait sans doute être écrit de cette manière :

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
(function () { 
    var Truc= function(name) { // Constructor
        this.table = [];
        if (name) {
            this.name = name;
        }
    };
 
    Truc.prototype =  {
        addTable : function (key, value) {
            this.table[String(key)] = value;
        }
 
        getTable : function (key) {
            return this.table[String(key)];
        }
    };
 
 var personnage = new Truc();
  personnage.addTable('test');
 
  var personnage2 = new Truc();
  personnage2.addTable('2', "valeur");
  personnage2.addTable('test3', "test");
  personnage2.getTable('2');
 
});

Ceci dit, ce n'est pas la seule manière de faire. Personnellement je préfère ne pas utiliser l'opérateur new : http://www.developpez.net/forums/d14...aise-pratique/

[JackStrieger]

Merci pour ta réponse. Alors plus précisément ma classe ressemble à ç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
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
Swoosh = (function () {
    /**
     * Methods
     */
 
    // Canvas
    var canvas = function(name) { // Prototype
        if (name) {
            this.setCanvas(name);
        }
    };
 
    canvas.prototype = {
        setCanvas : function (name) {
                Swoosh.id = document.getElementById(name);
                Swoosh.context = Swoosh.id.getContext("2d");
        },
    };
 
    // Images
    var image = function () {
        // prototype 
        this.sprites = [];
    };
 
    image.prototype =  {
        /**
         * Sprites will contain an array of images and its properties
         * @type Array
         */
        sprites : [],
 
        imageInstance : [],
 
        imagesLoaded : false,
 
        addSprite : function (name, url, x, y) {
            this.imagesLoaded = false;
 
            image = new Image();
            image.src = url;
            image.onload = function() { 
                this.imagesLoaded = true;
            };
 
            var properties = {url: url, image: image, x: x, y: y};
            this.imageInstance[name] = properties;
            this.sprites = this.imageInstance;
 
            return this.sprites[String(name)];
        } ,
 
        /**
         * Adds a sheet with multiple images that can be devided.
         * @param Array division : an array of 4 axis to devide each images and name them ?
         */
        addSpriteSheet : function (name, url, x, y, division) {
 
        },
 
        getSprites : function () {
            return this.sprites;
        },
 
        getSprite : function (name) {
            return this.sprites[String(name)];
        },
 
        /**
         * Showing image functions
         */
 
        // Shows all images 
        show : function (x, y) {
            for (var key in data = this.sprites) {
                var sprite = data[key];
 
                Swoosh.context.drawImage(sprite.image, sprite.x, sprite.y);
            }
        },
 
        // shows image and associated images only
        showPart: function (name, x, y) {
            x = x || 640;
            y = y || 480;
 
            var sprite = this.getSprite(String(name));
            Swoosh.context.drawImage(sprite.image, sprite.x, sprite.y); 
        },
 
        /**
         * Animation functions
         */
        // Moves all the images
        moveTo : function (x, y) {
            this.refresh();
            for (var key in data = this.sprites) {
                this.movePartTo(key, x, y);
            }
        },
 
        // Moves the sprite and associated sprites only
        movePartTo : function (name, x, y) {
            Swoosh.context.drawImage(sprite.image, sprite.x, sprite.y);
        },
 
    }
 
 
    return {
        canvas : canvas,
        image : image
    };
 
 
})();

Voilà, globalement j'instancie une objet image pour gérer une plusieurs images d'un array (ou d'un objet) en même temps. Et ça fonctionne très bien jusqu'à ce que je me rende compte que le tableau est global à tous les objets instanciés.

Alors ton code fonctionne très bien, mais si j'instancie le tableau dans le constructeur avec cette classe, ça ne change absolument rien !

[SylvainPV]

Dans le code ci-dessus, le tableau sprites est toujours dans le prototype