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

Comment créer plusieurs objets en JavaScript ? Quelle est la meilleure façon de créer plusieurs objets en JavaScript ? Littéral? Approche de modèle d’usine ? Méthode constructeur ? Méthode prototype ? Méthode prototype plus constructeur ? Vous le saurez lorsque vous entrerez et jetterez un œil.

Au cours du processus de développement, nous rencontrons souvent le 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 pour 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'une des façons les plus courantes de créer des objets. Les propriétés des objets créés dans la méthode littérale sont accessibles en écriture et énumérables par défaut.

Le code suivant montre l'utilisation de littéraux pour créer plusieurs objets :

// 字面量方式创建多个对象
var person1 = {
    name: 'jam',
    age: 18,
    address: '上海市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person2 = {
    name: 'tom',
    age: 20,
    address: '北京市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person3 = {
    name: 'liming',
    age: 19,
    address: '天津市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}

À partir de l'exemple de code ci-dessus, nous pouvons voir qu'il ne faut que 24 lignes pour créer 3 objets. Inconvénients : lors de la création du même objet, vous devez écrire trop de code répété. 经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。

2、创建多个对象——工厂模式方法

工厂模式其实是一种常见的设计模式；
通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象；

如下代码展示了使用工厂模式方法创建多个对象的操作：

// 工厂函数方式创建多个对象
function createPerson (name, age, address) {
    var p = {}
    p.name = name
    p.age = age
    p.address = address
    p.eating = function () {
        console.log(name + '在吃饭')
    }
    return p
}

var p1 = createPerson('jam', 19, '上海市')
var p2 = createPerson('tom', 14, '北京市')
var p3 = createPerson('li', 13, '天津市')

p3.eating() // li在吃饭

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

3、创建多个对象——构造函数方法

构造函数相信大家并不陌生。所谓构造函数，就是提供一个生成对象的模板，并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。

如下代码展示了使用构造函数方法创建多个对象：

// 约定俗成的规范，构造函数名字首字母大写
function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating = function () {
        console.log(this.name + '在吃饭')
    }
    this.running = function () {
        console.log(this.name + '在跑步')
    }
}

var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

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

4、创建多个对象——原型加构造函数方式

二者的组合模式即在构造函数上定义实例属性，那么在创建对象上只需要传入这些参数。在原型对象用于定义方法和共享属性。

如下代码展示了使用原型加构造函数方式创建多个对象：

function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating =
        this.running = function () {
            console.log(this.name + '在跑步')
        }
}
// 将eating方法和running方法加在原型上，就不需要每次创建一个对象都去在内存中加一遍一样的方法
Person.prototype.eating = function () {
    console.log(this.name + '在吃饭')
}
Person.prototype.running = function () {
    console.log(this.name + '在跑步')
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果：
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

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

2. Créer plusieurs objets - méthode de 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 grâce à laquelle nous pouvons générer des idées. Le code suivant montre le fonctionnement de l'utilisation de la méthode du mode usine pour créer plusieurs objets : rrreee On peut voir que le code utilisé pour créer trois objets à l'aide de la méthode du mode usine est évidemment bien inférieur au code littéral Okay , mais est-ce la meilleure façon ? NON ! NON ! NON !

Les **inconvénients** de la méthode du modèle d'usine sont : Prenez l'exemple de code ci-dessus comme exemple. Lorsque nous imprimons p1, p2 et p3, nous ne pouvons pas obtenir le type le plus vrai de l'objet, par exemple si p1 est un humain, un animal ou un outil🎜🎜🎜🎜3. Créer plusieurs objets - méthode constructeur. 🎜🎜🎜Construction Je pense que tout le monde connaît les fonctions. 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 : 🎜rrreee🎜🎜Il existe une norme non écrite pour les constructeurs, c'est-à-dire que la première lettre du nom du constructeur est en majuscule ou en casse chameau. 🎜La méthode constructeur n'est pas le moyen le plus parfait pour créer plusieurs objets, et elle présente également des inconvénients. 🎜Inconvénients : Chaque méthode doit être recréée sur chaque instance. Par exemple, la même méthode de consommation et la même méthode d'exécution doivent être créées sur les instances de p1, p2 et p3, ce qui gaspille beaucoup de mémoire. . Espace🎜🎜🎜🎜4. Créer plusieurs objets - prototype plus méthode constructeur🎜🎜🎜Le mode de combinaison des deux consiste à définir les attributs d'instance sur le constructeur, il vous suffit alors de transmettre ces paramètres lors de la création du objet . L'objet prototype est utilisé pour définir des méthodes et des propriétés partagées. 🎜🎜Le code suivant montre l'utilisation de prototypes et de constructeurs pour créer plusieurs objets : 🎜rrreee🎜🎜Le dernier est bien sûr la finale. Cette méthode de prototype et de constructeur est actuellement la plus utilisée et reconnue dans ECMAScript. méthode avancée de création d’objets. 🎜🎜🎜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. 🎜🎜🎜【Recommandations associées : 🎜tutoriel vidéo javascript🎜, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!