เชิงวัตถุ Javaบทช่วยสอนเกี่ยวกับสคริปต์ (OOJS) พร้อมตัวอย่าง

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

OOPS Concept คืออะไร Javaสคริปต์?

หลายครั้งที่ตัวแปรหรืออาร์เรย์ไม่เพียงพอที่จะจำลองสถานการณ์ในชีวิตจริง Javaสคริปต์ช่วยให้คุณสามารถสร้างวัตถุที่ทำหน้าที่เหมือนวัตถุในชีวิตจริง นักเรียนหรือบ้านสามารถเป็นวัตถุที่มีลักษณะเฉพาะของตัวเองได้หลายอย่าง คุณสามารถสร้างคุณสมบัติและวิธีการให้กับวัตถุของคุณเพื่อให้การเขียนโปรแกรมง่ายขึ้น หากวัตถุของคุณเป็นนักเรียน วัตถุนั้นจะมีคุณสมบัติ เช่น ชื่อ นามสกุล รหัสประจำตัว เป็นต้น และมีวิธีการ เช่น calculateRank, changeAddress เป็นต้น หากวัตถุของคุณเป็นบ้าน วัตถุนั้นจะมีคุณสมบัติ เช่น จำนวนห้อง สีทาบ้าน ตำแหน่งที่ตั้ง เป็นต้น และมีวิธีการ เช่น calculateArea, changeOwner เป็นต้น

วิธีการสร้างวัตถุ

คุณสามารถสร้างวัตถุเช่นนี้:

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

เข้าถึงคุณสมบัติและวิธีการของวัตถุ

คุณสามารถเข้าถึงคุณสมบัติของวัตถุดังนี้:

objectname.propertyname;

คุณสามารถเข้าถึงวิธีการของวัตถุดังนี้:

objectname.methodname();

ลองตัวอย่างนี้ด้วยตัวเอง:

<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

แต่การสร้างวัตถุประเภทนี้ไม่ได้มีประโยชน์มากนัก เนื่องจากคุณจะต้องสร้างวัตถุที่แตกต่างกันสำหรับนักเรียนที่แตกต่างกันในที่นี้ด้วย มาที่นี่ตัวสร้างวัตถุเข้ามาในรูปภาพ ตัวสร้างวัตถุช่วยให้คุณสร้างประเภทวัตถุที่สามารถนำมาใช้ซ้ำได้เพื่อตอบสนองความต้องการของแต่ละอินสแตนซ์

ลองตัวอย่างนี้ด้วยตัวเอง:

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

วนซ้ำคุณสมบัติของวัตถุ

ไวยากรณ์:

for (variablename in objectname)

{

lines of code to be executed

}

สำหรับ/ใน ห่วง มักจะใช้เพื่อวนซ้ำคุณสมบัติของวัตถุ คุณสามารถตั้งชื่อให้กับ ตัวแปรแต่ชื่อของวัตถุควรเหมือนกับชื่อของวัตถุที่มีอยู่แล้วซึ่งคุณต้องวนซ้ำ

ลองตัวอย่างนี้ด้วยตัวเอง:

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

สรุปโพสต์นี้ด้วย: