Object georiënteerd JavaScript(OOJS) Tutorial met voorbeeld
James Hartman
Waar zit OOPS-concept in JavaScript?
Vaak zijn variabelen of arrays niet voldoende om situaties uit het echte leven te simuleren. JavaMet scripts kunt u objecten maken die zich gedragen als objecten in het echte leven. Een student of een huis kan een object zijn met veel unieke eigen kenmerken. U kunt eigenschappen en methoden voor uw objecten maken om programmeren eenvoudiger te maken. Als uw object een student is, heeft het eigenschappen zoals voornaam, achternaam, id etc. en methoden zoals calculateRank, changeAddress etc. Als uw object een huis is, heeft het eigenschappen zoals een aantal kamers, verfkleur, locatie etc. en methoden zoals calculateArea, changeOwner etc.
Een object maken
U kunt een object als volgt maken:
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} };
Toegang tot objecteigenschappen en -methoden
U kunt als volgt toegang krijgen tot de eigenschappen van een object:
objectname.propertyname;
U kunt als volgt toegang krijgen tot methoden van een object:
objectname.methodname();
Probeer dit voorbeeld zelf:
<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-constructeur
Maar het maken van dit soort objecten is niet zo handig, omdat je ook hier verschillende objecten voor verschillende leerlingen zult moeten maken. Hier komt de objectconstructeur in beeld. Objectconstructor helpt u bij het maken van een objecttype dat kan worden hergebruikt om aan de behoeften van individuele exemplaren te voldoen.
Probeer dit voorbeeld zelf:
<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>
Loop door de eigenschappen van een object
Syntax:
for (variablename in objectname)
{
lines of code to be executed
}
De voor/in een lus wordt meestal gebruikt om de eigenschappen van een object te doorlopen. Je kunt elke naam voor de variabele, maar de naam van het object moet dezelfde zijn als die van een reeds bestaand object waar u doorheen moet lopen.
Probeer dit voorbeeld zelf:
<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>
