Plusieurs façons courantes de créer des objets en js orienté objet (mode usine, mode constructeur, mode prototype)_compétences javascript

Dans le dernier article, je vous ai présenté les bases du javascript orienté objet Cet article continue d'en apprendre davantage sur le javascript orienté objet. La syntaxe de JS est très flexible. pour une création d'objet simple. Ces endroits trop flexibles prêtent en effet parfois à confusion, nous allons donc aujourd'hui trier plusieurs méthodes couramment utilisées pour créer des objets en JS.

Avant-propos

Bien que l'utilisation du constructeur Object ou l'utilisation de littéraux d'objet puissent être très pratiques pour créer un objet, cette méthode présente un inconvénient évident : utiliser une interface pour créer plusieurs objets produira beaucoup de code redondant. Par conséquent, afin de résoudre ce problème, les gens ont commencé à utiliser les méthodes suivantes pour traiter des objets communs.

Mode usine

Ce modèle résume le processus spécifique de création d'objets et utilise des fonctions pour créer les détails des objets avec des interfaces spécifiques

function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('谦龙','男','100');
 p1.show();
 var p2 = cPerson('雏田','女','14');
 p2.show();

Test du mode usine

Problèmes avec la méthode usine : l'utilisation du mode usine peut créer un objet contenant toutes les informations, et cette fonction peut être appelée d'innombrables fois. Bien que cela résolve le problème de la création de plusieurs objets similaires, cela ne résout pas le problème de la reconnaissance des objets (c'est-à-dire comment connaître le type d'un objet)

Modèle de constructeur

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();

Test de modèle de constructeur

Notez que le constructeur est légèrement différent du modèle d'usine, comme suit

La première lettre du constructeur est en majuscule

Aucun objet créé explicitement

Attribuer des propriétés et des méthodes à cet objet

Aucune déclaration de retour

Et appeler le constructeur de cette manière passera en gros par plusieurs étapes

Créer un nouvel objet

Attribuez la portée du constructeur à cet objet (pour que cela pointe vers cet objet)

Exécuter le code dans le constructeur (c'est-à-dire le processus d'ajout de propriétés et de méthodes à un nouvel objet)

Objet de retour

Remarque : le constructeur n'est en fait pas très différent d'une fonction ordinaire. La seule différence réside dans la méthode d'appel. Ce qui suit montre plusieurs méthodes d'appel différentes

// 调用方式1 new 方式
var p1 = new CPerson('谦龙','男','100');
p1.show();//谦龙 100 男
// 调用方式2 普通函数调用
CPerson('谦龙','男','100');
window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
// 调用方式3 在另一个对象的作用域中调用
var obj = new Object();
CPerson.call(obj,'谦龙','男','100');
obj.show(); //谦龙 100 男 在obj的作用域

Problèmes avec les constructeurs : le principal problème lié à l'utilisation des constructeurs est que chaque méthode doit être recréée sur chaque instance. P1 et p2 ont tous deux des méthodes show, mais ce ne sont pas des instances de la même fonction, car la fonction est également une objet en js. Par conséquent, leurs méthodes d’affichage partagées ne sont pas égales.

Mode Prototype

Chaque fonction possède un attribut prototype, qui est un pointeur pointant vers un objet. Le but de cet objet est de contenir des propriétés et des méthodes pouvant être partagées par toutes les instances d'un type spécifique. C'est-à-dire l'objet prototype de l'objet créé en appelant le constructeur

L'avantage est que toutes les instances d'un objet peuvent partager ses méthodes de propriété. Autrement dit, il n'est pas nécessaire de définir les informations d'instance dans le constructeur

function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //谦龙 100 男
var p2 = new CPerson();
 p2.show();//谦龙 100 男
 console.log(p1.show == p2.show)//true

Le contenu ci-dessus concerne plusieurs façons courantes de créer des objets en js orienté objet (mode usine, mode constructeur, mode prototype), j'espère qu'il vous plaira.