Maison > interface Web > js tutoriel > Explication détaillée des trois manières de base de générer des objets en js (mode usine, mode constructeur, mode prototype)

Explication détaillée des trois manières de base de générer des objets en js (mode usine, mode constructeur, mode prototype)

高洛峰
Libérer: 2017-01-10 12:18:21
original
1170 Les gens l'ont consulté

1. Modèle d'usine

Le modèle d'usine est un modèle de conception bien connu dans le domaine du génie logiciel. Étant donné que les classes ne peuvent pas être créées dans ECMAScript, les fonctions sont utilisées pour encapsuler des objets avec des interfaces spécifiques. La méthode d'implémentation est très simple, c'est-à-dire créer un objet dans la fonction, attribuer des propriétés et des méthodes à l'objet, puis renvoyer l'objet.

function a(name){
 var b = new object();
 b.name = name;
 b.say = function(){
  alert(this.name);
 }
  return b
}
Copier après la connexion

La fonction génère l'objet b en interne et le renvoie.

2. Modèle de constructeur

function Person(name, url) { //注意构造函数名第一个字母大写
 this.name = name;
 this.url = url;
 this.alertUrl = alertUrl;
}
  
function alertUrl() {
 alert(this.url);
}
Copier après la connexion

Parce que chaque fois qu'un objet est construit, une méthode alertUrl sera générée, ce qui est un gaspillage. d'espace de ressources.Par conséquent, la méthode alertUrl est écrite globalement pour économiser de l'espace, mais écrire de cette façon viole l'intention initiale de la programmation orientée objet. Le mode prototype suivant est meilleur.

3. Modèle de prototype

Chaque fonction que nous créons a un attribut de prototype. Cet attribut est un pointeur pointant vers un objet, et le but de cet objet est de contenir des informations qui peuvent être utilisées par. des propriétés et méthodes spécifiques partagées par toutes les instances d'un type. L'avantage d'utiliser un objet prototype est que toutes les instances d'objet peuvent partager les propriétés et les méthodes qu'il contient.

function Person(){
}
 
Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
  alert(this.name);
}
 
var person1 = new Person();
var person2 = new Person();
  
//测试代码
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill
 
person1.name = "666";
 
alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill
Copier après la connexion

Chaque fonction que nous créons a un attribut prototype, qui est en fait un pointeur pointant vers un objet.

Lorsqu'un objet personne tel que personne1 est construit, son attribut de nom par défaut est bill. Si vous souhaitez modifier la valeur du nom, vous devez opérer sur person1.name. Cela change simplement l'attribut name de cet objet. alert(person1.prototype.name) affiche toujours une facture, c'est-à-dire l'attribut name sur le prototype

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun, et. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour des explications plus détaillées sur les trois manières de base de générer des objets en js (mode usine, mode constructeur, mode prototype), veuillez faire attention au site Web PHP chinois pour les articles connexes !

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal