Comment créer plusieurs objets en JavaScript ? Explication détaillée de quatre méthodes

Au cours du processus de développement, nous sommes souvent confrontés au besoin de créer de nombreux objets similaires, qui peuvent avoir de nombreuses propriétés ou méthodes identiques. Alors, quelles sont les méthodes permettant de créer plusieurs objets ? Quelle est la meilleure méthode ? Jetons un coup d'oeil ensemble !

1. Créer plusieurs objets - méthode littérale

La méthode littérale d'un objet est l'un des moyens les plus courants de créer des objets. Les propriétés des objets créés dans la méthode littérale sont accessibles en écriture, énumérables et configurables par défaut.

Le code suivant montre comment créer plusieurs objets à l'aide de méthodes littérales :

//Créer plusieurs objets à l'aide de méthodes littérales var person1 = {
    nom : 'confiture',
    âge : 18 ans,
    adresse : « ville de Shanghai »,
    manger : fonction () {
        console.log(this.name + 'Manger')
    }
}
var personne2 = {
    nom : 'tom',
    âge : 20 ans,
    adresse : « Ville de Pékin »,
    manger : fonction () {
        console.log(this.name + 'Manger')
    }
}
var personne3 = {
    nom : 'chaulage',
    âge : 19 ans,
    adresse : « ville de Tianjin »,
    manger : fonction () {
        console.log(this.name + 'Manger')
    }
}

经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。

2. Créer plusieurs objets - méthode du modèle d'usine

Le modèle d'usine est en fait un modèle de conception courant ;
Habituellement, nous aurons une méthode d'usine à travers laquelle nous pouvons générer les objets souhaités ;

le code suivant montre le fonctionnement de l'utilisation de la méthode du mode usine pour créer plusieurs objets :

//Créez plusieurs objets à l'aide de la fonction d'usine function createPerson (nom, âge, adresse ) {
    var p = {}
    p.nom = nom
    p.age = âge
    p.address = adresse
    manger = fonction () {
        console.log(nom + 'Manger')
    }
    retour p
}

var p1 = createPerson('jam', 19, 'Shanghai City')
var p2 = createPerson('tom', 14, 'Pékin')
var p3 = createPerson('li', 13, 'Tianjin City')

p3.eating() // Lorsque li mange,

可以看出使用工厂模式方法创建了三个对象使用的代码明显比字面量少了好多行，but这就是最好的方式了吗？NO! NO! NO!
工厂模式方法的**弊端**就在于：以上述示例代码为例。当我们打印p1,p2,p3后，获取不到对象最真实的类型，比如p1是人还是动物还是工具

3. Créer plusieurs objets - Méthode constructeur

Constructeur Je pense que tout le monde le connaît. il. La fonction dite constructeur est une fonction qui fournit un modèle pour générer un objet et décrit la structure de base de l'objet. Un constructeur peut générer plusieurs objets, chacun avec la même structure.

Le code suivant montre l'utilisation de la méthode constructeur pour créer plusieurs objets :

// Spécification conventionnelle, la première lettre du nom du constructeur est en majuscule function Personne (nom, âge, adresse) {
    ce.nom = nom
    this.age = âge
    cette.adresse = adresse
    this.eating = fonction () {
        console.log(this.name + 'Manger')
    }
    this.running = fonction () {
        console.log(this.name + 'en cours d'exécution')
    }
}

var p1 = nouvelle personne('jam', 20, 'Pékin')
var p2 = nouvelle personne ('tom', 14, 'Shanghai City')
var p3 = nouvelle personne('li', 13, 'Tianjin City')

console.log(p1)
// Résultats de sortie // Personne {
// nom : 'confiture',       
// âge : 20 ans,
// adresse : 'Pékin', 
// manger : [Fonction],
// en cours d'exécution : [Fonction]
// }
p1.eating() // Jam

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。
构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。
缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

4. Créez plusieurs objets : —Le mode de combinaison de la méthode prototype et constructeur

consiste à définir les attributs d'instance sur le constructeur, alors seuls ces paramètres doivent être transmis lors de la création de l'objet. L'objet prototype est utilisé pour définir des méthodes et des propriétés partagées.

Le code suivant montre comment créer plusieurs objets à l'aide de prototypes et de constructeurs :

function Personne (nom, âge, adresse) {
    ce.nom = nom
    this.age = âge
    cette.adresse = adresse
    ça.manger =
        this.running = fonction () {
            console.log(this.name + 'en cours d'exécution')
        }
}
// Ajoutez la méthode de consommation et la méthode d'exécution au prototype, vous n'avez donc pas besoin d'ajouter la même méthode en mémoire à chaque fois que vous créez un objet Person.prototype.eating = function () {.
    console.log(this.name + 'Manger')
}
Personne.prototype.running = fonction () {
    console.log(this.name + 'en cours d'exécution')
}
var p1 = nouvelle personne('jam', 20, 'Pékin')
var p2 = nouvelle personne ('tom', 14, 'Shanghai City')
var p3 = nouvelle personne('li', 13, 'Tianjin City')

console.log(p1)
//Résultat de sortie :
// Personne {
// nom : 'confiture',       
// âge : 20 ans,
// adresse : 'Pékin', 
// manger : [Fonction],
// en cours d'exécution : [Fonction]
// }
p1.eating() //

最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。

Après avoir lu ceci, pensez-vous que créer plusieurs objets n'est pas si compliqué ? Vous pouvez les créer en quelques minutes en utilisant la méthode du prototype et du constructeur.