Objektorientierten JavaScript(OOJS) Tutorial mit Beispiel
James Hartmann
Was ist OOPS Konzept in JavaSkript?
Oftmals reichen Variablen oder Arrays nicht aus, um reale Situationen zu simulieren. JavaMit Skripten können Sie Objekte erstellen, die sich wie reale Objekte verhalten. Ein Student oder ein Haus können Objekte sein, die viele einzigartige Eigenschaften haben. Sie können Eigenschaften und Methoden für Ihre Objekte erstellen, um das Programmieren zu vereinfachen. Wenn Ihr Objekt ein Student ist, hat es Eigenschaften wie Vorname, Nachname, ID usw. und Methoden wie „Rang berechnen“, „Adresse ändern“ usw. Wenn Ihr Objekt ein Haus ist, hat es Eigenschaften wie Anzahl der Räume, Anstrichfarbe, Standort usw. und Methoden wie „Bereich berechnen“, „Besitzer ändern“ usw.
So erstellen Sie ein Objekt
Sie können ein Objekt wie folgt erstellen:
var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}
OR
var objName= {property1:value1, property2:value2, method1: function()
{ lines of code} };
Greifen Sie auf Objekteigenschaften und -methoden zu
Sie können wie folgt auf die Eigenschaften eines Objekts zugreifen:
objectname.propertyname;
Sie können wie folgt auf Methoden eines Objekts zugreifen:
objectname.methodname();
Probieren Sie dieses Beispiel selbst aus:
<html>
<head>
<title>Objects!!!</title>
<script type="text/javascript">
var student = new Object();
student.fName = "John";
student.lName = "Smith";
student.id = 5;
student.markE = 76;
student.markM = 99;
student.markS = 87;
student.calculateAverage = function()
{
return (student.markE + student.markM + student.markS)/3;
};
student.displayDetails = function()
{
document.write("Student Id: " + student.id + "<br />");
document.write("Name: " + student.fName + " " + student.lName + "<br />");
var avg = student.calculateAverage();
document.write("Average Marks: " + avg);
};
student.displayDetails();
</script>
</head>
<body>
</body>
</html>
OOPS-Konstruktor
Das Erstellen solcher Objekte ist jedoch nicht so sinnvoll, da Sie auch hier unterschiedliche Objekte für verschiedene Schüler erstellen müssen. Hier kommt der Objektkonstruktor ins Spiel. Der Objektkonstruktor hilft Ihnen beim Erstellen eines Objekttyps, der wiederverwendet werden kann, um den Anforderungen einzelner Instanzen gerecht zu werden.
Probieren Sie dieses Beispiel selbst aus:
<html>
<head>
<script type="text/javascript">
function Student(first, last, id, english, maths, science)
{
this.fName = first;
this.lName = last;
this.id = id;
this.markE = english;
this.markM = maths;
this.markS = science;
this.calculateAverage = function()
{
return (this.markE + this.markM + this.markS)/3;
}
this.displayDetails = function()
{
document.write("Student Id: " + this.id + "<br />");
document.write("Name: " + this.fName + " " + this.lName + "<br />");
var avg = this.calculateAverage();
document.write("Average Marks: " + avg + "<br /><br />");
}
}
var st1 = new Student("John", "Smith", 15, 85, 79, 90);
var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
st1.displayDetails();
st2.displayDetails();
st3.displayDetails();
st4.displayDetails();
</script>
</head>
<body>
</body>
</html>
Durchlaufen Sie die Eigenschaften eines Objekts
Syntax:
for (variablename in objectname)
{
lines of code to be executed
}
Das für/in a Schleife wird normalerweise verwendet, um die Eigenschaften eines Objekts zu durchlaufen. Sie können einen beliebigen Namen dafür vergeben Variable, aber der Name des Objekts sollte derselbe sein wie der eines bereits vorhandenen Objekts, das Sie durchlaufen müssen.
Probieren Sie dieses Beispiel selbst aus:
<html>
<head>
<script type="text/javascript">
var employee={first:"John", last:"Doe", department:"Accounts"};
var details = "";
document.write("<b>Using for/in loops </b><br />");
for (var x in employee)
{
details = x + ": " + employee[x];
document.write(details + "<br />");
}
</script>
</head>
<body>
</body>
</html>
