5 modèles de conception js

Cet article vous propose principalement 5 modèles de conception js. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde. Jetons un coup d'œil avec l'éditeur ci-dessous.

1. Modèle d'usine

C'est le modèle d'usine, bien que le modèle d'usine résolve de nombreux problèmes avec des objets similaires, il le fait. pas d'objet de fin. Problème d'identification

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

2. Modèle de constructeur

Le sayName dans chaque instance du modèle de constructeur. est différent, donc la méthode chaîne de prototypes

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

hasOwnProperty() a été introduite pour détecter si une propriété existe dans l'instance ou dans le prototype. vrai est l'instance et faux est le prototype

3. Mode prototype

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

Le nom de personne1 est bloqué par une nouvelle valeur. Mais que l'accès à person1.name ou person2.name puisse renvoyer la valeur normalement

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

Pendant tout le processus d'exécution du code ci-dessus, l'attribut name est soit directement accessible sur l'objet Soit accessible via prototype
. Par conséquent, appeler "name" dans person1 renvoie toujours true, que la propriété existe sur l'instance ou sur le prototype.
En utilisant la méthode hasOwnProperty() et l'opérateur in en même temps, vous pouvez déterminer si la propriété existe dans l'objet ou dans le
prototype, comme indiqué ci-dessous
L'attribut name existe en premier dans le prototype , donc hasPrototypeProperty() renvoie true
La propriété existe dans l'instance, donc hasPrototypeProperty() renvoie false
Si le mode prototype est écrit comme

Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
}

le format ci-dessus doit être écrit comme constructeur, sinon ce sera le cas. Le constructeur de fonction pointera vers window

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

4. Modèle d'utilisation du constructeur et du prototype en combinaison

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

5. Mode prototype dynamique

function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job
// 方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

Ce code ne sera exécuté que lorsque le constructeur sera appelé. pour la première fois. Après cela, le prototype a été initialisé et aucune autre modification n'est nécessaire. Mais gardez à l’esprit que les modifications apportées au prototype ici seront immédiatement répercutées dans tous les cas.

Lors de l'utilisation du mode prototype dynamique, les littéraux d'objet ne peuvent pas être utilisés pour remplacer le prototype. Comme expliqué précédemment, si vous remplacez un prototype alors qu'une instance a déjà été créée, vous couperez la connexion entre l'instance existante et le nouveau prototype.

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!