Explication détaillée de la façon dont JavaScript utilise le mode usine, le mode constructeur et le mode prototype pour créer des instances d'objet

Bien qu'il soit très pratique de créer un objet en utilisant le constructeur Object ou en utilisant des littéraux d'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.

Modèle d'usine

Ce modèle résume le processus spécifique de création d'objets, en utilisant 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, que l'on peut appeler d'innombrables fonction des temps. 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

Constructeur d'abord Les majuscules

n'ont pas explicitement créé l'objet

ont attribué les propriétés et les méthodes à cet objet

n'avaient pas d'instruction de retour

et de cette manière L'appel du constructeur passera en gros par plusieurs étapes

Créer un nouvel objet

Attribuer la portée du constructeur à cet objet (donc 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)

Renvoyer l'objet

Remarque : le constructeur n'est en fait pas très différent d'une fonction ordinaire. seulement La 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 réexécutée sur chaque instance une fois créée. , 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 un objet dans js. Par conséquent, leurs méthodes d’affichage partagées ne sont pas égales.

Modèle de prototype

Chaque fonction possède un attribut de 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. Autrement dit, l'objet prototype

de l'objet créé en appelant le constructeur a l'avantage de permettre à toutes les instances de l'objet de partager ses attributs. 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

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!