الكلمة this
دالة لصاقة واحدة قد تقول اسم الكوب، ثم تُضيّع الكائن، ثم تُظهر اسم الفنجان. الأقواس المعقوفة لم تتحرك. الذي تغيّر هو شكل النداء. JavaScript يختار this عند النداء، لا أثناء كتابة الدالة.
بعد النداء المباشر للدالة
درس الدوال وضع الدالة على الكائن وشغّلها عبر product.tag(). في ذلك الشكل كانت this هي الكائن الذي قبل النقطة. الصفحة توقفت هناك. هنا تبقى الدالة مكانها ويتبدّل النداء: تُنزَع عن الكائن، أو تُوجَّه بـ call، أو تُقفَل بـ bind، أو تُكتَب سهمًا.
خمسة أشكال يحدّدها النداء لـ this
📊 نداء، مجرد، call، bind، سهم
| الشكل | مثال | أين تستقر this |
|---|---|---|
| نداء | product.tag() |
الكائن الذي قبل النقطة |
| مجرد | let show = product.tag; show() |
ليس ذلك الكائن (undefined في الوضع الصارم) |
| call | product.tag.call(cup) |
الكائن الذي تمرّره إلى call، لهذا التشغيل فقط |
| bind | product.tag.bind(product) |
مقفلة على ذلك الكائن في النداءات اللاحقة |
| سهم | () => this.name داخل دالة أخرى |
this الخاصة بالدالة الخارجية، لا الكائن قبل النقطة |
سمِّ النداء قبل أن تقرأ this. وضع الدالة على الكائن لا يجمّد this. النداء هو الذي يقرّر. bind يقرّر سلفًا لنداء لاحق. السهم يتجاهل النداء وينظر إلى الدالة التي تحيط به.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());
النقطة ما زالت تسمّي الكائن
product.tag() تشغّل tag وتضع this على product. الطرفية تطبع Mug. هذه قاعدة درس الدوال، تُركت هنا خط أساس. النداءات الأربعة التالية تخرج عن هذا الخط عمدًا.
"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());
إذا نزعت الدالة عن الكائن، يذهب الكوب مع النقطة
show وproduct.tag دالة واحدة. show() بلا كائن قبل نقطة، لذلك تكون this في الوضع الصارم هي undefined. الحارس يُعيد missing. احذف الحارس فيرمي this.name خطأ. هذه الصفحة تلتزم الوضع الصارم ليبقى الناتج متوقعًا. سكربت غير صارم قد يوجّه النداء المجرد إلى الكائن العام.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));
call يستعير الدالة لكائن واحد
product.tag.call(cup) ما زال يشغّل tag الخاصة بالكوب، لكن this هي cup لهذا التشغيل وحده. الطرفية تطبع Cup. يبقى product.name هو Mug. call لا يلصق الدالة على cup. apply يؤدي العمل نفسه حين تكون الوسائط الإضافية في مصفوفة — هذه اللاصقة لا تحتاجها.
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());
bind يحفظ الكائن لنداء مجرد لاحق
bind يُعيد دالة جديدة. داخلها تبقى this هي product وإن خلا show() من النقطة. الطرفية تطبع Mug. الدالة tag الأصلية لا تتغيّر. استعمل bind حين سيستدعي زر أو مؤقّت أو دالة أخرى الطريقة من دون الكائن أمامها.
"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());
السهم لا يأخذ this من النقطة
product.tag() يبدو نداء دالة، غير أن tag سهم. السهم لا يملك this خاصة به. يأخذ this من make، وmake اشتغل كـ shelf.make()، إذن this هي shelf. الطرفية تطبع Shelf لا Mug. لو كانت على product دالة عادية لطبعت Mug. الأسهم عُرضت في صفحة سابقة؛ هذه الصفحة تُظهر أثرها على this فقط.
طابق النداء مع العمل
الكائن أمام النقطة؟ اقرأ this على أنه ذلك الكائن. نزعت الدالة ولم تقفلها؟ لا تنتظر الكائن. كائن مختلف لتشغيل واحد؟ استخدم call. نداء لاحق بلا نقطة ويجب أن يرى الكوب؟ bind أولًا. كتبت سهمًا؟ انظر إلى الخارج نحو الدالة المحيطة، لا إلى الكائن قبل النقطة. البنّاء والصنف يضبطان this أيضًا وهما لصفحة لاحقة. التالي JSON: نص يصف البيانات، لا قاعدة جديدة لـ this.
ضع لاصقة مقفلة على الصفحة
اقفل tag على الكوب بـ bind، ثم نادِ الدالة الجديدة بلا نقطة. اكتب الناتج في فقرة.
<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>
الفقرة تُظهر Mug. show() بلا كائن قبل نقطة، والسطر ما زال يسمّي الكوب لأن bind قفل this. غيّر product.name فقط، أعِد تحميل الصفحة، وتتبع الفقرة الاسم. الدرس التالي: العمل مع JSON — نص يصف البيانات، لا قاعدة جديدة لـ this.
خطوات التدريب
- نادِ
product.tag()واقرأMug. - انسخ الدالة إلى
show، نادِshow()في الوضع الصارم، واقرأmissing. - نادِ
product.tag.call(cup)واقرأCup. - اقفل
tagعلىproduct، نادِ الدالة الجديدة بلا نقطة، واقرأMug. - شغّل
shelf.make()واقرأShelfلاMug. - في عرض HTML غيّر
product.nameفقط، أعِد التحميل، واقرأ الفقرة.
زلات شائعة
- اعتبار
thisمجمّدة لأن الدالة جالسة على الكائن - نداء
show()في الوضع الصارم مع انتظارMug - ظن أن
callينسخtagعلىcup - انتظار أن يعيد
bindكتابةtagالأصلية بدل إرجاع دالة جديدة - كتابة سهم مكان الدالة وانتظار الكائن الذي قبل النقطة
- قراءة الصفحة التالية كقاعدة أخرى لـ
this— JSON صيغة نصية للبيانات
الخلاصة
- النداء هو الذي يختار
this، لا الأقواس object.method()تضعthisعلى الكائن قبل النقطة- النداء المجرد في الوضع الصارم لا يوجّه
thisإلى ذلك الكائن callيضعthisعلى الكائن الذي تمرّره، لهذا التشغيل فقطbindيُعيد دالة تبقىthisفيها مقفلة- السهم يأخذ
thisمن الدالة المحيطة - النداء المقفول يستطيع ملء سطر واحد في الصفحة
- التالي: العمل مع JSON، نص يصف البيانات
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى