لوحة المتصدرين

مرحبًا بك في هذه السلسلة الجديدة التي سنتعلّم من خلالها كيف سنتعامل مع إطار العمل Vue.js. هذا الإطار الواعد الذي يُسهّل العمل في تطوير الواجهة الأمامية للتطبيقات Frontend Applications إلى حدّ بعيد. سنتدرّج في هذه السلسلة بشكل سلس، حيث سنتناول موضوعات بسيطة في البداية، ثم ومع تقدّمنا في الدروس سنغطي موضوعات أوسع وأشمل. ستلاحظ وجود تطبيقات بسيطة في كل درس، نشرح من خلالها فكرة أو أفكار محدّدة. ولكن في نهاية السلسلة سنختم بتطبيقين عمليين، يوضّحان معظم الأفكار التي تمّت تغطيتها مسبقًا. هذه السلسلة هي سلسلة تعليمية، الهدف منها هو أن تنطلق مع Vue.js بسهولة ويُسر، وبالتالي فهي ليست سلسلة مرجعيّة شاملة لإطار العمل Vue.js. سأفترض أنّه لديك معرفة جيدة بلغة JavaScript و بـ HTML أيضًا، كما ويُفضّل أن تمتلك معرفة أساسيّة بـ CSS. سنتطرق في هذا المقال إلى النقاط التالية: ماهو إطار العمل framework في JavaScript؟ تطبيقك الأوّل مع Vue.js. إضافة مزايا جديدة لتطبيقنا الأوّل. العمل على حاسوب محلّي. ماهو إطار العمل framework في JavaScript؟ ببساطة و بمعزل عن أي تفاصيل تقنية، يساعدنا إطار العمل عمومًا في إنشاء تطبيقات عصرية حديثة، حيث يحتوي على الأدوات اللازمة لتسهيل حياة المبرمجين في إنشاء تطبيقات معقّدة بزمن قياسي، فلا يحتاج المبرمج أن يستخدم الأسلوب التقليدي القديم في التعامل مع نموذج كائنات المستند DOM باستخدام JavaScript، حيث يمكن باستخدام إطار العمل التعامل مع العناصر في DOM بشكل قياسي ومجرّد وسهل إلى حدّ بعيد. بدأ العمل مع JavaScript بتطوير مكتبات شهيرة مثل jQuery و Mootools، حيث سهّلت مثل هذه المكتبات العمل مع JavaScript على نحو كبير، وقلّلت مشاكل التوافقية بين المتصفحات المختلفة التي لم تكن تتبع معيارًا موحدًّا. تطوّرت الأمور بعد ذلك لتبدأ أُطر عمل متكاملة في الظهور يمكن أن نقسّمها إلى مرحلتين أساسيتين. المرحلة الأولى كانت مع ظهور أُطر عمل مثل Backbone و Ember و Knockout و AngularJS. أمّا المرحلة الثانية وهي المرحلة الحالية فكانت مع أطر عمل مثل React و Angular و Vue. تٌعدّ Vue.js من أحدث أُطر العمل في JavaScript، وهي إطار عمل واعد، يجمع بين السهولة والمرونة والقوة، بالإضافة إلى صغر حجم الملف الخاص بها (فقط 26 كيلو بايت) مما يجعل تحميل صفحات الويب سهلة إلى حد بعيد. سنهتم بالإصدار Vue.js 2 مع التاكيد بأنّ ما سنأخذه هنا يمكن تطبيقه بسهولة في إصدارات لاحقة. تطبيقك الأول مع Vue.js قبل البدء باستخدام Vue.js علينا أن نحصل على الملف الخاص به. لدينا عدّة خيارات لذلك، سأختار أحد أسهل الخيارات وهو الحصول على الملف الخاص بإطار العمل عن طريق شبكة تسليم محتوى CDN، ثم نتحدّث عن الخيارات الأخرى فيما بعد. يمكنك استخدام رابط CDN التالي للحصول على Vue.js؛ الرابط هو unpkg.com/vue@2.6.11/dist/vue.js سنحتاج حاليًا إلى الرابط فقط. انتقل الآن إلى الموقع jsfiddle.net الذي يوفّر بيئة تطوير بسيطة وممتازة لتجريب Vue.js دون تحميل أي شيء على حاسوبك. ستحصل على شكل شبيه بما يلي: انقر على الرابط URL الذي يظهر في القسم الأيسر في الأعلى من النافذة السابقة، بجوار كلمة Resources: بعد نقر الرابط السابق ستحصل على مربّع نص، انسخ فيه رابط CDN السابق، ثم انقر الزر المجاور الذي يظهر على شكل إشارة زائد: نكون بذلك قد أخبرنا بيئة التطوير المصغّرة أنّنا بصدد استخدام الملف الخاص بإطار العمل Vue.js. انسخ الآن شيفرة HTML التالي إلى القسم الخاص بأكواد HTML من الصفحة الرئيسية لموقع jsfiddle: <div id="app"> {{ message }} </div> ثم انسخ شيفرة JavaScript التالية والصقها ضمن القسم الخاص بشيفرات JavaScript في الصفحة الرئيسية الموقع: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) انقر الآن زر التشغيل Run الموجود في الزاوية اليسرى العليا من الصفحة. إذا نفذت الخطوات السابقة بدقة، ستلاحظ ظهور العبارة Hello Vue! في القسم الأيمن الأسفل من الصفحة. مبارك! لقد بنيت تطبيق Vue.js الأول لك. دعنا الآن نحلّل ما قمنا به حتى الآن. أتوقّع أنّ رُماز HTML الذي استخدمناه سهل وواضح، حيث أنشأنا عنصر div وأسندنا له المعرّف app، ووضعنا ضمن وسمي الفتح والإغلاق له التعبير التالي: {{ message }} هذا التعبير هو الأساس في Vue.js، سنتحدّث عنه بعد قليل. الآن لاحظ معي شيفرة JavaScript التالية: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) أعتقد أنّ بداية هذه الشيفرة مألوفة، حيث أنّنا نعمل على إنشاء كائن من النوع Vue باستخدام الكلمة المفتاحية new. لاحظ معي ماذا نمرّر إلى النوع Vue: { el: '#app', data: { message: 'Hello Vue!' } } المقطع السابق عبارة عن كائن آخر يُسمى بكائن الخيارات (options instance) يحوي الإعدادات التي نريد أن تكون ضمن كائن Vue.js الجديد. ففي الحقل el (يمثّل أول حرفين من كلمة element أي العنصر) نُسند القيمة '‎#app' والتي تمثّل معرّف عنصر HTML المُستَهدف (في حالتنا هذه هو عنصر div الذي أنشأناه قبل قليل)، أمّا الحقل data فيتم إسناد كائن آخر إليه يحتوي على حقل واحد وهو message وقيمته 'Hello Vue!'. لاحظ أنّ الكلمة 'message' هي نفسها الموجودة ضمن رُماز HTML السابق الموضوعة بحاضنة مزدوجة {{ message }}. وهكذا فعند تنفيذ البرنامج السابق سيعمل Vue على استبدال التعبير {{ message }} ضمن عنصر HTML الذي يحمل المعرّف app بالنص 'Hello Vue!‎' وهذا كلّ شيء. ملاحظة: رغم وجود من يميّز بين الكائن object والنسخة instance، إلّا أنني لا أفرّق بينهما من الناحية العمليّة. لذلك تراني أستخدم الترجمة "كائن" دومًا. حاول الآن إجراء بعض التغييرات على النص السابق، وأعد التنفيذ باستخدام الزر Run لتشاهد التغييرات الجديدة على الخرج. في الحقيقة إنّ ما جرى في هذا المثال يتعدّى عن كونه مجرّد عملية استبدال تعبير برسالة مجهزّة مسبقًا، إن ما يجري من وراء الكواليس هو عملية ربط كامل بين الحقل message الموجود ضمن شيفرة JavaScript وبين التعبير {{ message }} الموجود ضمن رُماز HTML وسنرى كيف ذلك في الفقرة التالية. إضافة مزايا جديدة لتطبيقنا الأول حان الوقت لإجراء بعض التحسينات على تطبيقنا الأول. انتقل إلى قسم HTML وأضف عنصر إدخال نصّي input على النحو التالي: <div id="app"> <input type='text' v-on:input="updateInfo"/> {{ message }} </div> لقد وضعت عنصر الإدخال فوق التعبير {{ message }} مباشرة. الشيء الجديد هنا هي السمة v-on:input وهي بحد ذاتها مكوّنة من قسمين الموجّه directive وهو: v-on والوسيط input المراد تمريره إلى الموجّه. يلعب الموجّه v-on دور مُنصِت حدث event listener. وفي حالتنا هذه فإنّنا نرغب بالإنصات لحدث الإدخال input (معامل [parameter]) لعنصر الإدخال النصي. لاحظ القيمة المُسندة الموجّه: updateInfo وهي بكل بساطة اسم التابع الذي سيتم استدعاؤه في حال تمّ إجراء أي إدخال ضمن عنصر الإدخال النصي من قِبَل المستخدم. سنعرّف هذا التابع الآن. استبدل الشيفرة القديمة الموجودة بالقسم المخصّص لشيفرات JavaScript في الصفحة الرئيسية للموقع بالشيفرة التالية: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ updateInfo:function(event){ this.message = event.target.value; } } }) الفرق الوحيد بين المقطعين الجديد والقديم، أنّنا أضفنا القسم methods الذي يتم فيه تعريف جميع التوابع (methods) التي نرغب باستخدامها. واضح أنّنا سنعرّف التابع updateInfo الذي تحدثنا عنه قبل قليل. عرّفنا هذا التابع على أنّه function ومرّرنا إليه الكائن event وهو كائن يحتوي على بيانات الحدث الذي تمّ توليده تلقائيّا بسبب كتابة المستخدم ضمن مربّع النص. العبارة البرمجية الوحيدة الموجودة في هذا التابع هي: this.message = event.target.value; على نحو غريب قليلًا، ترمز الكلمة this هنا إلى الحقل data (المعرّف ضمن نفس كائن Vue.js) والذي يحتوي بدوره على الحقل message. سنوضّح سبب ذلك في درس لاحق. القسم الثاني من العبارة بسيط، وفيه نستخلص البيانات التي أدخلها المستخدم من خلال التعبير event.target.value. جرّب تنفيذ البرنامج الآن بنقر زر Run، ثم حاول كتابة أي شيء ضمن مربع النص، ستلاحظ أنّه سيتم تحديث الرسالة بشكل فوري بالنص الذي تكتبه! العمل على حاسوب محلي إذا لم ترغب أن تعمل على jsfiddle.net يمكنك العمل بالتأكيد في وضع عدم اتصال محليًّا على حاسوبك الشخصي. علينا أوّلًا تنزيل Vue.js عن طريق الرابط https://Vue.js.org/js/vue.js (من الممكن أن يظهر محتوى الملف كاملًا ضمن صفحة عادية في المتصفح، انسخ محتويات الصفحة واحفظها ضمن جديد، سمّه: vue.js). في الحقيقة يمكنك استخدام هذه النسخة لأغراض التطوير البرمجية فقط، أمّا عندما يصبح التطبيق قيد الاستخدام العملي فيُنصح باستخدام النسخة التالية: https://Vue.js.org/js/vue.min.js حصلت على النسختين السابقتين من الموقع الرسمي لإطار العمل Vue.js من الصفحة التالية: https://Vue.js.org/v2/guide/installation.html أنشئ مجلّدًا وسمّه Vue.js-first-app، ثم انسخ ضمن هذا المجلّد ملف vue.js الذي نزّلته قبل قليل. باستخدام محرّر HTML المناسب لك، أنشئ ملف جديد واختر له مثلا الاسم index.html. ثم احفظه في نفس المجلّد السابق بجوار الملف vue.js، وبعد ذلك أضف إليه المحتوى التالي الذي قمت بتجميعه من محتويات التطبيق المحسّن الذي تناولناه في الفقرة السابقة: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue.js</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type='text' v-on:input="updateInfo"/> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ updateInfo:function(event){ this.message = event.target.value; } } }) </script> </body> </html> لاحظ معي أنّنا قد أضفنا مرجعًا لملف vue.js المحلّي عن طريق وسم script ضمن القسم head من المستند، وأضفنا شيفرة JavaScript المسؤولة عن تحديث خرج التطبيق ضمن القسم body من المستند. يمكنك متابعة كتابة تطبيقاتك على هذا النحو، ولو أنّني أفضّل استخدام منصّات مثل jsfiddle.net و codepen.io على الأقل في هذه المرحلة التي نسبر بها أغوار Vue.js. ختامًا تناولنا في هذا الدرس مقدّمة سريعة إلى إطار العمل الواعد Vue.js حيث تعلّمنا كيف نبدأ مع Vue.js وكيف نكتب تطبيقات بسيطة توضّح لنا مدى السهولة والمرونة التي يتمتّع بها إطار العمل هذا. سنتابع عملنا في الدروس اللاحقة لنسبر أغوار Vue.js بشكل سهل ومتدرّج. تمارين داعمة سأزودك في التمرينين التاليين بمسألتين بسيطتين للتدرّب على المفاهيم الموجودة في هذا الدرس. يوجد بعد كل تمرين حل مقترح، حاول ألّا تنظر إلى الحلول المقترحة قبل تقديم حلولك. تمرين 1 استخدم الوسيط click بدلًا من الوسيط input مع الموجّه v-on لكي يستجيب التطبيق عندما ينقر المستخدم على عنصر الإدخال بدًلا من الكتابة داخله وذلك في التطبيق المحسّن الذي تحدثنا عنه قبل قليل. اجعل التطبيق يعرض الرسالة "Clicked!" عندما ينقر المستخدم. .anntional__paragraph { border: 3px solid #f5f5f5; margin: 20px 0 14px; position: relative; display: block; padding: 25px 30px; } الحل المقترح الحل في هذا التمرين بسيط. استبدل الوسيط input بالوسيط clicked ضمن رُماز HTML ثم وفي القسم المخصّص لشيفرة JavaScript، استبدل بالسطر التالي: this.message = event.target.value; السطر: this.message = 'Clicked!'; تمرين 2 في هذا التمرين ستُنشئ تطبيق آلة حاسبة بسيط يقوم بعملية حسابية واحدة وهي جمع عددين. أقترح الواجهة البسيطة التالية: الميزة في هذا التطبيق أنّه إذا بدأ المستخدم بالكتابة في أي مربّع، يجب أن يقوم التطبيق بإيجاد المجموع بشكل فوري أثناء إدخاله الأرقام. لن نقوم في هذا التمرين بالتحقّق من صحة إدخال المستخدم. الحل المقترح طريقة التنفيذ مشابهة جدّا للتطبيقات التي تناولناها في هذا الدرس. سأضيف حقلين إضافيين فقط لتخزين قيمتي المعاملين الأيمن والأيسر لعملية الجمع. شيفرة HTML المقترحة هي: <div id="app"> <input type='text' v-on:input="updateLeftOper"/> <label>+</label> <input type='text' v-on:input="updateRightOper"/> <label>=</label> <label>{{result}}</label> </div> أما شيفرة JavaScript المقترحة فهي على الشكل التالي: var app = new Vue({ el: '#app', data: { result: 0, leftOper: 0, rightOper: 0 }, methods:{ updateLeftOper: function(event){ this.leftOper = parseFloat(event.target.value) this.result = this.leftOper + this.rightOper; }, updateRightOper: function(event){ this.rightOper = parseFloat(event.target.value) this.result = this.leftOper + this.rightOper; } } }) إذا لم تستطع استيعاب الشيفرة السابقة تمامًا فلا بأس، سنتكلم المزيد عن هذه الأمور لاحقًا. اقرأ أيضًا المقال التالي: استخدام Vue.js للتعامل مع DOM النسخة الكاملة لكتاب أساسيات إطار العمل Vue.js

ملاحظة مهمة: هذه الشرح لميزات اللغة المتقدمة، إذ تتناول هذه المقالة موضوعًا متقدمًا، لفهم بعض الحالات الهامشية بطريقة أفضل. مع العلم أنها ليست مهمة. والعديد من المطورين ذوي الخبرة الجيدة ينفذون مشاريعهم بدون معرفتها. ولكن إذا أردت معرفة كيفية عمل الأشياء تحت الطاولة فتابع القراءة. إن استدعاء التابع المقيم ديناميكيًا يمكن أن يفقد قيمة this. فمثلًا: let user = { name: "John", hi() { alert(this.name); }, bye() { alert("Bye"); } }; user.hi(); // works // لنستدعي الآن ‫user.hi أو user.bye بحسب الاسم _(user.name == "John" ? user.hi : user.bye)(); // خطأ يوجد في السطر الأخير معامل شرطي يختار إما user.hi أو user.bye. في هذه الحالة تكون النتيجة user.hi. ثم تستدعى الدالّة ذات الأقواس () على الفور لكنها لن تعمل بطريقة صحيحة! كما تلاحظ، نتج عن الاستدعاء بالطريقة السابقة خطأ، وذلك لأن قيمة this داخل الاستدعاء تصبح غير معرفة undefined. نلاحظ هنا أن هذه الطريقة تعمل بصورة صحيحة (اسم الكائن ثم نقطة ثم اسم الدالّة): user.hi(); أما هذه الطريقة فلن تعمل (طريقة تقييم الدالّة): (user.name == "John" ? user.hi : user.bye)(); // Error! لماذا حدث ذلك؟ إذا أردنا أن نفهم سبب حدوث ذلك، فلنتعرف أولًا على كيفية عمل الاستدعاء obj.method()‎. شرح النوع المرجعي بالنظر عن كثب، قد نلاحظ عمليتين في العبارة obj.method()‎: أولًا، تسترجع النقطة '.' الخاصية obj.method. ثم تأتي الأقواس () لتنفّذها. إذًا كيف تنتقل المعلومات الخاصة بقيمة this من الجزء الأول إلى الجزء الثاني؟ إذا وضعنا هذه العمليات في سطور منفصلة، فسنفقدُ قيمة this بكل تأكيد: let user = { name: "John", hi() { alert(this.name); } } // جزّء استدعاء التوابع على سطرين let hi = user.hi; hi(); // خطأ لأنها غير معرّفة إن التعليمة hi = user.hi تضع الدالّة في المتغير، ثم الاستدعاء في السطر الأخير يكون مستقلًا تمامًا، وبالتالي لا يوجد قيمة لـ this. لجعل استدعاءات user.hi()‎ تعمل بصورة صحيحة، تستخدم لغة جافاسكربت خدعة - بأن لا تُرجع النقطة '.' دالة، وإنما قيمة من نوع مرجعي. إن القيمة من نوع مرجعي هو "نوع من المواصفات". لا يمكننا استخدامها بطريقة مباشرة، ولكن تستخدم داخليًا بواسطة اللغة. إن القيمة من نوع مرجعي هي مجموعة من ثلاث قيم (base, name, strict)، ويشير كلُّ منها إلى: base: وهو الكائن. name وهو اسم الخاصية. strict تكون قيمتها true إذا كان الوضع الصارم مفعلًا. إن نتيجة وصول الخاصية user.hi ليست دالة، ولكنها قيمة من نوع مرجعي. بالنسبة إلى user.hi في الوضع الصارم، تكون هكذا: // قيمة من نوع مرجعي (user, "hi", true) عندما تستدعى الأقواس () في النوع المرجعي، فإنها تتلقى المعلومات الكاملة حول الكائن ودواله، ويمكنهم تعيين قيمة this (ستكون user في حالتنا). النوع المرجعي هو نوع داخلي خاص "وسيط"، بهدف تمرير المعلومات من النقطة . إلى أقواس الاستدعاء (). أي عملية أخرى مثل الإسناد hi = user.hi تتجاهل نوع المرجع ككلّ، وتأخذ قيمة user.hi (كدالّة) وتمررها. لذا فإن أي عملية أخرى تفقد قيمة this. لذلك وكنتيجة لما سبق، تُمرر قيمة this بالطريقة الصحيحة فقط إذا استدعيت الدالّة مباشرة باستخدام نقطة obj.method()‎ أو الأقواس المربعة obj['method']()‎ (الصياغتين تؤديان الشيء نفسه). لاحقًا في هذا السلسلة التعليمية، سنتعلم طرقًا مختلفة لحل هذه المشكلة مثل الدالّة func.bind()‎. الخلاصة النوع المرجعي هو نوع داخلي في لغة جافاسكربت. فقراءة خاصية ما، مثل النقطة . فيobj.method()‎ لا تُرجع قيمة الخاصية فحسب، بل تُرجع قيمة من "نوع مرجعي" خاص والّتي تخزن فيها قيمة الخاصية والكائن المأخوذة منه. هذه طريقة لاستدعاء الدالة اللاحقة () للحصول على الكائن وتعيين قيمة this إليه. بالنسبة لجميع العمليات الأخرى، يصبح قيمة النوع المرجعي تلقائيًا قيمة الخاصية (الدالّة في حالتنا). جميع هذه الآليات مخفية عن أعيننا. ولا تهمنا إلا في الحالات الدقيقة، مثل عندما نريد الحصول على تابع ديناميكيًا من الكائن ما، باستخدام تعبير معيّن. المهام التحقق من الصياغة الأهمية: 2 ما هي نتيجة هذه الشيفرة البرمجية؟ let user = { name: "John", go: function() { alert(this.name) } } (user.go)() انتبه. هنالك فخ .anntional__paragraph { border: 3px solid #f5f5f5; margin: 20px 0 14px; position: relative; display: block; padding: 25px 30px; } الحل سينتج عن تنفيذ الشيفرة السابقة خطأ! جربها بنفسك: let user = { name: "John", go: function() { alert(this.name) } } (user.go)() // error! لا تعطينا رسالة الخطأ في معظم المتصفحات فكرة عن الخطأ الّذي حدث. يظهر الخطأ بسبب فقدان فاصلة منقوطة بعد user = {...}‎. إذ لا تُدرج لغة جافاسكربت تلقائيًا فاصلة منقوطة قبل قوس ‎(user.go)()‎، لذلك تُقرأ الشيفرة البرمجية هكذا: let user = { go:... }(user.go)() ثم يمكننا أن نرى أيضًا أن مثل هذا التعبير المشترك هو من الناحية التركيبية استدعاء للكائن ‎{ go: ... }‎ كدالة مع الوسيط (user.go). ويحدث ذلك أيضًا على نفس السطر مع let user، لذلك إن الكائن user لم يُعرّف حتى الآن، ومن هنا ظهر الخطأ. إذا أدخلنا الفاصلة المنقوطة، فسيكون كل شيء على ما يرام: let user = { name: "John", go: function() { alert(this.name) } }; (user.go)() // John يرجى ملاحظة أن الأقواس حول (user.go) لا تفعل شيئًا مميزًا هنا. وهي عادةً تعيد ترتيب العمليات، ولكن هنا تعمل النقطة . أولًا على أي حال، لذلك ليس هناك أي تأثير لها. الشيء الوحيد المهم هو الفاصلة المنقوطة. اشرح قيمة this الأهمية: 3 في الشيفرة أدناه، نعتزم استدعاء التابع obj.go()‎ لأربع مرات على متتالية. ولكن لماذا الندائين (1) و(2) يعملان بطريقة مختلفة عن الندائين (3) و(4)؟ let obj, method; obj = { go: function() { alert(this); } }; obj.go(); // (1) [object Object] (obj.go)(); // (2) [object Object] (method = obj.go)(); // (3) undefined (obj.go || obj.stop)(); // (4) undefined الحل إليك تفسير ما حدث. هذا هو الطريقة العادية لاستدعاء تابع الكائن. نفس الأمر يتكرر هنا، الأقواس لا تغير ترتيب العمليات هنا، النقطة هي الأولى على أي حال. هنا لدينا استدعاء أكثر تعقيدًا ‎(expression).method()‎. يعمل الاستدعاء كما لو كانت مقسمة على سطرين: f = obj.go; // يحسب نتيجة التعبير f(); // يستدعي ما لدينا هنا تُنفذ f()‎ كدالة، بدون this. مثل ما حدث مع الحالة (3) على يسار النقطة . لدينا تعبير. لشرح سلوك (3) و(4) نحتاج إلى أن نتذكر أن توابع الوصول (accessors) للخاصيات (النقطة أو الأقواس المربعة) تُعيد قيمة النوع المرجعي. أي عملية نطبقها عليها باستثناء استدعاء التابع (مثل عملية الإسناد = أو ||) تحولها إلى قيمة عادية، والّتي لا تحمل المعلومات التي تسمح لها بتعيين قيمة this. ترجمة -وبتصرف- للفصل Reference Type من كتاب The JavaScript language