2010-05-04 7 views
1

J'ai vu des objets définis de deux manières différentes, qui fonctionnent de manière similaire, mais qui sont, bien sûr, fondamentalement différents. Vous pouvez le faire soit comme ceci:Quelle méthode de création d'objets javascript est la meilleure?

var myobject = {property: 'hello', 
       act: function() { 
        this.property += ' world'; 
       }}; 

et comme ceci:

function myobject() { 
    this.property = 'hello'; 
    this.act = function() { 
     this.property += 'world'; 
    } 
} 

La deuxième méthode pourrait créer des objets comme si

var newobj = new myobject(); 

mais vous pouvez faire quelque chose de similaire en utilisant la première notation en faisant de l'objet la valeur de retour d'une fonction. Le nouveau mot-clé a l'avantage de pouvoir transmettre des paramètres qui peuvent être utilisés pour initialiser les propriétés de l'objet, mais vous pouvez tout aussi bien ajouter une fonction init au premier type d'objet. Je me demandais si, en dehors de ces deux différences, il y avait une différence fondamentale qui rendait une méthode nettement meilleure que l'autre méthode.

+1

Il y a beaucoup de différence et personne ne s'accorde à dire qu'une méthode est meilleure. Contexte: http: // stackoverflow.com/questions/1595611/comment créer correctement un objet personnalisé en JavaScript – bobince

Répondre

2

La seconde est meilleure car vous pouvez la réutiliser. De plus, la propriété constructor de l'objet construit est différente dans chaque cas. Cela mis à part, la seconde méthode gaspille de l'espace en allouant une nouvelle fonction à la propriété act chaque fois que vous appelez le constructeur. (Notez que la première méthode perd également l'espace de la même façon.) Utiliser des prototypes à la place:

function MyConstructor() { 
    this.property = 'hello'; 
} 

MyConstructor.prototype = { 
    act: function() { 
    this.property += 'world'; 
    } 
}; 

MyConstructor.prototype.constructor = MyConstructor; 

var obj = new MyConstructor(); 
+0

Vous pouvez réutiliser la première méthode pas plus ou moins que la deuxième méthode. La seule différence est que le premier doit être déclaré avant d'être appelé ou exécuté. –

0
var f = function() {}; 
function g() {} 

if (typeof(f) === typeof(g)) { 
    alert(typeof(f) + "\n" + f + "\n" + g); 
} 

Les types sont identiques et f variable a une fonction anonyme qui lui est assignée. Puisque f est une variable nommée avec une fonction comme valeur, c'est une fonction qui n'est pas anonyme. JavaScript est un langage lambda d'héritage descendant qui permet la création accidentelle de variables globales. En ce qui concerne les instances complexes d'héritage où les fermetures sont utilisées à travers les étendues d'espace de noms de variance, vous devez vous assurer que vos variables sont définies pour éviter les collisions, en particulier en ce qui concerne la réutilisation. La première convention impose une connaissance stricte de la déclaration de variable, car la fonction doit être déclarée avant de pouvoir être exécutée. La deuxième convention ne fournit pas cette connaissance, ce qui est potentiellement problématique en ce qui concerne l'instanciation et l'invocation comme fermeture dans la logique complexe décrite précédemment. Heureusement, JSLint est assez intelligent pour lancer une erreur lorsqu'une fonction est utilisée avant d'être déclarée. Puisque les deux conventions sont identiques dans la représentation, je suggérerais seulement d'utiliser celle qui n'est pas ouverte aux abus de la programmation défectueuse et bâclée. En résumé, si g et f sont tous les deux des variables nommées avec une fonction comme affectation, faites-le toujours correctement en utilisant la première convention où vous déclarez votre variable en utilisant le mot-clé var.

0
javascript: 
    canDo="b:c=function(){}"; 
    canNot="function a:d(){}"; 

    eval(canDo); 

    alert(["Can do ",canDo, 
     ".\n\n\nConfirmed result is: \n\n b:c=", 
     eval("b:c") 
     ].join("")); 

    alert(
    confirm(
     "Click OK to confirm this is not valid (can NOT do):\n\n" + canNot) ? 
    eval(canNot) : "Test will fail if attempted and 'a:d' will not exist." 
); 

affiche, dans FireFox:

 
Can do b:c=function(){}. 


Confirmed result is: 

b:c=function() { 
} 

et

 
Click OK to confirm this is not valid (can NOT do): 

function a:d(){} 

qui donne une erreur d'exécution si OK est choisi.

Questions connexes