Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Code-Erklärung zur Verwendung primitiver Methoden und Factory-Methoden zum Erstellen von JavaScript-Objektinstanzen

伊谢尔伦
Freigeben: 2017-07-24 15:28:05
Original
1287 Leute haben es durchsucht

In JS gibt es kein Klassenkonzept, aber wir können die grammatikalischen Funktionen von JS verwenden, um Objekte mit der Klassenidee zu erstellen.

Ursprüngliche Methode

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>
Nach dem Login kopieren

Die obige Methode generiert ein Objekt über das neue Schlüsselwort und fügt dann Eigenschaften und Methoden entsprechend den Merkmalen von JS als dynamischer Sprache hinzu, um ein Objekt zu erstellen. Dies ist das Objekt, das die Methode aufruft. Das Problem bei diesem Ansatz besteht darin, dass Sie den Code mehrmals wiederholen müssen, wenn Sie Objekte mehrmals erstellen müssen, was der Wiederverwendung von Code nicht förderlich ist.

Factory-Methode

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

obj1.showName(); //Koji 
obj2.showAge(); //21 

</script>
Nach dem Login kopieren

Diese Methode verbessert die Code-Wiederverwendungsrate, und Sie können auch die Factory-Methode ändern und Parameter für die Zuweisung übergeben.

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>
Nach dem Login kopieren

Obwohl die obige Methode die Code-Wiederverwendungsrate verbessern kann, weist sie im Vergleich zum Konzept der objektorientierten Klassen einen großen Fehler auf. Bei der Objektorientierung wird betont, dass die Eigenschaften von Objekten privat sind, während die Methoden von Objekten gemeinsam genutzt werden. Wenn die obige Factory-Methode Objekte erstellt, muss sie für jedes Objekt eine eigene private Methode erstellen. Gleichzeitig verschwendet die Erstellung logisch identischer Methoden für jedes Objekt Speicher. Die Verbesserungen sind wie folgt

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script></span>
Nach dem Login kopieren

Das Obige löst das private Problem, dass verschiedene Objekte Funktionsobjekte halten, indem zwei Funktionsobjekte definiert werden. Jetzt enthalten alle Objektmethoden Verweise auf die beiden oben genannten Funktionen.

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung zur Verwendung primitiver Methoden und Factory-Methoden zum Erstellen von JavaScript-Objektinstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!