Objektorienteret JavaScript(OOJS) vejledning med eksempel

Af: James Hartman James Hartman
Hours Opdateret

Hvad er OOPS Concept i JavaManuskript?

Mange gange er variabler eller arrays ikke tilstrækkelige til at simulere virkelige situationer. JavaScript giver dig mulighed for at skabe objekter, der fungerer som objekter fra det virkelige liv. En studerende eller et hjem kan være et objekt, der har mange unikke egenskaber. Du kan oprette egenskaber og metoder til dine objekter for at gøre programmeringen nemmere. Hvis dit objekt er en studerende, vil det have egenskaber som fornavn, efternavn, id osv. og metoder som calculateRank, changeAddress osv. Hvis dit objekt er et hjem, vil det have egenskaber som et antal rum, malingsfarve, placering osv. og metoder som calculateArea, changeOwner osv.

Sådan opretter du et objekt

Du kan oprette et objekt som dette:

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} };

Adgang til objektegenskaber og -metoder

Du kan få adgang til egenskaber for et objekt som dette:

objectname.propertyname;

Du kan få adgang til metoder for et objekt som dette:

objectname.methodname();

Prøv selv dette eksempel:

<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 at skabe genstande af denne art er ikke så nyttigt, fordi du også her skal lave forskellige objekter til forskellige elever. Her kommer objektkonstruktør ind i billedet. Objektkonstruktør hjælper dig med at oprette en objekttype, som kan genbruges for at imødekomme behovet for den enkelte instans.

Prøv selv dette eksempel:

<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 gennem et objekts egenskaber

Syntaks:

for (variablename in objectname)

{

lines of code to be executed

}

For/i en loop bruges normalt til at sløjfe gennem et objekts egenskaber. Du kan give et hvilket som helst navn til variabel, men navnet på objektet skal være det samme som navnet på et allerede eksisterende objekt, som du skal gå igennem.

Prøv selv dette eksempel:

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