برنامج تعليمي لجافا سكريبت (OOJS) موجه للكائنات مع مثال

ما هو مفهوم OOPS في جافا سكريبت؟

في كثير من الأحيان، لا تكون المتغيرات أو المصفوفات كافية لمحاكاة مواقف الحياة الواقعية. تتيح لك JavaScript إنشاء كائنات تعمل ككائنات حقيقية. يمكن أن يكون الطالب أو المنزل شيئًا له العديد من الخصائص الفريدة الخاصة به. يمكنك إنشاء خصائص وأساليب للكائنات الخاصة بك لتسهيل البرمجة. إذا كان الكائن الخاص بك طالبًا، فسيكون له خصائص مثل الاسم الأول واسم العائلة والمعرف وما إلى ذلك وطرق مثل الحسابlateRank، وchangeAddress، وما إلى ذلك. إذا كان الكائن الخاص بك عبارة عن منزل، فسيكون له خصائص مثل عدد الغرف ولون الطلاء والموقع وما إلى ذلك وطرق مثل countArea و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>

عفوا منشئ

لكن إنشاء كائنات من هذا النوع ليس مفيدًا لأنه هنا أيضًا، سيتعين عليك إنشاء كائنات مختلفة لطلاب مختلفين. هنا يأتي منشئ الكائن في الصورة. يساعدك مُنشئ الكائنات على إنشاء نوع كائن يمكن إعادة استخدامه لتلبية احتياجات المثيل الفردي.

جرب هذا المثال بنفسك:

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