Différences entre les techniques de création d'objet

Version imprimable

Bonjour,

J'aimerais savoir si il y a une différence entre ces 3 techniques de création d'objet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var unObj = function() {
   this.prop1 = valeur1;
   this.prop2 = valeur2;
   this.method1 = function() { ... }
}
var useObj = new unObj();
 
-----
 
var unObj = {
   prop1 : valeur1,
   propr2 : valeur2.
   method1 : function() { ... }
}
 
-----
 
var unObj = new Object();
unObj.prop1 = valeur1;
unObj.prop2 = valeur2;
unObj.method1 = function() { ... };

Merci.

05/01/2011, 21h41
SpaceFrog

la différence réside dans le type d'objet

teste avec typeOf ...

Chacun des type pouvant avoir des propriétés ou methodes propres différentes
05/01/2011, 21h57
Willpower

Citation:

Envoyé par SpaceFrog

la différence réside dans le type d'objet

teste avec typeOf ...

Chacun des type pouvant avoir des propriétés ou methodes propres différentes

Les 3 typeof donneront des "object"

Pour moi, les 3 sont identiques, mais :

la première est plus pratique si tu comptes définir plusieurs objets avec le même prototype. (structure)

La deuxième solution si tu ne fais qu'un seul objet de ce prototype.

La troisième permet de rajouter des méthodes/propriétés. (par exemple sous certaines conditions.) mais ne doit pas servir de déclaration car le "new Object" est moche et pas très esthétique(selon moi) et devrait donc être remplacé/couplé à un des 2 exemples précédent avec un constructeur pauvre ou vide si tu le désires comme par exemple :

Code:

var unObj = {};

Code:

Les 3 typeof donneront des "object"

biensur ... la preuve ...

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
var valeur1
var valeur2
var unObj1 = function() {
   this.prop1 = valeur1;
   this.prop2 = valeur2;
   this.method1 = function() { alert('') }
}
var useObj = new unObj1();
 
 
var unObj2 = {
   prop1 : valeur1,
   propr2 : valeur2,
   method1 : function() { void(0) }
}
 
 
 
var unObj3 = new Object();
unObj3.prop1 = valeur1;
unObj3.prop2 = valeur2;
unObj3.method1 = function() {  };
 
 
alert(typeof unObj1)
alert(typeof unObj2)
alert(typeof unObj3)

Citation:
Envoyé par SpaceFrog
Code:

Les 3 typeof donneront des "object"

biensur ... la preuve ...
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 var valeur1 var valeur2 var unObj1 = function() { this.prop1 = valeur1; this.prop2 = valeur2; this.method1 = function() { alert('') } } var useObj = new unObj1(); var unObj2 = { prop1 : valeur1, propr2 : valeur2, method1 : function() { void(0) } } var unObj3 = new Object(); unObj3.prop1 = valeur1; unObj3.prop2 = valeur2; unObj3.method1 = function() { }; alert(typeof unObj1) alert(typeof unObj2) alert(typeof unObj3)
Evidement, il a mal écrit son code, mais on peut déviner que ce qu'il voulait écrire c'était :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var makeObj = function() { this.prop1 = 1; this.prop2 = 2; //this.method1 = function() { }; }; var unObj = new makeObj(); alert(typeof(unObj)); //----- var unObj = { prop1 : 1, propr2 : 2 } alert(typeof(unObj)); //----- var unObj = new Object(); unObj.prop1 = 1; unObj.prop2 = 2; alert(typeof(unObj));
il a juste appelé le premier "useObj" au lieu de "unObj" à qui il avait déjà donné le nom de la fonction servant à le construire ... toi-même tu as changé les noms pour les appeler "unObj1" et "unObj2". ;)

Code:

1 2 3 4 5 6 var unObj = function(){...}; // ou var unObj = new Object(); // ou var unObj = {};
revien au même ; attache un objet vide a unObj
nb: pour le premier utiliser avec fonction(),
cré un object seulement si il est utilisé avec new comme dans ton exemple

pour :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var unObj = new Object(); unObj.prop1 = 'valeur1'; // ou unObj['prop1'] = 'valeur1'; // ou var unObj = {'prop1':'valeur1'}; //ou var unObj = function() { this.prop1 = 'valeur1'; }
cest 3 methodes font pratiquement la meme choses comme la bien expliquer Willpower.

mais tu peux les mixer a ta guise
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var humain = function(){ this.planete = 'terre'; this.age = 1; this.livreFavori = function(titre){ this.livreFavori = titre } } var nault = new humain(); nault.profession = 'programmeur' nault['couleurYeux'] = 'bleu' nault.livreFavori('c++ pour les null')
donc y a t'il une différence entre ces 3 facons de creer des objets

Oui la façon dont tu les déclare seulement, et par la suite comment tu va t'en servir, bien c'est à ta guise selon l'utilisé/fonctionnment qu'ils auronts

05/01/2011, 22h46
Willpower
Citation:
Envoyé par nault

Code:

1 2 3 4 5 6 var unObj = function(){...}; // ou var unObj = new Object(); // ou var unObj = {};

...
je dirai même plus (pour être précis et supprimer l’ambiguïté entre objet et fonction qui traîne depuis le début du thread)
Code:

1 2 3 4 5 6 var unObj = new(function(){})(); // ou var unObj = new Object(); // ou var unObj = {};
revient au même, attache un objet vide à unObj. ;)
05/01/2011, 23h17
RomainVALERI
Citation:

Envoyé par chok371

ces 3 4 techniques de création d'objet :

:mrgreen:
Code:

1 2 3 4 5 6 function unObj(valeur1, valeur2) { this.prop1 = valeur1; this.prop2 = valeur2; this.method1 = function() { /* code */ }; } var useObj = new unObj();
...qui revient au même que la première de tes syntaxes, en l'occurrence : un constructeur, donc un objet Function.
D'où la nécessité de l'utilisation du "new" dont Willpower a déjà parlé.

Citation:
Envoyé par Willpower
je dirai même plus (pour être précis et supprimer l’ambiguïté entre objet et fonction qui traîne depuis le début du thread)
Code:

1 2 3 4 5 6 var unObj = new(function(){})(); // ou var unObj = {}; // ou var unObj = new Object();
revient au même, attache un objet vide à unObj. ;)
Pour me citer moi-même, la différence entre la première et les 2 suivantes, c'est qu'en plus de pouvoir ré-instancier des objets ayant le même constructeur, dans la première ont peut executer du code dans la création de l'objet alors que la 2ème n'est qu'une série d'assignations de propriétés et de méthodes. (la 3ème étant moche car pareil que la 2 s'écrivant avec plus de caractères et aucune assignation directe n'est possible.)

Voila, tout est résumé ici.

ps:RomainVALERI, je ne vois pas de quoi tu parles. t'as recopié la première façon.

edit:

il existe aussi les trucs farfelus pour créer/copier (plus ou moins partiellement) les objets :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var unObj1 = new (function(){this.prop1="auto";})(); alert(unObj1.prop1); //----- var unObj4 = new unObj1.constructor(); alert(unObj4.prop1) makeObj5 = function(){}; makeObj5.prototype = unObj1; var unObj5 = new makeObj5(); alert(unObj5.prop1);

07/01/2011, 00h50
chok371

Merci.

Par contre, dans les codes que vous avez écrits, je comprends pas pourquoi il y a des lignes où il n'y a pas de " ; " à la fin, c'est pas obligatoire normalement ?
07/01/2011, 01h58
nault

Si tu ne met pas de ; a la fin , ton script va quand même s'exécuter mais pour des raison sémantique et de Bonne pratique, il est préférable de
Toujour mettre le point-virgule
07/01/2011, 06h16
Willpower

Citation:

Envoyé par nault

Si tu ne met pas de ; a la fin , ton script va quand même s'exécuter mais pour des raison sémantique et de Bonne pratique, il est préférable de
Toujour mettre le point-virgule

Ce n'est absolument pas obligatoire, en javascript le saut de ligne correspond à une fin d'instruction mais effectivement c'est vivement conseillé ! Déjà pour la lecture, mais aussi par exemple si un jour tu décides que ton code devient important et que tu décides de le minimiser via un minimiser (suppression des espace, sauts de lignes, diminution des noms des variables locales, etc..)

dans ce cas les sauts de ligne seront supprimés mais pas remplacé par des ";" donc ton code ne fonctionnera plus. :)

exemple :

Citation:

function alpha(){
//blabla
}

var beta = function(){
//blabla
};

si tu déclares une fonction à la manière de beta, il faut impérativement un ; à la fin pour clôturer l’assignation "=", une fois j'avais ce type de code et j'avais oublié un ";" après une fonction de ce genre et j'ai bien galéré pour trouver pourquoi il ne fonctionnait plus après l'avoir minimisé. :zoubi:
07/01/2011, 13h22
chok371

Ok merci.;)