Zusammenfassung zum Erstellen von Objekten in JavaScript (Superklassiker)

Was dieser Artikel Ihnen bietet, ist eine Zusammenfassung der Art und Weise, wie man Objekte in JavaScript erstellt (super klassisch). Ich hoffe, dass er für Sie hilfreich ist.

Es gibt viele Möglichkeiten, Objekte in JavaScript zu erstellen. Sie können ein einzelnes Objekt auch über den Objektkonstruktor oder das Objektliteral erstellen. Offensichtlich generieren diese beiden Methoden viel wiederholten Code und sind nicht für die Massenproduktion geeignet . Als Nächstes stellen wir Ihnen sieben sehr klassische Möglichkeiten zum Erstellen von Objekten vor. Sie haben jeweils ihre eigenen Vor- und Nachteile. (Der Inhalt stammt hauptsächlich aus „JavaScript Advanced Programming“ und bezieht sich auch auf Artikel, die von anderen geschrieben wurden)

1. Fabrikmodus

function createPerson(name, job) { 
 var o = new Object() ；
 o.name = name ；
 o.job = job ；
 o.sayName = function() { 
  console.log(this.name) 
 } 
 return o 
} 
var person1 = createPerson('Mike', 'student') 
var person2 = createPerson('X', 'engineer')

Diese Fabrik kann man als zahllos bezeichnen times Funktion, gibt jedes Mal ein Objekt zurück, das zwei Eigenschaften und eine Methode enthält.
Obwohl das Factory-Muster das Problem der Erstellung mehrerer ähnlicher Objekte löst, löst es nicht das Problem der Objektidentifizierung, das heißt, es kann den Typ eines Objekts nicht kennen.

2. Konstruktormodus

function Person(name, job) { 
 this.name = name ；
 this.job = job ；
 this.sayName = function() { 
  console.log(this.name) 
 } 
} 
var person1 = new Person('Mike', 'student') 
var person2 = new Person('X', 'engineer')

Es wird keine Objekterstellung angezeigt. Nach der Verwendung von new werden die folgenden Vorgänge automatisch ausgeführt:
①Erstellen Sie ein neues Objekt.
②Weisen Sie den Bereich des Konstruktors dem neuen Objekt zu (damit dieser auf das neue Objekt zeigt). >④ Geben Sie das neue Objekt zurück.
Nachteile: Jede Methode muss auf jeder Instanz neu erstellt werden.
Es besteht eigentlich keine Notwendigkeit, zwei Funktionsinstanzen zu erstellen, die dieselbe Aufgabe erfüllen. Darüber hinaus ist es bei diesem Objekt nicht erforderlich, die Funktion vor der Ausführung des Codes an ein bestimmtes Objekt zu binden. Es kann in dieser Form definiert werden:

function Person( name, age, job ){
    this.name = name;
    this.age = age;
    this.job = job;

    this.sayName = sayName;
}

function sayName(){
    alert( this.name );
}

Dies löst das Problem, dass zwei Funktionen dasselbe tun, es entsteht jedoch ein neues Problem: Im globalen Bereich definierte Funktionen können tatsächlich nur von einem bestimmten Objekt aufgerufen werden, wodurch der globale Bereich Die Domäne ist ein bisschen einer Fehlbezeichnung. Und was noch wichtiger ist: Wenn das Objekt viele Methoden definieren muss, müssen viele globale Funktionen definiert werden. Auf diese Weise hat unser benutzerdefinierter Referenztyp überhaupt keine Kapselung.

Diese Probleme können durch die Verwendung des Prototypenmodus gelöst werden.

function Person() { 
} 
Person.prototype.name = 'Mike' 
Person.prototype.job = 'student' 
Person.prototype.sayName = function() { 
 console.log(this.name) 
} 
var person1 = new Person()

Immer wenn eine neue Funktion erstellt wird, wird ein Prototypattribut für die Funktion gemäß einem bestimmten Regelsatz erstellt.
Standardmäßig erhalten alle
Prototyp
-Attribute automatisch ein Konstruktor (Konstruktor)-Attribut, das einen Zeiger auf die Funktion enthält, in der sich das Prototyp-Attribut befindet . Zeiger. Jedes Mal, wenn der Code eine Eigenschaft eines Objekts liest, wird eine Suche durchgeführt, die auf die Eigenschaft mit dem angegebenen Namen abzielt. Die Suche beginnt mit der Objektinstanz selbst. Wenn in der Instanz ein Attribut mit dem angegebenen Namen gefunden wird, wird der Wert des Attributs zurückgegeben. Wenn es nicht gefunden wird, wird das Prototypobjekt gesucht, auf das der Zeiger zeigt, und das Attribut mit dem angegebenen Namen wird im Prototypobjekt gefunden. Wenn diese Eigenschaft im Prototypobjekt gefunden wird, wird der Wert dieser Eigenschaft zurückgegeben. Obwohl über die Objektinstanz auf die im Prototyp gespeicherten Werte zugegriffen werden kann, können die Werte im Prototyp nicht über die Objektinstanz überschrieben werden.
Wenn wir der Instanz eine Eigenschaft hinzufügen und die Eigenschaft denselben Namen wie eine Eigenschaft in der Instanz hat, wird die Eigenschaft in der Instanz erstellt und die Eigenschaft maskiert diese Eigenschaft im Prototyp.
Auch wenn das Attribut auf null gesetzt ist, ist der Attributwert nur in der Instanz null.
Instanzeigenschaften können jedoch mit dem Löschoperator vollständig gelöscht werden, sodass wieder auf die Eigenschaften im Prototyp zugegriffen werden kann.
Verwenden Sie die Methode
hasOwnProperty()
, um zu erkennen, ob eine Eigenschaft in der Instanz oder im Prototyp vorhanden ist. Diese Methode gibt nur dann true zurück, wenn die angegebene Eigenschaft in der Objektinstanz vorhanden ist. ②Prototyp und in-Operator

③Einfachere Prototypensyntax

function Person(){    
}
Person.prototype = {
    name : "Mike",
    age : 29,
    job : "engineer",

    syaName : function(){
        alert( this.name );
    }
};

//Im obigen Code wird Person.prototype gleich einem neuen Objekt gesetzt, das in Form eines Objektliterals erstellt wurde. Das Endergebnis ist dasselbe, mit einer Ausnahme: Die Konstruktoreigenschaft zeigt nicht mehr auf die Person.

组合使用构造函数模式和原型模式是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点，使用此模式可以让每个实例都会有自己的一份实例属性副本，但同时又共享着对方法的引用，这样的话，即使实例属性修改引用类型的值，也不会影响其他实例的属性值了。还支持向构造函数传递参数，可谓是集两种模式的优点。

function Person(name) { 
 this.name = name 
 this.friends = ['Jack', 'Merry'] 
} 
Person.prototype.sayName = function() { 
 console.log(this.name) 
} 
var person1 = new Person() 
var person2 = new Person() 
person1.friends.push('Van') 
console.log(person1.friends) //["Jack", "Merry", "Van"] 
console.log(person2.friends) // ["Jack", "Merry"] 
console.log(person1.friends === person2.friends) //false

function Person(name, job) { 
  // 属性 
 this.name = name 
 this.job = job 
 // 方法 
 if(typeof this.sayName !== 'function') { 
  Person.prototype.sayName = function() { 
    console.log(this.name) 
  } 
 } 
} 
var person1 = new Person('Mike', 'Student') 
person1.sayName()

function Person(name, job) { 
  var o = new Object() 
 o.name = name 
 o.job = job 
 o.sayName = function() { 
  console.log(this.name) 
 } 
 return o 
} 
var person1 = new Person('Mike', 'student') 
person1.sayName()

function Person(name, job) { 
 var o = new Object() 
 o.name = name 
 o.job = job 
 o.sayName = function() { 
  console.log(name) 
 } 
 return o 
} 
var person1 = Person('Mike', 'student') 
person1.sayName()

Das obige ist der detaillierte Inhalt vonZusammenfassung zum Erstellen von Objekten in JavaScript (Superklassiker). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!