Discussion :

[Aiekick]

Bonjour,

je suis un dev c++, et j’essaie de me mettre au JS et je galère. (jusque la rien de bien nouveau ^^ )

J'ai essayé de suivre le cours sur la POO de JPVincent, et j'ai donc adapté son namespace a mes besoin et manifestement mal adapté par ce que ça marche pas comme je voudrais.

Je voudrais faire une classe JS qui s'occupe de remplir un tableau json (qui serait une variable interne de la classe )

Voila mon code :

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
 
JSC_NAMESPACE = {};
 
(function()
{ 
 JSC_NAMESPACE.datas = JSC_NAMESPACE.datas || {};
 
    // constructeur
    JSC_NAMESPACE.datas.JSONLoader = function( jsonFile )
        {
            this.dataTab = [];
            this.dataTab.push("test");
            $.getJSON(jsonFile, function(data)
            {
                $.each(data, function(id, row)
                {
                    this.dataTab.push(row);
                });
            });
        };
 
    // variables et méthodes publiques propres à chaque instance
    JSCHART_NAMESPACE.datas.JSONLoader.prototype =
    {
        countIt:function(){ return this.dataTab.length; },
    };
 
})();

le code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript" src="jsC.js"></script>
    <script type="text/javascript">
        <!--
        $(document).ready(
                function()
                {
                    var obj = new JSC_NAMESPACE.datas.JSONLoader('test1.json');
                    $(toto).html(obj.countIt());
 
 
                });
        //-->
    </script>

Mon problème c'est que à la ligne " this.dataTab.push(CS);" le debugger me dit que this.dataTab est indéfini alors que plus haut " this.dataTab.push("test") "à fonctionné.

"$(toto).html(obj.countIt());" me renvoi 1 soit grâce a la ligne "this.dataTab.push("test") ", sinon il me renverrai 0.

Est ce un problème avec le this ?

Merci d'avance pour votre aide.

[sekaijin]

c'est logique puisque tu n'est pas dans la même fonction.

imagine en C++

Code :

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

1
2
3
4
5
6
7
8
9
void a() {
            this.dataTab = new ArrayOfStrings();
            this.dataTab.push("test");
            getJSON(jsonFile, b); //ici un pointeur sur la methode b
}
//et dans un autre classe
String b(data) {
    this.dataTab.push(CS);
}

das ton code tu passe un pointeur sur une fonction crée à la volée (lambda) $.getJSON puis une deuxième fonction (lambda) à $.each puis une troisième fonction au deuxième appel $.each

tout comme en C++ si tu change de portée les variables n'ont pas les même valeur même si elles ont le même nom. et this dans chaque contexte est différent.

A+JYT

[Aiekick]

Merci.

C'est vrai que je me fait avoir par les accolades ^^ je vois pas encore les fonctions tout de suite.

Du coup, pour intégrer getJSON dans ma classe je sais pas faire, j'ai contourné le problème en créant mon objet dans le callback appelé dans getJSON.
C'est moins flexible que ce que je voulais mais à part réécrire getJSON à sa sauce, je sais pas quelle autre solution il y a.

[SpaceFrog]

en amont that = this

[Aiekick]

j'ai testé ta solution et sa marche par contre je comprends pas pourquoi.

that est une variable locale qui pointe sur this, pourquoi est ce que that est dispo dans une fonction appelée alors que this ne l'est pas ? ( je me trompe ? ce n'est pas une fonction appelée ? )
Du coup c'est quoi this ? ca doit pas être pareil qu'en c++..
Je suis d'accord avec ce que disait sekaijin, si c'est toujours valable alors j'ai rien compris ?

[sekaijin]

this fonctionne comme en c++

par contre en javascript la porté des variables est différente de C++
en C++ la portée est le block ou elle a été définie

en Javascript aussi au détail près quelle est aussi visible des fonctions définie dans le même block

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
obj = {};
obj.foo = function() {
  this.a = 45; //ici this est une référence à obj (obj.foo()) comme en C++
  var that = this;
  function test() {
     //ici on est dans la fonction test on n'est plus dans 
     //une méthode de obj donc this n'existe pas (tout comme dans une fonction C)
     //par contre la variable that definie dans le même contexte que la
     //définition de la fonction test est visible
    alert(that.a);
  };
  test();
}

A+JYT

[Aiekick]

Merci, ça semble clair.

J'ai relu un article de JPVincent http://jpvincent.developpez.com/tuto...ux-javascript/

j’avais zappé le paragraphe "Le contexte ou this".
Effectivement quand je lis ça : "this fait référence à l'objet d'où est exécutée la fonction", je me dit qu'il va falloir que je fasse bien gaffe à this et l'utiliser avec parcimonie et systématiquement créer des variables locales qui pointent sur lui dans mes constructeurs, pour être sur de savoir ce que je manipule...

Sinon ce qui mettait le brun dans ma classe c'est aussi que les fonctions ajax sont asynchrone et donc j'interrogeais une méthode 'countIt' alors que les données n'était pas encore disponible. A cela soit je fait :
* "$.ajaxsetup({async: false})" ce qui passe la fonction en synchrone
* ou je lance getJSON dans la page HTml et je crée ma classe avec le tableau de donnée en argument dans le callback de getJSON.

Pour plus de flexibilité, je préférerais intégrer getJSON dans ma classe.

Quelle est la contre partie de passer cette fonction en synchrone ?
Problème de perfs ?
Sachant que sur ma page il y aura plusieurs objets javascript mais qu'un de ceux la ne fera rien sans avoir le tableau de données rempli.