شبيبة تعليمي

شبيبة المنزل مقدمة شبيبة شبيبة إلى أين إخراج JS بيانات شبيبة بناء جملة JS تعليقات JS متغيرات JS JS Let شبيبة كونست مشغلي JS شبيبة الحساب احالة JS أنواع بيانات JS وظائف JS كائنات JS أحداث شبيبة سلاسل شبيبة طرق سلسلة JS بحث سلسلة JS JS String Templates أرقام شبيبة طرق عدد JS صفيفات JS طرق صفيف JS ترتيب صفيف JS تكرار صفيف JS JS Array Const تواريخ شبيبة تنسيقات التاريخ JS طرق الحصول على تاريخ JS طرق تعيين تاريخ JS شبيبة الرياضيات شبيبة عشوائية شبيبة منطقية مقارنات شبيبة شروط JS مفتاح JS JS Loop For JS Loop For In. شبيبة حلقة JS لـ Of شبيبة حلقة بينما شبيبة استراحة شبيبة تكرارات مجموعات JS خرائط شبيبة شبيبة تايبوف JS نوع التحويل شبيبة Bitwise JS RegExp أخطاء JS شبيبة النطاق رفع JS وضع JS الصارم شبيبة هذه الكلمة دالة سهم JS فئات JS شبيبة شبيبة تصحيح أخطاء JS دليل أسلوب JS أفضل ممارسات JS أخطاء JS أداء JS شبيبة الكلمات المحجوزة

إصدارات JS

إصدارات JS JS 2009 (ES5) شبيبة 2015 (ES6) شبيبة 2016 شبيبة 2017 شبيبة 2018 شبيبة آي إي / إيدج تاريخ شبيبة

كائنات JS

تعريفات الكائن خصائص الموضوع طرق الكائن عرض الكائن موصلي الكائنات منشئو الكائنات نماذج الكائن كائن تكرارات مجموعات الكائن خرائط الكائن مرجع الكائن

وظائف JS

تعريفات الوظائف معلمات الوظيفة استدعاء الوظيفة استدعاء الوظيفة تطبيق الوظيفة عمليات إغلاق الوظائف

فئات JS

مقدمة عن الفصل الوراثة الطبقية فئة ثابتة

شبيبة آسينك

عمليات الاسترجاعات JS شبيبة غير متزامن وعود شبيبة شبيبة Async / انتظار

JS HTML DOM

مقدمة DOM طرق DOM مستند DOM عناصر DOM DOM HTML نماذج DOM DOM CSS الرسوم المتحركة DOM أحداث DOM مستمع أحداث DOM التنقل في DOM عقد DOM مجموعات DOM قوائم عقدة DOM

متصفح JS BOM

نافذة JS شاشة JS موقع JS تاريخ شبيبة شبيبة ملاح تنبيه منبثق لـ JS توقيت شبيبة ملفات تعريف الارتباط JS

JS Web APIs

مقدمة واجهة برمجة تطبيقات الويب واجهة برمجة تطبيقات نماذج الويب واجهة برمجة تطبيقات سجل الويب واجهة برمجة تطبيقات تخزين الويب Web Worker API واجهة برمجة تطبيقات جلب الويب واجهة برمجة تطبيقات تحديد الموقع الجغرافي على الويب

شبيبة أجاكس

مقدمة أجاكس أجاكس XMLHttp طلب AJAX استجابة AJAX ملف AJAX XML أجاكس بي إتش بي أجاكس آسيا والمحيط الهادئ قاعدة بيانات أجاكس تطبيقات أجاكس أمثلة AJAX

شبيبة شبيبة

مقدمة JSON بناء جملة JSON JSON مقابل XML أنواع بيانات JSON تحليل JSON تنسيق JSON كائنات JSON صفائف JSON خادم JSON JSON PHP JSON HTML جسون جسونب

JS مقابل jQuery

محددات jQuery jQuery HTML jQuery CSS jQuery DOM

شبيبة الرسومات

شبيبة الرسومات قماش شبيبة شبيبة بلوتلي JS Chart.js مخطط جوجل JS شبيبة D3.js

أمثلة JS

أمثلة JS JS HTML DOM إدخال JS HTML كائنات JS HTML أحداث HTML متصفح JS محرر JS تمارين شبيبة شبيبة مسابقة شهادة JS

مراجع JS

كائنات جافا سكريبت كائنات HTML DOM


JavaScript Object Constructors


مثال

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

من الممارسات الجيدة تسمية وظائف المُنشئ بحرف أول كبير.


أنواع الكائنات (المخططات) (الفئات)

الأمثلة من الفصول السابقة محدودة. هم فقط يخلقون أشياء واحدة.

نحتاج أحيانًا إلى " مخطط " لإنشاء العديد من الكائنات من "النوع" نفسه.

طريقة إنشاء "نوع الكائن" ، هي استخدام دالة مُنشئ الكائن .

في المثال أعلاه ، function Person()هي دالة منشئ الكائن.

يتم إنشاء كائنات من نفس النوع عن طريق استدعاء دالة المُنشئ newبالكلمة الأساسية:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


هذه الكلمة _

في JavaScript ، الشيء المسمى thisهو الكائن الذي "يمتلك" الشفرة.

قيمة this، عند استخدامها في كائن ، هو الكائن نفسه.

في دالة منشئ thisليس لها قيمة. إنه بديل للكائن الجديد. thisستصبح قيمة الكائن الجديد عند إنشاء كائن جديد.

لاحظ أن thisهذا ليس متغيرًا. إنها كلمة رئيسية. لا يمكنك تغيير قيمة this.


إضافة خاصية إلى كائن

من السهل إضافة خاصية جديدة إلى كائن موجود:

مثال

myFather.nationality = "English";

ستتم إضافة الخاصية إلى myFather. ليس لأمي. (لا يعترض أي شخص آخر).


إضافة طريقة إلى كائن

من السهل إضافة طريقة جديدة إلى كائن موجود:

مثال

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

ستتم إضافة الطريقة إلى myFather. ليس لأمي. (لا يعترض أي شخص آخر).


إضافة عقار لمنشئ

لا يمكنك إضافة خاصية جديدة إلى مُنشئ الكائن بالطريقة نفسها التي تضيف بها خاصية جديدة إلى كائن موجود:

مثال

Person.nationality = "English";

لإضافة خاصية جديدة إلى المُنشئ ، يجب عليك إضافتها إلى دالة المُنشئ:

مثال

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

بهذه الطريقة يمكن أن تحتوي خصائص الكائن على قيم افتراضية.


إضافة أسلوب لمنشئ

يمكن أن تحدد دالة المُنشئ أيضًا الطرق:

مثال

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

لا يمكنك إضافة طريقة جديدة إلى مُنشئ كائن بنفس الطريقة التي تضيف بها طريقة جديدة إلى كائن موجود.

إضافة طرق إلى مُنشئ الكائن يجب أن تتم داخل دالة المُنشئ:

مثال

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

تعيّن الدالة changeName () قيمة الاسم لخاصية LastName للشخص.

الآن يمكنك أن تجرب:

myMother.changeName("Doe");

تعرف JavaScript الشخص الذي تتحدث عنه من خلال "استبدال" هذا بـ myMother .


منشئو JavaScript المدمجون

تحتوي JavaScript على مُنشئات مضمنة للكائنات الأصلية:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

الكائن Math()ليس في القائمة. Mathهو كائن عالمي. لا يمكن newاستخدام الكلمة الأساسية على Math.


هل كنت تعلم؟

كما ترى أعلاه ، تحتوي JavaScript على إصدارات كائن لأنواع البيانات الأولية String، Numberو Boolean. لكن لا يوجد سبب لإنشاء كائنات معقدة. القيم الأولية أسرع بكثير:

استخدم سلسلة حرفية ""بدلاً من new String().

استخدم الأرقام الحرفية 50بدلاً من new Number().

استخدم القيم المنطقية true / falseبدلاً من new Boolean().

استخدم الكائن الحرفي {}بدلاً من new Object().

استخدم المصفوفة الحرفية []بدلاً من new Array().

استخدم النمط الحرفي /()/بدلاً من new RegExp().

استخدم تعبيرات الوظائف () {}بدلاً من new Function().

مثال

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

كائنات السلسلة

عادةً ، يتم إنشاء السلاسل كأساسيات: firstName = "John"

ولكن يمكن أيضًا إنشاء السلاسل ككائنات باستخدام newالكلمة الأساسية:
firstName = new String("John")

تعرف على سبب عدم إنشاء السلاسل ككائن في الفصل JS Strings .


عدد الكائنات

عادة ، يتم إنشاء الأرقام كأوليات: x = 30

ولكن يمكن أيضًا إنشاء الأرقام ككائنات باستخدام newالكلمة الأساسية:
x = new Number(30)

تعرف على سبب عدم إنشاء الأرقام كعنصر في الفصل JS Numbers .


كائنات منطقية

عادةً ، يتم إنشاء القيم المنطقية كأساسيات: x = false

ولكن يمكن أيضًا إنشاء القيم المنطقية ككائنات باستخدام newالكلمة الأساسية:
x = new Boolean(false)

تعرف على سبب عدم إنشاء القيم المنطقية ككائن في الفصل JS Booleans .