Javascript POO window[fnstring](param)

**bricoreur** · 21/08/2019, 16h31

Bonjour,

J'essaye d'appliquer le paradigme POO � mon code javascript. Mais je bloque sur un message d'erreur

Uncaught TypeError: window[fnstring] is not a function

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
class Test {

 // FONCTION QUI CONVERTIT UN STRING EN FONCTION
 stringToFunction(rule, idField) { 
  
  var fnstring = rule;  //string
  var param = idField; /: objet

  var fn = window[fnstring](param);  //  this ? lorsque je sors tout mon code de la classe, cela fonctionne. Dans la class = window[fnstring] is not a function ?
    
  if (typeof fn === "function") {
   return fn();
  } else {
   console.log(typeof(fn)); 
  }
 } 

 // FONCTION QUI BOUCLES SUR LES REGLES 
 controls (idField, action, rules) { 
 
  var that = this; 

  idField.addEventListener(action, function() {

   for (var i = 0 ; i <rules.length; i++) {

    let rule = rules[i];
    let error; 

    that.stringToFunction(rule, idField);  

   ...

   }
  });
 }

} // FIN CLASS

nom = document.getElementById('nom'); 

var test1 = new Test(); 
test1.controls(nom, 'focusout', ['test1', 'test2'];

Merci pour vos explications et vos conseils accessibles pour un autodidacte....

**Loralina** · 21/08/2019, 19h34

Bonjour,
Apparemment l'instance de la classe et la premi�re fonction ont le m�me nom, test1, ce qui est probl�matique si elles sont d�finies dans le m�me contexte (la seconde d�finition �crasera la premi�re).
Il faudrait renommer l'un des deux.
A tester : function f1(){}, puis test1.controls(nom, 'focusout', ['f1', 'test2']);.

Par ailleurs :

- Il y a deux erreurs de syntaxe dans ce script (commentaire /: objet, et appel de fonction o� il manque la parenth�se fermante), mais j'imagine que ce sont des erreurs de retranscription.

- Une am�lioration de conception serait de passer directement les fonctions plut�t que leur nom :
test1.controls(nom, 'focusout', [f1,test2]);
La classe n'a en effet pas besoin de savoir o� se trouve la fonction.

- Concernant l'utilisation de let et var : la tendance sera plut�t de n'utiliser que l'un des deux : soit que des let (ou const, selon les cas), soit que des var, sachant que les r�gles de port�e sont diff�rentes, mais qu'on peut bien s�r arriver au m�me r�sultat final.

- Les noms des variables sont plut�t mal choisis, exemple :
idField conviendrait pour une cha�ne de caract�re, mais pas pour un �l�ment html.
Ce serait plus clair comme ceci :
* Un champ html : let field;.
* L'identifiant de ce champ : let idField;.
On peut aussi mettre le type dans le nom, voici des possibilit�s :
* Une cha�ne contenant un nom : st_nom, sNom.
* Un nombre sp�cifiant un num�ro : nb_numero, nb_no, nNumero, nNo...
Si on ne sp�cifie pas le type, il faut au minimum veiller � ce que le nom choisi permette de deviner intuitivement son type, ou du moins ne soit pas d�routant comme dans le cas pr�sent.

Etc.

**bricoreur** · 21/08/2019, 22h24

Merci pour votre retour mais je n'y arrive pas avec une class

je vous laisse un exemple simplifi�

index.html

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
<!DOCTYPE html>
<html>
<head>
 <title> CLASS JS</title>
 <meta charset="utf-8">
</head>
<body>
 
 <form method="post" action="traitement.php" id="formId">
 
  <input type="text" name="nom" id="nom" placeholder="NOM"></input>
  <input type="submit" name="envoyer" value="ENVOYER">
 </form>
 
 <script src="controlForm.js"></script>
 <script src="mainForm.js"></script>
 
</body>
</html>

mainForm.js

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
var nom = document.getElementById('nom'); 
 
control1 = new Control(); 
console.log(control1); 
 
//nom = html Element
// focusout = action
// isRequired, isAlpha = nom des fonctions à appliquer au champ 
control1.verif(nom, 'focusout', ['isRequired', 'isAlpha']);

controlForm.js

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
class Control {

 // FONCTION QUI CONVERTIT UN STRING EN FONCTION
 stringToFunction(rule, field) { 
  var fnstring = rule; // type string
  var param = field;  // type object

  // controlForm.js:10 Uncaught TypeError: window[fnstring] is not a function
  var fn = window[fnstring](param); //Cela marche hors class !!! POURQUOI  PAS DANS UNE CLASS ??

  if (typeof fn === "function") {
   return fn();
  } else {
   console.log(typeof(fn)); 
  }
 } 

// FONCTION QUI TESTE LES REGLES A PASSER AU CHAMP
 verif (field, action, rules) { // on passe en param�tre les r�gles que l'on veut appliquer � un champs
  var that = this;
  //console.log(field); 
  //console.log(action); 
  //console.log(rules); 

  field.addEventListener(action, function() {
   for (var i = 0 ; i < rules.length; i++) {

    // appel de la fonction qui transforme un string en fonction 
    that.stringToFunction(rules[i], field);  
    console.log(error); 
   }
  });
 }

// FONCTION QUI TESTE SI LE CHAMP EST VIDE
 isRequired(field) {
  if (field.value == "") {
   return error = true; 
  } else {
   return error = false; 
  }
 } 

// FONCTION QUI TEST SI LE CHAMP EST ALPHA....
 isAlpha(stfield) {
  var regex_text = new RegExp(/^[A-Z._'-\s]{2,20}$/); 
  if(field.value !== "") {
   if(field.value.length < 2 || field.value.length > 20) {
    return error = true; 
   } else if (!regex_text.test(field.value)) {
    return error = true; 
   } else {
    return error = false; 
   }
  } else {
   return error = false; 
  } 
 }

} // FIN CLASS

pourquoi le message d'erreur window[fnstring](param) appara�t dans une class et fonctionne tr�s bien hors Class ???

Merci pour vos retours et si vous aviez une solution � mon probl�me...j'en peux plus

**Loralina** · 21/08/2019, 23h32

Si les fonctions sont des m�thodes de la classe, c'est normal qu'elles ne soient pas d�finies sur window.
Voici un exemple o� on appelle une fonction d�finie sur window et une fonction de la classe � partir des noms des fonctions :

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
<script>
function fa() {
		console.log("fa");
}
 
class Test {
	constructor(nomFonctionDefinieSurWindow,nomFonctionDeLaClasse) {
		window[nomFonctionDefinieSurWindow]();
		this[nomFonctionDeLaClasse]();
	}
	fb() {
		console.log("fb");
	}
}
 
new Test("fa","fb");
</script>

La solution est donc d'�crire : var fn = this[fnstring](param);
Suite � cette correction, de ce que j'ai vu, d'autres probl�mes vont survenir ensuite...

**psychadelic** · 21/08/2019, 23h33

Est que tu utilises bien une instance de ta classe ?

**bricoreur** · 22/08/2019, 00h28

Envoy� par Loralina

Si les fonctions sont des m�thodes de la classe, c'est normal qu'elles ne soient pas d�finies sur window.
Voici un exemple o� on appelle une fonction d�finie sur window et une fonction de la classe � partir des noms des fonctions :

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
<script>
function fa() {
		console.log("fa");
}
 
class Test {
	constructor(nomFonctionDefinieSurWindow,nomFonctionDeLaClasse) {
		window[nomFonctionDefinieSurWindow]();
		this[nomFonctionDeLaClasse]();
	}
	fb() {
		console.log("fb");
	}
}
 
new Test("fa","fb");
</script>

La solution est donc d'�crire : var fn = this[fnstring](param);
Suite � cette correction, de ce que j'ai vu, d'autres probl�mes vont survenir ensuite...

merci pour votre retour...maintenant que vous me l'expliquez �a para�t logique....je vais essayer avant de tomber sur la suite des probl�mes...
je suppose que cela va concerner la variable error ??

c'est reparti

**bricoreur** · 22/08/2019, 00h53

re,

merci cela fonctionne et m'a permis de mieux comprendre.

En effet, la suite des probl�me vient de la variable error.

apr�s quelques recherches j'ai trouv� une explication qui m'a bien aid�e :

https://sebastien-dupire.info/faire-...avascript.html

du coup j'ai modifi� mon code

this.error = true;

et dans ma m�thode je l'a r�cup�re avec :

console.log(that.error).

var name n'a qu'une port�e dans la fonction elle-m�me alors que this.name elle devient accessible en dehors

J'ai un doute sur la compr�hension :
var that = this;
C'est en lisant que j'ai corrig� mais je ne suis pas sur de bien comprendre.

est-ce parce que this renvoie � l'objet en-cours et que nous voulons r�cup�rer un r�sultat en dehors de l'objet lui-m�me ???

j'ai �galement lu que si on ne d�clare pas une variable, elle appartient automatiquement � window.

Si vous avez d'autres explications je suis plus que preneur pour ma progression

Merci pour l'aide que vous m'avez apport�e

**psychadelic** · 22/08/2019, 01h05

var that = this;

this est un pointeur local sur l'objet � l'int�rieur de l'instance, that r�cup�re ce pointeur , et that est global

Javascript POO window[fnstring](param)

JavaScript

Discussions similaires

Partager

Partager