Analysieren Sie die vier Möglichkeiten zum Erstellen von Objekten in Javascript

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);//true

Wenn 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());//Young

Verwenden 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);//true

Dieses 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!