Ces deux classes font-elles la même chose ?

Version imprimable

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:

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:

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

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:

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

08/01/2016, 10h15
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 ?
08/01/2016, 11h09
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.

En esperant que le code soit plus clair que mes propos

Code:

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
	}

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:

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:

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);