Vorwort
Es gibt viele Möglichkeiten, Objekte zu erstellen mit JavascriptJetzt Lassen Sie uns vier der Methoden auflisten und die Vor- und Nachteile jeder Methode auflisten, damit jeder einen Blick darauf werfen kann.
Fabrikmuster
function createPerson(name, age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj; //一定要返回，否则打印undefined:undefined
}
var person1 = new createPerson('Young',18);
console.log(person1.name + ':' + person1.age);Vorteile: Fabrikmuster können das Problem der Erstellung mehrerer ähnlicher Muster lösen Objekte
Nachteile: Löst nicht das Problem der Objekterkennung (wie man den Typ eines Objekts bestimmt)
KonstruktorMuster
function Person(name,age){
this.name = name;
this.age = age;
}
var person1 = new Person('Young',18);
console.log(person1.name + ':' + person1.age);Bevor wir über die Vor- und Nachteile sprechen, erzählen wir zunächst eine kleine Geschichte über sich selbst
Verwenden Sie den Konstruktor als Funktion
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
return this.name;
}
}
//当做构造函数使用
var person1 = new Person('Young', 18);
person1.sayName();
console.log(person1.name + ':' + person1.age);
//当做普通函数调用
Person('Wind', 18);
console.log(window.sayName());
//在另一个作用域中调用
var obj = new Object();
Person.call(obj, 'bird', 100);
console.log(obj.sayName());Vor- und Nachteile des Konstruktors
Vorteile: kann seine Instanzen als einen bestimmten Typ identifizieren
Nachteile: Jede Methode muss auf jeder Instanz neu erstellt werden. Natürlich können Sie es auch so ändern:
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName(){
return this.name;
}
wird geändert, um die globale Funktion aufzurufen, sodass überhaupt keine Kapselung erfolgt. . . Das nächste Prototypmuster kann diesen Mangel ausgleichen
Prototypmuster
function Person(){
}
Person.prototype.name = 'Young';
Person.prototype.age = 18;
Person.prototype.sayName = function(){
return this.name;
}
var person1 = new Person();
console.log(person1.sayName());
var person2 = new Person();
console.log(person1.sayName());
alert(person1.sayName === person2.sayName);
//person1和person2访问的是同一组属性的同一个sayName()函数Obwohl über Objektinstanzen darauf zugegriffen werden kann gespeichert in Der Wert im Prototyp, aber der Wert im Prototyp kann nicht durch das Instanzobjekt überschrieben werden
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
alert(person1.sayName==person2.sayName);//trueWenn wir
person1.sayName
aufrufen, werden zwei Suchvorgänge durchgeführt Wenn dies der Fall ist, sucht der Parser zunächst nach Attributen von
sayName
.
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
delete person1.name;
console.log(person1.sayName());//Young
console.log(person2.sayName());//YoungVerwenden Sie die Methode
hasOwnPropertyType
, um zu erkennen, ob eine Eigenschaft im Prototyp oder in der Instanz vorhanden ist ist wahr, im Prototyp falsch.
Instanzattribute für Aufzählungsobjekte verwenden die
Object.keys()
-Methode
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var keys=Object.keys(Person.prototype);
console.log(keys);//["name", "age", "sayName"]Vor- und Nachteile von Prototypmustern
Vorteile: Keine Notwendigkeit, jede Methode bei jeder Instanz zu wiederholen
Nachteile: Nur wenige Leute verwenden das Prototypmuster allein. . Das Problem ist im Detail aufgeführt
function Person(){
}
Person.prototype={
constructor:Person,
name:'Young',
age:18,
friends:['Big','Pig'],
sayName:function(){
return this.name;
}
};
var p1=new Person();
var p2=new Person();
p1.friends.push('Mon');
console.log(p1.friends);//["Big", "Pig", "Mon"]
console.log(p2.friends);//["Big", "Pig", "Mon"]Das liegt genau daran, dass Instanzen im Allgemeinen ihre eigenen Attribute haben und wir sie hier in
Person.prototype
einfügen, also Mit Durch die Änderung von p1 wird die gesamte Instanz einschließlich des Prototyps geändert. Nun, wir können Konstruktormuster und Prototypmuster in Kombination verwenden.
Verwenden Sie das Konstruktormuster und das Prototypmuster in Kombination
function Person(name,age){
this.name=name;
this.age=age;
this.friends=['Big','Pig'];
}
Person.prototype={
sayName:function(){
return this.name;
}
};
var p1=new Person('Young',18);
var p2=new Person('Wind',78);
p1.friends.push('Raganya');
console.log(p1.friends);//["Big", "Pig", "Raganya"]
console.log(p2.friends);//["Big", "Pig"]
console.log(p1.friends==p2.friends);//false
console.log(p1.sayName==p2.sayName);//trueDieses Muster ist derzeit die am weitesten verbreitete und anerkannteste Methode zum Erstellen von Anpassungen. Ist ein Standardmodus, der zum Definieren von Referenztypen verwendet wird.
Zusammenfassung
Das obige ist der detaillierte Inhalt vonAnalysieren Sie die vier Möglichkeiten zum Erstellen von Objekten in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
