Paramètre nommé à l'appel dans une class

**alexis_c** · 29/07/2022, 10h25

Bonjour, et merci a l'avance pour le temps que vous voulez bien m'accorder.

Je me retrouve face a une erreur que je ne parvient pas a comprendre. Pouvez-vous m'éclairer de vos lumière?

Le problème survient quand, dans une class, j'appel une fonction d'une autre class. Si j'utilise des paramètre nommé cela ne fonctionne pas, si j'utilise des paramètres par position cela fonctionne.
De plus les paramètres nommé dans la classe fonctionne si au par avant je les est utilisé en dehors de la classe.
Code exemple:

Code html :

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
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
                .GenBp {
        position: relative;
        margin: 0 auto;
        z-index: 0;
        border-radius: 0.5em;
}
                .couleur{
                background:blue;
                }
    </style>
  </head>
  <body>
    <header></header>
    <main>
<table border=1px>
<thead>
<th>fonction</th>
<th>class parametre position</th>
<th>class parametre nomer</th>
</thead>
<tbody>
<tr>
<td><button id='GenBp_0'>bp0</button></td>
<td><div id='GenBp_1'></div></td>
<td><div id='GenBp_2'></div></td>
</tr>
<tr>
<td><div id='cVisu_0'></div></td>
<td><div id='cVisu_1'></div></td>
<td><div id='cVisu_2'></div></td>
</tr>
</tbody>
</table>
 
    </main>
    <footer></footer>
  </body>
<script type="text/javascript">
 
class GenBp1 {
        constructor(id = "GenBp_D",etiq = "bp") {
                        this.etiq=etiq;
                        this.idcont=document.getElementById(id);
                        this.idcont.classList.add('GenBp');
                        this.conteneurBp = document.createElement('button');
                        this.idcont.appendChild(this.conteneurBp);
                        this.conteneurBp.classList.add('GenBp_Bp');
                        this.conteneurBp.innerHTML = etiq;
 
        this.conteneurBp.addEventListener("click", () => {this.click()});
//               setInterval(() => {this.etat()},1000);
 
        this.compteur=0;
        }
 
        click(){
                        this.compteur+=1;
                        this.conteneurBp.innerHTML=this.etiq+': '+this.compteur;
                        this.etat();
                        dcvisu["1"].etat(this.compteur);
        }
        etat(){
                        this.conteneurBp.classList.toggle("couleur");
        }
}
class GenBp2 {
        constructor(id = "GenBp_D",etiq = "bp") {
                        this.etiq=etiq;
                        this.idcont=document.getElementById(id);
                        this.idcont.classList.add('GenBp');
                        this.conteneurBp = document.createElement('button');
                        this.idcont.appendChild(this.conteneurBp);
                        this.conteneurBp.classList.add('GenBp_Bp');
                        this.conteneurBp.innerHTML = etiq;
 
        this.conteneurBp.addEventListener("click", () => {this.click()});
//               setInterval(() => {this.etat()},1000);
 
        this.compteur=0;
        }
 
        click(){
                        this.compteur+=1;
                        this.conteneurBp.innerHTML=this.etiq+': '+this.compteur;
                        this.etat();
                        dcvisu["2"].etat(val=this.compteur);
        }
        etat(){
                        this.conteneurBp.classList.toggle("couleur");
        }
}
 
class cvisu{
        constructor(id){
                this.cont = document.getElementById(`cVisu_${id}`);
        }
        etat(val){
                this.cont.innerHTML='etat: '+val;
        }
}
 
let GenBp_1 = new GenBp1(id='GenBp_1', etiq='bp1');
let GenBp_2 = new GenBp2(id='GenBp_2', etiq='bp2');
let dcvisu={};
dcvisu["0"] = new cvisu(id="0" );
dcvisu["1"] = new cvisu(id="1" );
dcvisu["2"] = new cvisu(id="2" );
 
//dcvisu["0"].etat(val=GenBp_1.compteur);
</script>
</html>

Ligne 66: appel d'une class avec paramètre position: cela fonctionne
Ligne 92: appel class avec paramètre nommé: cela ne fonctionne pas sauf si je dé-commente la ligne 115.

Je ne comprend pas le problème. Y a-t-il une syntaxe particulière a utilisé? Pouvez vous m'expliquer ce qu'il ce passe?

**NoSmoking** · 29/07/2022, 11h32

Bonjour,

Si j'utilise des paramètre nommé cela ne fonctionne pas,

quel est l'intérêt ?

Ton

Code :

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

dcvisu["2"].etat(val=this.compteur);

devrait être simplement

Code :

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

dcvisu["2"].etat(this.compteur);

idem pour tes autres appels de fonction.

Ajoute un "use strict" en début de tes scripts et regarde ce que te dis la console, F12

Code :

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

1
2
3
4
<script>
"use strict";
// ici ton code
</script>

**ViskashaEveillé** · 29/07/2022, 15h48

Bonjour,

si tu veux utiliser les paramètres nommés dans les functions tu dois les formatter comme des JSON :

Code :

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

1
2
3
4
5
function lolo({para, para2}){
  console.log(para, para2)
}
lolo(para=1, para2=1); // output "undefined undefined"
lolo({para:1, para2:1}); // output "1 1"

J'ignorais qu'on pouvait instancier des objets de classe avec "var=value". Par contre, ça n'a pas l'effet escompté :

Code :

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

1
2
3
4
5
6
7
8
9
 
class lol{
  constructor(id=0){
    this.id=id;
  }
}
console.log(new lol(id=5)) // outputs "lol {id: 5}"
console.log(new lol({id:5})) // outputs "lol {id: {...}}"
console.log(new lol(lolilou=5)) // outputs "lol {id: 5}"

Je pense qu'il faut utilisé l'écriture avec les JSON :

Code :

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

1
2
3
4
5
6
7
8
9
 
class lol{
  constructor({id=0}){
    this.id=id;
  }
}
console.log(new lol(id=5)) // outputs "lol {id: 0}"
console.log(new lol({id:5})) // outputs "lol {id: 5}"
console.log(new lol(lolilou=5)) // outputs "lol {id: 0}"

**NoSmoking** · 29/07/2022, 18h11

En fait les paramètres nommés n'existent pas en JavaScript, ce que l'on fait c'est de simuler leur utilisation en passant un objet en lieu et place d'une multitude de paramètres.
Ceci n'est pas à confondre avec les valeurs par défaut des arguments.

Tu aurais tout à fait pu écrire

Code :

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

console.log(new lol(maVariable=5))

que le résultat n'en aurait pas été modifié, seulement dans ce cas tu initialises, et affectes, une variable globale, maVariable à 5.

Code :

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

1
2
3
4
5
6
7
class lol {
  constructor(id = 0) {
    this.id = id;
  }
}
console.log(new lol(maVariable = 5));
console.log("maVariable :", maVariable);

Ressources :

Paramètre nommé à l'appel dans une class

JavaScript

Discussions similaires

Partager

Partager