Quelle est la meilleure façon de créer un objet en JavaScript ? Est-ce que `var` est nécessaire avant une propriété d'objet ?

Question

Jusqu'à présent, j'ai vu trois façons de créer un objet en JavaScript. Quelle est la meilleure façon de créer un objet et pourquoi ?

J'ai aussi vu que dans tous ces exemples, le mot clé var n'est pas utilisé devant une propriété - pourquoi ? N'est-il pas nécessaire de déclarer var avant le nom d'une propriété car il est mentionné que les propriétés sont des variables ?

Dans la deuxième et la troisième façon, le nom de l'objet est en majuscule alors que dans la première façon, le nom de l'objet est en minuscule. Quelle casse doit-on utiliser pour le nom d'un objet ?

Premier moyen :

function person(fname, lname, age, eyecolor){
  this.firstname = fname;
  this.lastname = lname;
  this.age = age;
  this.eyecolor = eyecolor;
}

myFather = new person("John", "Doe", 50, "blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");

Deuxième voie :

var Robot = {
  metal: "Titanium",
  killAllHumans: function(){
    alert("Exterminate!");
  }
};

Robot.killAllHumans();

Troisième méthode : des objets JavaScript utilisant la syntaxe des tableaux :

var NewObject = {};

NewObject['property1'] = value;
NewObject['property2'] = value;
NewObject['method'] = function(){ /* function code here */ }

Answer 1

Il n'y a pas meilleur Cela dépend de votre cas d'utilisation.

• Utilice voie 1 si vous souhaitez créer plusieurs objets similaires. Dans votre exemple, Person (vous devez commencer le nom par une majuscule) s'appelle la fonction constructeur . Ceci est similaire à classes dans d'autres langages OO.
• Utilice moyen 2 si vous n'avez besoin que de un objet d'une sorte (comme un singleton). Si vous voulez que cet objet hérite d'un autre, vous devez utiliser une fonction de construction.
• Utilice moyen 3 si vous voulez initialiser des propriétés de l'objet en fonction d'autres propriétés de celui-ci ou si vous avez des noms de propriétés dynamiques.

Mise à jour : Comme les exemples demandés pour la troisième voie.

Propriétés dépendantes :

Ce qui suit ne fonctionne pas comme this fait no se référer à book . Il n'y a aucun moyen d'initialiser une propriété avec les valeurs d'autres propriétés dans un objet littéral :

var book = {
    price: somePrice * discount,
    pages: 500,
    pricePerPage: this.price / this.pages
};

à la place, vous pourriez faire :

var book = {
    price: somePrice * discount,
    pages: 500
};
book.pricePerPage = book.price / book.pages;
// or book['pricePerPage'] = book.price / book.pages;

Noms de propriétés dynamiques :

Si le nom de la propriété est stocké dans une variable ou créé par une expression, vous devez utiliser la notation entre crochets :

var name = 'propertyName';

// the property will be `name`, not `propertyName`
var obj = {
    name: 42
}; 

// same here
obj.name = 42;

// this works, it will set `propertyName`
obj[name] = 42;

Answer 2

Il existe plusieurs façons de définir une fonction. Elle est totalement basée sur vos besoins. Voici quelques styles :-

1. Constructeur d'objets
2. Constructeur littéral
3. Basé sur la fonction
4. Basé sur les prototypes
5. Basé sur les fonctions et les prototypes
6. Basé sur Singleton

Exemples :

1. Constructeur d'objet

   var person = new Object();

   person.name = "Anand", person.getName = function(){ return this.name ; };

2. Constructeur littéral

   var person = { name : "Anand", getName : function (){ return this.name } }

3. fonction Constructeur

   function Person(name){ this.name = name this.getName = function(){ return this.name } }

4. Prototype

   function Person(){};

   Person.prototype.name = "Anand";

5. Combinaison fonction/prototype

   function Person(name){ this.name = name; } Person.prototype.getName = function(){ return this.name }

6. Singleton

   var person = new function(){ this.name = "Anand" }

Vous pouvez l'essayer sur la console, si vous avez des doutes.

Answer 3

Il n'y a pas de "meilleure façon" de créer un objet. Chaque méthode présente des avantages en fonction de votre cas d'utilisation.

Le modèle de constructeur (une fonction jumelée avec l'attribut new pour l'invoquer) permet d'utiliser l'héritage prototypique, alors que les autres méthodes ne le permettent pas. Donc, si vous voulez un héritage prototypique, alors une fonction constructeur est une bonne solution.

Cependant, si vous voulez un héritage prototypique, vous pouvez aussi bien utiliser Object.create ce qui rend l'héritage plus évident.

Création d'un objet littéral (ex : var obj = {foo: "bar"}; ) fonctionne très bien si vous disposez de toutes les propriétés que vous souhaitez définir au moment de la création.

Pour définir les propriétés ultérieurement, le NewObject.property1 est généralement préférable à la syntaxe NewObject['property1'] si vous connaissez le nom de la propriété. Mais cette dernière est utile lorsque vous n'avez pas réellement le nom de la propriété à l'avance (ex : NewObject[someStringVar] ).

J'espère que cela vous aidera !

Answer 4

Je suppose que ça dépend de ce que vous voulez. Pour des objets simples, je pense que vous pouvez utiliser la deuxième méthode. Lorsque vos objets deviennent plus grands et que vous prévoyez d'utiliser des objets similaires, je pense que la première méthode est préférable. De cette façon, vous pouvez également l'étendre en utilisant des prototypes.

Exemple :

function Circle(radius) {
    this.radius = radius;
}
Circle.prototype.getCircumference = function() {
    return Math.PI * 2 * this.radius;
};
Circle.prototype.getArea = function() {
    return Math.PI * this.radius * this.radius;
}

Je ne suis pas un grand fan de la troisième méthode, mais elle est vraiment utile pour modifier dynamiquement les propriétés, par exemple var foo='bar'; var bar = someObject[foo]; .

Answer 5

Il existe de nombreuses façons de créer vos objets en JavaScript. L'utilisation d'une fonction de construction pour créer un objet ou la notation littérale d'un objet est l'utilisation d'un lot en JavaScript. On peut également créer une instance d'objet, puis lui ajouter des propriétés et des méthodes. Il existe trois façons courantes de créer des objets en JavaScript.

Fonctions du constructeur

Il existe des fonctions constructrices intégrées que nous pouvons tous utiliser de temps en temps, comme Date(), Number(), Boolean(), etc. Toutes les fonctions constructrices commencent par une majuscule, mais nous pouvons créer une fonction constructrice personnalisée en JavaScript, comme ceci :

function Box (Width, Height, fill) {  
  this.width = Width;  // The width of the box 
  this.height = Height;  // The height of the box 
  this.fill = true;  // Is it filled or not?
}  

et vous pouvez l'invoquer, en utilisant simplement new(), pour créer une nouvelle instance du constructeur, créez quelque chose comme ci-dessous et appelez la fonction constructeur avec des paramètres remplis :

var newBox = new Box(8, 12, true);  

Litraux d'objets

L'utilisation des littéraux d'objet est très utilisée pour créer des objets en JavaScript, voici un exemple de création d'un objet simple, vous pouvez assigner n'importe quoi aux propriétés de votre objet tant qu'elles sont définies :

var person = { 
    name: "Alireza",
    surname: "Dezfoolian"
    nose: 1,  
    feet: 2,  
    hands: 2,
    cash: null
};  

Prototypage

Après avoir créé un objet, vous pouvez prototyper d'autres membres, par exemple en ajoutant de la couleur à notre boîte :

Box.prototype.colour = 'red';