Objektorienterad JavaScript(OOJS) handledning med exempel
James Hartman
Vad är OOPS Concept i JavaManus?
Många gånger är variabler eller arrayer inte tillräckliga för att simulera verkliga situationer. JavaScript låter dig skapa objekt som fungerar som objekt i verkligheten. En student eller ett hem kan vara ett föremål som har många unika egenskaper. Du kan skapa egenskaper och metoder för dina objekt för att göra programmeringen enklare. Om ditt objekt är en student kommer det att ha egenskaper som förnamn, efternamn, id etc och metoder som calculateRank, changeAddress etc. Om ditt objekt är ett hem kommer det att ha egenskaper som ett antal rum, färgfärg, plats etc. och metoder som calculateArea, changeOwner etc.
Hur man skapar ett objekt
Du kan skapa ett objekt så här:
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} };
Åtkomstobjektegenskaper och metoder
Du kan komma åt egenskaper för ett objekt så här:
objectname.propertyname;
Du kan komma åt metoder för ett objekt så här:
objectname.methodname();
Prova själv detta exempel:
<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 konstruktör
Men att skapa objekt av det här slaget är inte så användbart eftersom du också här måste skapa olika objekt för olika elever. Här kommer objektkonstruktören in i bilden. Objektkonstruktorn hjälper dig att skapa en objekttyp som kan återanvändas för att möta behoven hos en individuell instans.
Prova själv detta exempel:
<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>
Slinga genom ett objekts egenskaper
Syntax:
for (variablename in objectname)
{
lines of code to be executed
}
Den för/i en slinga används vanligtvis för att gå igenom egenskaperna hos ett objekt. Du kan ge vilket namn som helst för variabel, men namnet på objektet bör vara detsamma som på ett redan existerande objekt som du måste gå igenom.
Prova själv detta exempel:
<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>
