Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

ما هو الجديد في JavaScript 1.8.5

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by ansgaradh (you can also view the original English article)

إنه وقت رائع لجافا سكريبت. ليس فقط أنها أصبحت لغة أكثر احترامًا ، ولكنها أيضًا تنمو بسرعة فائقة - سواء من حيث الشعبية أو الميزات. مع بدء المزيد من المتصفحات في تطبيق ميزات معيار الإصدار 5 من ECMAScript ، تصبح جافا سكريبت منصة أكثر قوة يمكنك تطويرها. في هذا البرنامج التعليمي ، سنتحدث عن الطرق الجديدة المتاحة لك.


ما هو ECMAScript 5؟

ECMAScript هو الاسم الرسمي لما نسميه جميعًا JavaScript. هذا لا يعني أننا على خطأ ؛ إن اسم "جافا سكريبت" هو علامة تجارية لشركة أوراكل ؛ لذلك تستخدم شركة Ecma International (وهي في الأصل رابطة مصنعي الكمبيوتر الأوروبيين - ومن هنا ECMA) مصطلح "ECMAScript" للإشارة إلى معيار JavaScript. أحدث إصدار من هذا المعيار هو الإصدار الخامس ، وتمت الموافقة عليه منذ أكثر من عام (في 3 ديسمبر 2009). وهو يشمل مجموعة كبيرة من الإضافات الرائعة ، والعديد من تلك الإضافات بدأت تظهر في المتصفحات. تسمى تطبيقات ECMAScript 5 بـ JavaScript 1.8.5.

في هذا البرنامج التعليمي ، سننظر في وظائف JavaScript 1.8.5 المتاحة لنا في إصدارات Beta Firefox 4. سيسعدك اكتشاف أن معظم الإصدارات الأخيرة من المتصفحات الأخرى تحتوي على هذه الإصدارات أيضًا. . . باستثناء واحد. هذه المرة ، أوبرا ، كما شملت IE9 العديد من هذه.


وظيفة 1: Object.create

هذه الطريقة مهمة جدا. انها حقا تنظف الميراث نموذجي. في السابق (في النسخة الثالثة من ECMAScript) ، لإنشاء كائن وتعيين النموذج الأولي الخاص به ، يمكنك فعل شيء كالتالي:

هل أنا الوحيد الذي يعتقد أنه يبدو غريبا أن يكون النموذج الأولي خارج وظيفة المنشئ؟والوراثة تصبح أكثر فوضى. مع Object.create ، تصبح الأمور أسهل كثيرًا. ما ورد أعلاه يمكن ترميزها على النحو التالي:

ما يحدث هنا هو: أنا استدعاء object.create ، تمرير كائن لاستخدامه كنموذج الكائن الجديد الذي Object.create هو العودة. عند استخدام Object.create ، لا داعي للقلق بشأن تعريف النموذج الأولي بشكل منفصل. في الواقع ، لدي قدر أكبر من المرونة لاتخاذ قرار بشأن كيفية إنشاء الكائنات وراثيتها. على سبيل المثال ، لا يمكنني وضع الصفيف المصبوغ على النموذج الأولي ، لأن الصفيف هو قيمة مرجعية ، لذلك فإن كل كائن تم إنشاؤه من الكلب سيشارك هذا الصفيف. لقد قررت التحقق من ذلك قبل استخدامه هنا ، ولكن إذا كنت أرغب في التفافObject.create (الكلب) في وظيفة make_dog ، يمكنني تعيينه هناك بنفس السهولة.

هذا ما هو عظيم حول Object.create . يمكنك اختيار كيفية القيام بذلك.

هناك معلمة ثانية تأخذها Object.create ؛ انها كائن واصف خصائص. إنه أمر معقد بعض الشيء ، ولكنه أيضًا جزء من الوظيفة التالية التي سننظر إليها ، لذا دعنا نتحقق من ذلك.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+

وظيفة 2: Object.defineProperty

إذا كان لديك كائن تريد تعريف خاصية عليه ، فربما ستفعله بهذه الطريقة:

هذا لا يزال يعمل بشكل جيد في ES5 ، ولكن إذا كنت تريد بعض التحكم أكثر دقة ، يمكنك الحصول عليه مع Object.defineProperty . المعلمة الأولى هي الكائن الذي تقوم بتعيين الخاصية عليه. المعلمة الثانية هي اسم الخاصية ، كسلسلة. الخاصية الأخيرة هي كائن واصف. اليك كيف يعمل هذا. إنه (من الواضح) كائن ويمكن أن يحتوي على مجموعة من الخصائص التالية ، والتي تصف الخاصية التي نضيفها:

  • القيمة : استخدم هذا لتعيين قيمة الخاصية. افتراضيات غير محددة .
  • للكتابة : استخدم هذا المنطقي لتعريف ما إذا كان هذا المتغير للقراءة فقط. إذا كان قابلاً للكتابة ، فهذا صحيح . افتراضيات خاطئة .
  • configurable : استخدم هذا المنطقي لتعريف ما إذا كان يمكن تغيير النوع (القيمة مقابل الطريقة) لهذه الخاصية ، أو ما إذا كان يمكن حذف الخاصية. إذا كان قابلاً للتهيئة ، فهذا صحيح . افتراضيات خاطئة .
  • enumerable : استخدم هذا المنطقي لتعريف ما إذا كانت هذه الخاصية مضمنة عند تعداد خصائص الكائن (حلقة for-in أو طريقة المفاتيح). افتراضيات خاطئة .
  • get : استخدم هذا لتعريف طريقة getter مخصصة. افتراضيات غير محددة .
  • set : استخدم هذا لتعريف طريقة ضبط مخصصة. افتراضيات غير محددة .

لاحظ أن الإعدادات الافتراضية للخيارات المنطقية أعلاه هي عكس معايير obj.prop = val القديمة . أيضا، ونعرف أنه لا يمكن تحديد قيمة أو للكتابة عند الحصول على أومجموعة يتم تعريفها، والعكس بالعكس.

لذا ، كيف تستخدم هذا؟ جرب هذا:

وبصرف النظر عن حقيقة أن الكلب سنوات ليست حقا 7 سنوات الإنسان ، يجب أن تلاحظ أننا لم يحدد قيمة أو للكتابة هنا، لأننا باستخدام الحصول على و تعيين . هذه الوظائف لا يتم الوصول إليها مباشرة. يتم تشغيلها "بطريقة سحرية" خلف الكواليس عند تعيين أو طلب ملكية. في هذا المثال ، أستخدم هذه الوظائف للحفاظ على العمر و human_years في "المزامنة". إذا كنت لا ترغب في الوصول إلى القيمة "الأخرى" ، فيمكنك استخدام وظيفة مجهولة ذاتية الاستدعاء لإخفائها بإغلاق:

وبطبيعة الحال، لا يوجد شيء لوقف لكم من القيام بشيء غبي داخل الحصول على أوتعيين ، لذلك استخدامها بحكمة.

يمكنك استخدام نموذج من كائن واصف الخاصية لإضافة خصائص إلى الكائنات معObject.create . افعلها كما يلي:

فقط استخدم اسم الخاصية كخاصية كائن الواصف؛ ثم قم بتعيين السمات عن طريق كائن في القيمة.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+

وظيفة 3: Object.defineProperties

إذا كنت ترغب في تعريف عدة خصائص في وقت واحد ، يمكنك استخدام كائن واصفات الخاصية كما هو الحال مع Object.create لتعريفها ، باستخدامObject.defineProperties .

ستحتاج إلى ملاحظة — للحالة النادرة عندما لا تستخدم حرفية للكائن كمعلمة ثانية — سيتم استخدام الخصائص اللامحدودة لكائن الخصائص فقط.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+

وظيفة 4: Object.getOwnPropertyDescriptor

إذا كنت تريد معرفة خصائص أحد المواقع ، يمكنك استخدام هذه الوظيفة ،Object.getOwnPropertyDescriptor . يحيط علما "تملك" ؛ هذا يعمل فقط مع الخصائص على الكائن نفسه ، وليس حتى سلسلة النموذج الأولي.

كما ترون ، هذا يعمل مع الخصائص المحددة بالطريقة القديمة والجديدة. تأخذObject.getOwnPropertyDescriptor معلمتين: الكائن واسم الخاصية كسلسلة.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 8+
    • سفاري 5
    • Chrome 5+

وظيفة 5: Object.keys

في أي وقت أراد الحصول على جميع مفاتيح كائن؟ الآن ، يمكنك القيام بذلك بسهولة معObject.keys . تمرير هذه الوظيفة كائن ، وسوف يعود مصفوفة من جميع الخصائص التي لا حصر لها من هذا الكائن. يمكنك أيضًا تمرير صفيف ، وستحصل على مجموعة من المؤشرات.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+

وظيفة 6: Object.getOwnPropertyNames

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

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+

وظيفة 7: Object.preventExtensions / Object.isExtensible

إذا كنت تريد إنشاء وظيفة لا تقبل معلمات جديدة ، فيمكنك القيام بذلك الآن. قم بتشغيل الكائن من خلال Object.preventExtensions ، وسوف يرفض كل المحاولات لإضافة معلمات جديدة. هذه الوظيفة تسير جنبا إلى جنب مع Object.isExtensible ، والتي ترجعصحيح إذا كان يمكنك تمديد الكائن والخطأ إذا كنت لا تستطيع ذلك.

يجب ملاحظة أنه لا يزال من الممكن تغيير أو حذف كافة الخصائص الموجودة على الكائن في الوقت الذي تقوم بتشغيل Object.preventExtensions (على افتراض أن سماته تسمح بذلك).

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • Chrome 6+

وظيفة 8: Object.seal / Object.isSealed

ختم أحد الكائنات هو خطوة واحدة من منع الامتدادات. لن يسمح لك الكائن المختوم بإضافة خصائص أو حذفها أو تغيير خصائص من قيمة (مثل سلسلة) إلى ملحق (أسلوب) أو العكس. ستظل قادرًا على قراءة وكتابة الخصائص ، بالطبع. يمكنك معرفة ما إذا كان الكائن مغلقًا باستخدام Object.isSealed .

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • Chrome 6+

وظيفة 9: Object.freeze / Object.isFrozen

تجميدها خطوة أخرى إلى الأمام. لا يمكن تغيير الكائن المجمد بأي شكل من الأشكال ؛ انها للقراءة فقط. يمكنك التحقق من تجميد كائن به ، كما خمنت ، Object.isFrozen .

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • Chrome 6+

وظيفة 10: Array.isArray

كنت تعتقد أنه لن يكون من الصعب تحديد أن المتغير المحدد هو مصفوفة. بعد كل شيء ، كل شيء آخر يعمل بشكل جيد مع عامل التشغيل typeof . ومع ذلك ، فإن مصفوفات جافا سكريبت غير منتظمة. إنها في الحقيقة كائنات أقرب إلى المصفوفة (على الرغم من أننا عادة نستخدم هذا المصطلح للإشارة إلى أشياء مثل الحجج و NodeList s). تمنحك هذه الوظيفة طريقة لتتأكد بنسبة 100٪ من أن ما تعمل به هو مصفوفة. تمرير متغير ، وترجع المنطقية.

لمعرفة المزيد حول سبب حاجتنا لهذه الوظيفة ، راجع المستندات ، المرتبطة أدناه.

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • سفاري 5
    • Chrome 5+
    • Opera 10.5+

وظيفة 11: Date.prototype.toJSON

هذا ليس كبيرًا جدًا ، ولكن إذا كنت تريد تخزين التواريخ في JSON ، فقد تجد هذا مفيدًا.تحتوي كائنات التاريخ الآن على وظيفة toJSON تقوم بتحويل التاريخ إلى تاريخ سلسلة JSON.


وظيفة 12: function.prototype.bind

وربما كنت معتادا على استخدام الدعوة و تطبيق ل إعادة تعيين قيمة هذا في وظيفة .

تسمح لك هذه الطرق بتغيير قيمة هذا داخل الوظيفة. إذا كنت ترغب في القيام بشيء كهذا غالبًا ، تقوم الدالة Function.prototype.bind بإرجاع دالة جديدة بهذاالارتباط بكل ما تمر به ، بحيث يمكنك حفظه إلى متغير.

بالطبع ، قد لا يكون هذا المثال الأكثر عملية ، ولكنه يعطيك الفكرة!

  • وثائق MDN
  • دعم المتصفح
    • فايرفوكس 4
    • Internet Explorer 9
    • Chrome 7+

ولكن انتظر هناك المزيد …

هذه هي وظائف ECMAScript الإصدار الخامس (أو JavaScript 1.8.5) التي تمت إضافتها إلى إصدارات Beta Firefox 4. هناك بعض التغييرات الأخرى على جافا سكريبت التي تنفذها أيضًا ، والتي يمكنك التحقق منها في ملاحظات الإصدار .

ومع ذلك ، هناك مجموعة من وظائف ECMAScipt 5 التي تم دعمها بالفعل في Firefox 3 ، والعديد من المتصفحات الأخرى. هل لعبت مع أي من هؤلاء؟

ملاحظة: هذه مرتبطة بوثائق MDN الخاصة بها.

إذا كنت ترغب في معرفة المتصفحات والإصدارات التي تدعم هذه الوظائف ، يمكنك التحقق من جدول التوافق هذا ، الذي أدلى به Juriy Zaytsev (Kangax) . والشيء الجميل في معظم هذه الوظائف هو أنه إذا كان المتصفح لا يدعمه ، فيمكنك عادةً إضافة دعم ، مع شيء كهذا:


ما هي ميزات ECMAScript 5 التي تستخدمها؟

إن العدد الكبير من الوظائف الجديدة التي نظرنا إليها هنا هو في الحقيقة جزء صغير فقط من الصفة المضافة إلى معيار ECMAScript في الطبعة الخامسة. هل هناك أي ميزات أخرى تتطلع إليها على وجه التحديد لاستخدامها ، أو ربما تستخدمها الآن؟ دعونا هنا في التعليقات!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.