Object Definition

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

- يمكن اعتبار كل مكون او عنصر من عناصر ك Object

- قبل البدء في هذه الوحدة ، يجب أن يكون لديك بعض المعرفة بـ HTML و CSS.

Booleans يمكن ان تكون Object اذا تم الحاقها بكلمة new عند تعريفها
Numbers يمكن ان تكون Object اذا تم الحاقها بكلمة new عند تعريفها
Strings يمكن ان تكون Object اذا تم الحاقها بكلمة new عند تعريفها
تعتبر التواريخ أيضا عبارة عن object
تعتبر العمليات الرياضية Maths عبارة عن Object
Regular Expressions هي ايضا عبارة عن Object
arrays تعتبر ايضا objects
functions تعتبر ايضا objects

- تعتبر جميع عناصر لغة الجافاسكريبت عبارة عن objects ما عدا ال primitives

Objects are Variables

يمكن ان تحتوي المتغيرات في لغة الجافاسكريب علي قيمة واحده فقط

HTML

let person = "Mohamed saleh";

جرّب بنفسك

يمكن ايضا تخزين اكثر من قيمة بداخل المتغيرات وفي هذه الحالة تسمي ب Objects وتتكون عناصر ال Object من قيمتين وهما (name : value )

HTML

let person = {
  firstName : "Mohamed",
  lastName  : "saleh",
  age       : 25,
  eyeColor  : "blue"
};

جرّب بنفسك

من الشائع استخدام كلمة const قبل اسم ال object وهي تستخدم في تحديد عدم امكانية تغيير القيم الخاصة بهذا ال object

HTML

let person = {
  firstName : "Mohamed",
  lastName  : "saleh",
  age       : 25,
  eyeColor  : "blue"
};

جرّب بنفسك

Object Properties

تسمي القيم التي لها اسم مميز في ال Objects ب Properties

Property	Value
firstName	Mohamed
lastName	saleh
age	25
eyeColor	blue

طريقة كتابة ال Objects عن طريق الزوج الذي يتكون من اسم العنصر والقيمة الخاصة به مشابه الي حد كبير ل

Associative arrays في لغة PHP
Dictionaries في لغة Python
Hash tables في لغة C
Hash maps في لغة Java
Hashes في لغة Ruby و Perl

Object Methods

Methods هي الأفعال التي يتم تنفيذها علي ال Objects

ال Object properties يمكن ان تكون primitive values او objects او functions

Property	Value
firstName	Mohamed
lastName	saleh
age	25
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

Creating a JavaScript Object

يمكننا باستخدام لغة جافاسكريبت انشاء ال objects بكل سهوله باستخدام عدة طرق وهم

object literal
كلمة new
انشاء object constructor وبعد ذلك انشاء objects منه
باستخدام "object.create( ) "

Using an Object Literal

تعتبر هذه اسهل طريقة لانشاء ال objects في لغة java script وخلالها نقوم بأنشاء العنصر وتعريفه في جمله واحده

- خلاله نقوم بأضافة العناصر في شكل زوج يتكون من الاسم والقيمة الخاصة بكل عنصر ويتم الفصل بين كل عنصر بعلامة " . " ويتم وضع هذه العناصر بداخل اقواس متعرجة curly brackets

Example

HTML

const person = {firstName:"Mahmoud", lastName:"adel", age:50,eyeColor:"blue"};

جرّب بنفسك

عند انشاء العناصر الخاصة ب object معين فأن المسافات الزائدة والاسطر الفارغة يتم تجاهلها ولا تؤثر علي شئ

HTML

const person = {
  firstName: "Mahamoud",
  lastName: "Adel",
  age: 50,
  eyeColor: "blue"
};

جرّب بنفسك

في هذا المثال نقوم بأنشاء object فارغ ثم بعد ذلك نقوم بأضافة العناصر اليه

HTML

const person = {};
person.firstName = "ahmed";
person.lastName = "hossam";
person.age = 50;
person.eyeColor = "blue";

جرّب بنفسك

Using the JavaScript Keyword new

نستطيع انشاء objects في لغة الجافا سكريبت عن طريق استخدام الدالة ( )object مع الكلمة new كما في المثال التالي

Example

HTML

const person =new Object();
person.firstName = "ahmed";
person.lastName = "hossam";
person.age = 50;
person.eyeColor = "blue";

جرّب بنفسك

JavaScript Objects are Mutable

ال Objects هي من النوع Mutable اي انها يمكن تغيير قيمتها ويتم الوصول اليها عن طريق العنوان الخاص بها وليس القيمة

HTML

const x = person;  // Will not create a copy of person.

ال object التالي "X" لا يمثل نسخة من ال object التالي "person " وانما كليهما نفس العنصر أي انه أي تغيير يحدث في احد العنصرين سوف يؤثر علي الاخر بنفس قيمة هذا التغيير

HTML

const person = {
  firstName:"Ahmed ",
  lastName:"adel",
  age:50, eyeColor:"blue"
}

const x = person;
x.age = 10;      // Will change both x.age and person.age

جرّب بنفسك

Object Naming Rules

HTML

Object Literal

HTML

Object Definition