Introduction à plusieurs modes courants de création d'objets en javascript

Cet article présente plusieurs modèles couramment utilisés pour créer des objets en JavaScript, notamment : le modèle d'usine, le modèle de constructeur, le modèle de prototype, le modèle de combinaison de constructeurs et de prototypes et le modèle de prototype dynamique.

1. Modèle d'usine

Regardez le code suivant :

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

C'est le modèle d'usine. Définissez un objet dans la fonction, ajoutez-y des propriétés et des méthodes, et enfin renvoyez l'objet. Bien que ce mode permette une création pratique d'objets, il existe un problème : il est impossible de déterminer qui a créé cette instance.
Par exemple, l'instance son1 de getMySon ne peut pas renvoyer true. Parce que l'instance ici n'est pas exactement créée par getMySon via new, mais dans getMySon.
Le modèle d'usine ne convient donc pas aux situations où de nombreux types d'objets doivent être créés.

Alors comment créer un objet pour déterminer correctement d'où vient l'instance ? Parlons maintenant du modèle de constructeur.

2. Modèle de constructeur

Regardez le code suivant :

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

Il s'agit du modèle de constructeur Veuillez utiliser new lors de l'appel.

Lorsque vous effectuez un nouvel appel, effectuez les étapes suivantes :

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

Les instances générées de cette manière peuvent utiliser l'instance son1 de getMySon pour déterminer qui a généré l'instance.

Alors, quel est le problème avec l’utilisation de constructeurs ? Puisqu'un nouvel objet est créé à chaque fois que new est utilisé, toutes les données ne sont pas partagées entre différentes instances. Mais pour la fonction sayName, il n’est pas nécessaire d’en créer plusieurs. Cela gaspille de l’espace.

Cela mène au type suivant, le mode prototype.

3. Mode prototype

Regardez le code suivant :

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

Il s'agit du mode prototype (les connaissances liées au prototype ne seront pas abordées en détail ici).

Le mode prototype ajoute des propriétés et des méthodes à getMySon.prototype. Le prototype est partagé par toutes les instances. Il n'a qu'une seule copie, toutes les instances n'en ont pas.

Cette méthode permet à la fonction de n'avoir qu'une seule copie sans occuper d'espace supplémentaire. Cependant, les attributs tels que le nom et le sexe n'ont pas besoin d'être partagés entre toutes les instances, et il n'est pas pratique d'utiliser le mode prototype pour transmettre des paramètres afin de générer ces attributs.

Vous pouvez ensuite fusionner le patron constructeur et le patron prototype pour profiter de leurs avantages respectifs. Les propriétés qui n'ont pas besoin d'être partagées entre les instances et qui doivent être générées en passant des paramètres sont générées en mode constructeur, et les propriétés qui doivent être partagées entre chaque instance (telles que les méthodes) sont générées en mode prototype.

3. Le modèle de combinaison de constructeurs et de prototypes
Regardez le code suivant :

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

C'est le modèle de combinaison de constructeurs et de prototypes. Cette approche combine les avantages du modèle constructeur et du modèle prototype. C'est le modèle le plus couramment utilisé pour créer des objets.

4. Modèle de prototype dynamique

Le modèle de prototype dynamique est en fait une encapsulation du modèle de combinaison de constructeurs et de prototypes.
Regardez le code suivant :

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

La raison pour laquelle il est nommé mode prototype dynamique est que getMySon changera lors de différents appels et est dynamique. La définition de la fonction sayName n'est exécutée qu'au premier appel de getMySon.
Essentiellement, les méthodes qui n'ont pas besoin d'être partagées sont toujours définies via le constructeur, et les méthodes qui doivent être partagées sont définies via le prototype. Il suffit de les assembler et de les encapsuler.

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!