جاري التحميل...

دوال الكائن

الاسم والسعر موجودان على الكوب، لكن الصفحة ما زالت تحتاج عملاً يخصّه: يبني بطاقته، يرفع عدّاد السلة، يسلّم على المشتري. ضع الدالة على الكائن نفسه. هذه الدالة هي دالة الكائن.

بعد المفاتيح والقوائم

درس الخصائص أضاف حقلاً وحذف آخر وسأل بـ in ودخل كائنًا متداخلاً وسرد الأسماء عبر Object.keys. لم تُنفَّذ هناك أي دالة. هنا قيمة إحدى الخصائص دالة، وتُشغَّل من الكائن الذي يحملها.

خمس حركات مع الدالة

📊 تخزين، استدعاء، اختصار، this، وسيط

الحركة الصياغة ماذا تحصل
تخزين greet: function () { return "Hi"; } دالة جالسة على الكائن
استدعاء product.greet() تُنفَّذ الدالة وتأخذ نتيجتها
اختصار label() { return this.name; } الدالة نفسها بكتابة أقصر
this this.name داخل الدالة الكائن الذي كان قبل النقطة
وسيط cart.add(3) دخل إضافي لهذه النداءة وحدها

سمِّ الحركة ثم اكتب السطر. التخزين لا يشغّل الدالة. الاختصار ليس نوع قيمة جديدًا. this ليس اسم منتج عامًّا تتمنى أن يكون موجودًا. الوسيط دخل لهذه النداءة، لا كائن ثانٍ.

تخزين دالة على الكائن

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);

القيمة قد تكون دالة

name يمسك سلسلة نصية. greet يمسك دالة. ناتج typeof product.greet هو "function". لم يجرِ التنفيذ بعد، لذلك لا ترى Hi. اسم الكوب ما زال بجانب الدالة.

استدعاء الدالة بالأقواس

javascript 
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());

الأقواس زر التشغيل

product.greet() يدخل الدالة. تطبع وحدة التحكم Hi. إن أسقطت الأقواس فأنت تنظر إلى الدالة نفسها لا إلى ما تُرجعه. النقطة تخبر JavaScript بأي كائن ينتمي هذا الاستدعاء.

اختصار الدالة داخل الحرفي

javascript 
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());

الاختصار إملاء أقصر فقط

داخل القوسين، label() { ... } تخزّن دالة على المفتاح label. جنسها كجنس greet: function () { ... }، والفرق في طول الكتابة. product.label() تشغّلها. الجسم يقرأ this.name فتطبع وحدة التحكم Mug.

قراءة الحقول الشقيقة عبر this

javascript 
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());

في النداء المباشر، this هو الكائن قبل النقطة

معنى product.tag() : شغّل tag وليكن this هو product. عندئذٍ this.name وthis.price حقلان خاصان بالكوب. تطبع وحدة التحكم Mug — 8. الاسم العاري name داخل الدالة بحث آخر، وليس الخاصية. إذا لم يعد شكل النداء object.method() فقد يشير this إلى مكان آخر — وذلك درس الكلمة this. هذه الصفحة تبقى على النداء المباشر.

تمرير وسيط إلى الدالة

javascript 
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));

الدالة تأخذ دخلاً لهذه النداءة

add ينتظر extra. cart.add(3) يسلّم 3، يضيفه إلى count، ويرجع المجموع الجديد. تطبع وحدة التحكم 5. السلة تحتفظ بـ count بعد التحديث. الوسيط يعيش للنداء، ولا يصير خاصية إلا إذا خزّنته أنت.

اختر الحركة التي تناسب العمل

الدالة يجب أن تعيش على الكائن؟ خزّنها بالشكل الطويل أو المختصر. تريد النتيجة؟ نادِ بـ (). تريد حقول الكائن نفسه؟ اقرأها عبر this. تحتاج عددًا لهذا التشغيل فقط؟ مرّر وسيطًا. Object.keys سرد الأسماء في الصفحة السابقة. الصفحة التالية تبقى مع this حين يتغيّر شكل النداء.

ضع بطاقة الدالة على الصفحة

أعطِ المنتج name وprice وtag. اكتب ناتج product.tag() في فقرة.

عرض الصفحة — بطاقة الدالة

html 
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>

تُظهر الفقرة Mug — 8. بنت tag تلك السلسلة من حقول المنتج نفسه. غيّر name أو price فقط، حدّث الصفحة، واقرأ السطر الجديد. الدرس التالي: الكلمة this — إلى أين يشير this حين لا يكون النداء على شكل object.method().

خطوات التدريب

  1. خزّن دالة على greet واطبع typeof لتلك الخاصية.
  2. نادِ product.greet() واقرأ Hi.
  3. اكتب label بالاختصار واطبع product.label().
  4. ابنِ tag بحيث يكوّن this.name وthis.price سلسلة واحدة.
  5. ابدأ count من 2، نادِ add(3)، واقرأ 5.
  6. في عرض HTML غيّر name أو price فقط، حدّث، واقرأ الفقرة.

زلات تتكرر

  • طباعة product.greet بلا () مع انتظار Hi
  • معاملة الاختصار label() {} كخاصية نصية
  • كتابة name عاريًا داخل الدالة بدل this.name
  • توقّع أن cart.add(3) يُبقي count عند 2
  • اللجوء إلى Object.keys حين كنت تقصد استدعاء دالة
  • وضع دالة سهمية مكان دالة هذه الصفحة — الدرس التالي يتابع this حين يتغيّر شكل النداء

الخلاصة

  • دالة الكائن هي دالة مخزّنة كخاصية
  • object.method() تشغّلها وتعطيك القيمة المرجعة
  • الاختصار name() {} يخزّن الدالة من الجنس نفسه
  • في النداء المباشر، this هو الكائن قبل النقطة
  • المعامل يستلم الوسيط الخاص بتلك النداءة
  • سلسلة الدالة تستطيع أن تملأ سطرًا واحدًا في الصفحة
  • التالي: الكلمة this، حين لا يكون النداء object.method()

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 35 من 37
Javascript درس تعليمي