Discussion :

[topolino]

Bonjour,

je pose une question sur la difference entre ces 2 facons de faire une class.
Dans un cas je retourne un object et dans l'autre une fonction ?

Avez-vous un commentaire ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    var test = function() {
        var test = this;
        return function(age) {
            test.age = age;
            return test;
        }
    }
 
    var test2 = new test()(16);
    console.log(test2.age);

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
    var test3 = function (age) {
        return {
            'age': age
        }
    }
 
    var test4 = new test3(16);
    console.log(test4.age);

Merci

[SylvainPV]

Ce ne sont pas des classes et il n'y a pas de classes en JS


Appelons ça des objets instanciés via une fonction jouant le rôle de constructeur. Je sais que plein de gens appellent ça des classes et qu'on a un mot-clé class en ES6, mais j'appelle un chat un chat et ce n'est pas parce que je me mets à quatre pattes et que je fais Miaou qu'on est censé me prendre pour un chat.


Ce détail lexical réglé, passons au code.


Je ne comprends pas l'intérêt de la fonction test à retourner une fonction et devoir nécessiter deux appels consécutifs ()(16) pour instancier l'objet. Peut-être pour créer un scope local, mais dans ce cas pourquoi ne pas utiliser une fonction immédiatement invoquée (IIFE) ? D'après moi ça ne sert ici à rien et embrouille plus qu'autre chose.


En revanche il y a une différence que je comprends, c'est que la fonction test3 retourne un nouvel objet déclaré littéralement, et pas l'objet créé par l'opérateur new. Donc tu peux l'appeler avec ou sans new, ça ne changera rien. En général, quand on appelle une fonction avec l'opérateur new, on dit que cette fonction est un constructeur et elle ne possède pas d'instruction return. Le contexte d'appel du constructeur est un nouvel objet créé par cet opérateur new, et retourné par défaut par la fonction constructeur. C'est à dire qu'une fonction strictement identique à la fonction test, mais sans opérateur new, serait :

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
 
function test_avec_new(age){
   this.age = age;
}
 
 
var instance_avec_new = new test_avec_new(16);
 
 
// équivaut à peu de choses près à:
 
 
function test_sans_new(age){
var  instance = Object.create(test_sans_new.prototype);   
   instance.age = age;
   return instance;
}
 
 
test_sans_new.prototype.constructor = test_sans_new;
 
 
var instance_sans_new = test_sans_new(16);

Plus d'explications ici : https://developer.mozilla.org/fr/doc...3%A9rateur_new

[topolino]

Merci pour tes explications qui sont souvent très clair.

Je retourne une fonction car quand l'objet est instancié, un des paramètres de la fonction est un objet literal contenant des méthodes et properietes qui vont subir divers traitements dans l'objet instancié.

Je suis d'accord avec IIFE.

Est ce pertinent ?

[SylvainPV]

Il faudrait que je vois plus de code pour comprendre ton besoin. En gros tu passes un objet en argument et tu voudrais que cet objet ne soit pas modifié par référence ? Un Object.assign ou un jQuery.extend peut être utilisé pour clôner l'objet et perdre la référence, tout en complétant les valeurs par défaut des paramètres.

[topolino]

En esperant que le code soit plus clair que mes propos

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
 
 var myFactory = function(){
        var globalConnection = null;
        var myFactory = this;
 
        var init = function (options) {
            if (options && options.rootPath) {
              globalConnection = "1";
            } else {
              globalConnection = "2";
            }
        };
 
        return function (havingLog, options) {
            if (globalConnection === null) {
                init(options);
            }
 
            myFactory.connection = globalConnection;
 
            if (options && options.listeners) {
              jQuery.each(options.listeners, function (event, fn) {
                //code
              });
            }
 
            if (options && options.methods) {
              options.methods.forEach(function (method) {
                //code
                };
              });
            }
 
            return myFactory;
        };
    };
 
	var myHub = function(){
		var....
 
		return new myFactory()(logging, {
			methods: ['method1', 'method12'],
			listeners: {
                    'onLis1': function () {
                        //code
                    },
                    'onLis2' : function (exchangeDetails) {
						//code
					}
			}
          });
		  }
		return myHub
	}

[SylvainPV]

Je ne comprends pas tout, par exemple pourquoi myFactory retourne une fonction qui elle-même retourne myFactory ?

Si j'ai bien suivi, tu as une variable statique globalConnection et une fonction d'initialisation que tu ne souhaites pas exposer en dehors du scope de myFactory. Par contre tu attaches globalConnection comme propriété de myFactory, donc tu l'exposes quand même, c'est là que je ne te suis plus trop.

Avec une IIFE, ça donnerait un truc comme ç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
 var myFactory = (function(){ 
	var globalConnection = null;
 
	var init = function (options) {
		if (options && options.rootPath) {
		  globalConnection = "1";
		} else {
		  globalConnection = "2";
		}
	};
 
    return function(havingLog, options){
 
		if (globalConnection === null) {
			init(options);
		}
 
		// code
    };
 })();
 
new myFactory(logging, options);

Mais si ça ne te dérange pas d'exposer les variables statiques, ça peut se réduire à ç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
var myFactory = function(havingLog, options){
 
	if (myFactory.globalConnection === null) {
		myFactory.init(options);
	}
 
 
	// code
};
myFactory.globalConnection = null;
myFactory.init = function (options) {
	if (options && options.rootPath) {
	  globalConnection = "1";
	} else {
	  globalConnection = "2";
	}
};
 
new myFactory(logging, options);