7 klassische Möglichkeiten zum Erstellen von Objekten in JavaScript (Zusammenfassung)

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Es gibt viele Möglichkeiten, Objekte in JavaScript zu erstellen. Sie können ein einzelnes Objekt auch über den Objektkonstruktor oder ein Objektliteral erstellen Vervielfältigung. Der Code ist 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 verweist auch auf von anderen geschriebene Artikel)

1. Factory-Modus

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')

Sie können diese Factory-Funktion unzählige Male aufrufen und jedes Mal wird ein zurückgegeben Funktion, die zwei Objekte mit 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 Objekterkennung, 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')

Nach der Verwendung von new werden die folgenden Vorgänge automatisch ausgeführt:

②Construct The Der Umfang der Funktion wird dem neuen Objekt zugewiesen (dies zeigt also auf das neue Objekt);

③ Führen Sie den Code im Konstruktor aus (fügen Sie Attribute zu diesem neuen Objekt hinzu);

④ Geben Sie das neue Objekt zurück.

Nachteile: Jede Methode muss auf jeder Instanz neu erstellt werden.

Es ist wirklich nicht notwendig, zwei Funktionsinstanzen zu erstellen, um dieselbe Aufgabe auszuführen. 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 );
}

Auf diese Weise kann die Definition der Funktion sayName() übertragen werden der Konstruktor extern. Im Konstruktor setzen wir die Eigenschaft sayName auf die globale Funktion sayName. Da sayName in diesem Fall einen Zeiger auf eine Funktion enthält, können die Objekte person1 und person2 dieselbe Funktion sayName() verwenden, die im globalen Bereich definiert ist.

Damit wird das Problem gelöst, dass zwei Funktionen dasselbe tun, aber es entsteht ein neues Problem: Im globalen Bereich definierte Funktionen können tatsächlich nur von einem bestimmten Objekt aufgerufen werden, was den globalen Bereich seines Namens etwas unwürdig macht. 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.

3. Prototyp-Modus

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

Fügen Sie Informationen direkt zum Prototypobjekt hinzu. Der Vorteil der Verwendung eines Prototyps besteht darin, dass alle Instanzobjekte die darin enthaltenen Eigenschaften und Methoden gemeinsam nutzen können. Es ist nicht erforderlich, Objektinstanzinformationen im Konstruktor zu definieren, sondern diese Informationen können direkt zum Prototypobjekt hinzugefügt werden.

①Prototypen verstehen

Immer wenn eine neue Funktion erstellt wird, wird gemäß einem bestimmten Regelsatz ein Prototypattribut für die Funktion erstellt.

Standardmäßig erhalten alle Prototypattribute automatisch ein Konstruktorattribut, das einen Zeiger auf die Funktion enthält, in der sich das Prototypattribut befindet.

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 ein Attribut mit dem angegebenen Namen in der Instanz gefunden wird, wird der Wert des Attributs zurückgegeben. Wenn es nicht gefunden wird, wird das Prototypobjekt durchsucht, auf das der Zeiger zeigt, und das Attribut mit dem angegebenen Namen wird im Prototypobjekt gesucht. 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 in der Instanz null.

Allerdings können Instanzeigenschaften mit dem Löschoperator vollständig gelöscht werden, sodass Sie erneut auf Eigenschaften im Prototyp zugreifen können.

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

Der In-Operator gibt „true“ zurück, wenn über das Objekt auf eine bestimmte Eigenschaft zugegriffen werden kann, unabhängig davon, ob die Eigenschaft in der Instanz oder im Prototyp vorhanden ist.

③Einfachere Prototyp-Syntax

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 als Objektliteral 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()

只有在sayName方法不存在的时候，才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。此后原型已经完成初始化，不需要在做什么修改了,这里对原型所做的修改，能够立即在所有实例中得到反映。

其次，if语句检查的可以是初始化之后应该存在的任何属性或方法，所以不必用一大堆的if语句检查每一个属性和方法，只要检查一个就行。

六、寄生构造函数模式

这种模式的基本思想就是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新建的对象

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

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样。

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。

七、稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)，或防止数据被其他应用程序改动时使用。

稳妥构造函数模式和寄生模式类似，有两点不同:1.是创建对象的实例方法不引用this；2.不使用new操作符调用构造函数

function Person(name, job) { 
 var o = new Object();
 o.name = name;
 o.job = job;
 o.sayName = function() { 
  console.log(name) //注意这里没有了"this"；
 } 
 return o 
} 
var person1 = Person('Mike', 'student') 
person1.sayName();

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义

更多编程相关知识，请访问：编程学习！！

Das obige ist der detaillierte Inhalt von7 klassische Möglichkeiten zum Erstellen von Objekten in JavaScript (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!