الكائنات JavaScript Objects

-

الكائنات Object في JavaScript متغيرات مفيدة جدا، يمكن تعريف كائن من نوع سيارة مثلا ثم إعطاء مجموعه من الخصائص لهذا الكائن مثل اللون، الموديل، رقم اللوحة ... الخ. ثم من السهولة التعامل مع هذه الخصائص للكائن 

الكائنات Objects تكتب داخل اقواس curly braces {} والخصائص تكتب داخل هذه الاقواس (اسم الخاصية وقيمه الخاصية) متبوعة بفاصله commas.

مثال . 

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Objects</h3>
<p id="Total"></p>
<script>
const Student = {firstName:"Mlak", lastName:"Hatem", age:1, eyeColor:"Green"};
document.write(Student.firstName + " is " + Student.age + " years old."+" eye color is" + Student.eyeColor);
document.write("<br>");
</script>
</body>
</html> 

النتيجة:


عرفنا متغير باسم Studen من نوع Object ثم اضفنا مجموعه من الخصائص لهذا object مثل الاسم الأول firstName ، الاسم الأخير lastName ، العمر age ولون العيون Green وبعدها طبعنا النتائج على الشاشة.

جميع الطلاب لهم نفس الخصائص (الاسم الأول، الاسم الأخير، العمر، لون العيون) ، لكن القيم مختلفة. 

Object في JavaScript هي متغيرات لكن الفرق بينها وبين المتغيرات الأخرى هو انها ممكن تحتوي على اكثر من قيمه ، مثال ذلك تعريف object للسيارة ، بحيث يمكن إضافة مجموعه من الخصائص لهذا object مثل اللون، الموديل، رقم اللوحة وغيرها...

نفس الفكرة المثال السابق عرفنا object باسم Student وداخل هذا object اضفنا مجموعه من الخصائص.

طريقة كتابة object 

Const ObjectName={PropertyName1:”PropertyValue1”, PropertyName2:”PropertyValue2”, PropertyName3:”PropertyValue3”}

عادتا ما يتم تعريف object باستخدام const 

مثال : 

    const Student = {
                        firstName:"Mlak", 
                        lastName:"Hatem", 
                        age:1, 
                        eyeColor:"Green"
                    };

لاحظ ان عرفنا نفس المثال السابق لكن بشكل وتنسيق مختلف (هذه الامر لا يعني شيء بالنسبة ل JavaScript الغرض هو فقط تنظيم الأكواد).

في الكود السابق عرفنا مجموعه من الخائص والقيم (الجدول التالي يوضح ذلك)


الخاصية Property
القيمة Value
firstName
Mlak
lastName
Hatem
Age
1
eyeColor
Green


كيفية الوصول الى Object Properties

للوصل الى Property داخل object يمكن استخدام واحده من الطريقتين:

objectName.propertyName

او 

objectName["propertyName"]

نرجع للمثال السابق ونطبق الطريقتين ونشوف النتيجة

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
 const Student = {
                    firstName:"Mlak", 
                    lastName:"Hatem", 
                    age:1, 
                    eyeColor:"Green"};
document.write(
                 Student.firstName + " is " + Student.age + " years old."+" eye color is" + Student.eyeColor
              );
document.write("<br>");
document.write(
                Student["firstName"] + " is " + Student["age"] + " years old."+" eye color is" + Student["eyeColor"]
              );
</script>
</body>
</html> 
النتيجة:

Object Methods

يمكن ان تحتوي object على methods
Methods : هي actions يمكن تنفيذها على object ، وهذه methods تخزن في الخصائص كتعريف function
شو يعني هذا الكلام.
مثال: 
نعدل على الكود السابق الى 

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
 const Student = {
                    firstName:"Mlak", 
                    lastName:"Hatem", 
                    age:1, 
                    eyeColor:"Green",
                    fullName : function() 
                    
                                {
                                   return "First Name: "+this.firstName + " Last Name " + this.lastName + " Age" + this.age  + " Eye Color" + this.eyeColor;
                                }
                           
                };
document.write(
                 Student.fullName()
              );
document.write("<br>");
</script>
</body>
</html> 

النتيجة:

نفهم شو عملنا. 
اضفنا method باسم fullName وهي عبارة عن function برجع المعلومات الكاملة عن object 
الكود:
 fullName : function() 
            {
               return "First Name: "+this.firstName + " Last Name " + this.lastName + " Age" + this.age  + " Eye Color" + this.eyeColor;
             }

استخدمنا في هذه method كلمة this والي تعني إشارة الى object  الحالي. وفي المثال this.firstName تعني قيمة الخاصية firstName من object الحالي وهو Student. ونفس الفكرة لباقي الخصائص . 
بناء عليه النتيجة ارجاع جميع الخصائص لهذا object 
مثال :

<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Events</h3>
<p id="Date"></p>
<script>
 const Student = {
                    firstName:"Mlak", 
                    lastName:"Hatem", 
                    age:1, 
                    eyeColor:"Green",
                    WelcomeMessage: function () {
                        return('Hello, World!');
                    },
                    fullName : function() 
                    
                                {
                                   return "First Name: "+this.firstName + " Last Name " + this.lastName + " Age" + this.age  + " Eye Color" + this.eyeColor;
                                }
                           
                };
document.write(
                 Student.fullName()
              );
document.write("<br>");
document.write(
                 Student.WelcomeMessage()
              );
document.write("<br>");
</script>
</body>
</html> 

النتيجة

اضفنا method ثانية لإرجاع رسالة Hello, World! من داخل object
الكود:
 WelcomeMessage: function () {
                        return('Hello, World!');
                    },
الخلاصة ممكن من خلال object إضافة function على شكل property وبالتالي تصبح method
ملاحظة :  استدعاء method من object لازم يكون باستخدام الاقواس () لارجاع القيمة المطلوبة، في حال ما تم استخدام الاقواس النتيجة بتكون تعريف function  
في المثال السابق لو عملنا استدعاء method بالشكل التالي :

document.write(
                 Student.fullName
              );
document.write("<br>");
document.write(
                 Student.WelcomeMessage
              );
document.write("<br>");
النتيجة (ارجاع المحتوي كامل):


استخدمنا في المثال السابق كلمة This شو يعني 

تستخدم هذه الكلمة للإشارة الى object الحالي ( الي تم استخدام كلمة this معو)