5 js-Designmuster

Dieser Artikel stellt Ihnen hauptsächlich 5 js-Designmuster vor. Freunde, die sie benötigen, können darauf verweisen. Schauen wir uns das unten mit dem Herausgeber an.

1. Factory-Muster

Dies ist das Factory-Muster, das viele Probleme mit ähnlichen Objekten löst kein Endobjekt haben. Identifikationsproblem

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. Konstruktormuster

Der sayName in jeder Instanz des Konstruktormusters ist anders, also wurde die Prototypkette

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()-Methode eingeführt, um zu erkennen, ob eine Eigenschaft in der Instanz oder im Prototyp vorhanden ist. true ist die Instanz und false ist der Prototyp

3. Prototypmodus

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" ——

Der Name von Person1 wird durch einen neuen Wert blockiert. Aber ob beim Zugriff auf person1.name oder person2.name der Wert normal zurückgegeben werden kann

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

Während des gesamten Prozesses der obigen Codeausführung wird entweder direkt auf das Namensattribut des Objekts zugegriffen Entweder Zugriff über Prototyp
. Daher gibt der Aufruf von „name“ in person1 immer „true“ zurück, unabhängig davon, ob die Eigenschaft in der Instanz oder im Prototyp vorhanden ist.
Durch gleichzeitige Verwendung der Methode hasOwnProperty() und des Operators in können Sie feststellen, ob die Eigenschaft im Objekt oder im
Prototyp vorhanden ist, wie unten gezeigt.
Das Namensattribut ist zuerst im Prototyp vorhanden , also gibt hasPrototypeProperty() true zurück
Die Eigenschaft existiert in der Instanz, also gibt hasPrototypeProperty() false zurück
Wenn der Prototypmodus als

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

geschrieben wird, muss das obige Format vorliegen als Konstruktor geschrieben, andernfalls zeigt der Funktionskonstruktor auf Fenster

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. Muster der Verwendung von Konstruktor und Prototyp in Kombination

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. Dynamischer Prototypmodus

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();

Dieser Code wird nur ausgeführt, wenn der Konstruktor aufgerufen wird erstmals. Danach ist der Prototyp initialisiert und es sind keine weiteren Änderungen erforderlich. Beachten Sie jedoch, dass hier am Prototyp vorgenommene Änderungen sofort in allen Fällen wirksam werden.
Bei Verwendung des dynamischen Prototypmodus können Objektliterale nicht zum Überschreiben des Prototyps verwendet werden. Wie bereits erläutert, wird die Verbindung zwischen der vorhandenen Instanz und dem neuen Prototyp unterbrochen, wenn Sie einen Prototyp überschreiben, obwohl bereits eine Instanz erstellt wurde.

Das obige ist der detaillierte Inhalt von5 js-Designmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!