هل أنت من بين مطوري JavaScript الذين يجدون الكلمة الرئيسية "هذا" محيرة؟ هذا الدليل موجود هنا لإزالة أي ارتباك قد يكون لديك حول هذا الموضوع.

ماذا يكون ال هذا الكلمة الرئيسية في جافا سكريبت تعني؟ وكيف يمكنك استخدامه عمليا في برنامج جافا سكريبت الخاص بك؟ هذه بعض الأسئلة الشائعة التي يطرحها المبتدئون وحتى بعض مطوري JavaScript ذوي الخبرة حول هذا الكلمة الرئيسية.

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

"هذا" داخل النطاق العالمي

وفي السياق العالمي، هذا سوف يعود نافذة او شباك الكائن طالما أنه خارج الوظيفة. السياق العام يعني أنك لا تضعه داخل الوظيفة.

if(true) {
console.log(this) // returns window object
}

let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
i++
}

إذا قمت بتشغيل الكود أعلاه، فستحصل على كائن window.

"هذه" الوظائف الداخلية (الطرق)

عند استخدامها داخل الوظائف، هذا يشير إلى الكائن الذي ترتبط به الوظيفة. الاستثناء هو عند الاستخدام

instagram viewer
هذا في وظيفة مستقلة، وفي هذه الحالة تقوم بإرجاع نافذة او شباك هدف. دعونا نرى بعض الأمثلة.

في المثال التالي، sayName الوظيفة داخل أنا كائن (أي أنها طريقة). في مثل هذه الحالات، هذا يشير إلى الكائن الذي يحتوي على الوظيفة.

 
functionsayName() {
return`My name is ${this.name}`
}

const me = {
name: "Kingsley",
sayName: sayName
}

console.log(me.sayName()) // My name is Kingsley

هذا هل أنا كائن، قائلا ذلك هذا الإسم داخل sayName الطريقة هي نفسها تمامًا اسمي.

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

والآن كما ذكرنا سابقاً هذا يعود نافذة او شباك كائن عند استخدامه داخل وظيفة مستقلة. وذلك لأن الوظيفة المستقلة مرتبطة بـ نافذة او شباك الكائن بشكل افتراضي:

functiontalk() {
returnthis
}

talk() // returns the window object

الاتصال يتحدث() هو نفس الدعوة نافذة. الحديث ()، وأي شيء موجود على الجانب الأيسر من الوظيفة سيصبح تلقائيًا هذا.

وفي ملاحظة جانبية، هذا تتصرف الكلمة الرئيسية في الوظيفة بشكل مختلف الوضع الصارم لجافا سكريبت (يعود غير معرف). وهذا أيضًا شيء يجب أخذه في الاعتبار عند استخدام مكتبات واجهة المستخدم التي تستخدم الوضع الصارم (مثل React).

استخدام "هذا" مع Function.bind()

قد تكون هناك سيناريوهات حيث لا يمكنك فقط إضافة الوظيفة إلى كائن كطريقة (كما في القسم الأخير).

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

في المثال التالي، sayName الوظيفة ليست طريقة على أنا الكائن، ولكنك لا تزال تربطه باستخدام ربط() وظيفة:

functionsayName() {
return`My name is ${this.name}`
}

const me = {
name: "Kingsley"
}

const meTalk = sayName.bind(me)

meTalk() // My name is Kingsley

مهما كان الشيء الذي تمر به ربط() سيتم استخدامها كقيمة هذا في تلك الوظيفة المكالمة.

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

استخدام "هذا" مع Function.call()

ماذا لو كنت لا تريد إرجاع وظيفة جديدة تمامًا، بل تريد فقط استدعاء الوظيفة بعد ربطها بسياقها؟ الحل لذلك هو يتصل() طريقة:

functionsayName() {
return`My name is ${this.name}`
}

const me = {
name: "Kingsley"
}

sayName.call(me) // My name is Kingsley

ال يتصل() تقوم الطريقة بتنفيذ الوظيفة على الفور بدلاً من إرجاع وظيفة أخرى.

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

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
} elseif (lang "it") {
return`Io sono ${this.name}`
}
}

const me = {
name: "Kingsley"
}

sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

كما ترون، يمكنك فقط تمرير أي معلمة تريدها إلى الدالة باعتبارها الوسيطة الثانية للدالة يتصل() طريقة. يمكنك أيضًا تمرير أي عدد تريده من المعلمات.

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

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

"هذا" داخل وظائف المنشئ

إذا قمت باستدعاء دالة بـ a جديد الكلمة الأساسية، فإنه ينشئ هذا الكائن وإعادته:

functionperson(name){
this.name = name
}

const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")

me.name // Kingsley
her.name // Sarah
him.name // Jake

في الكود أعلاه، قمت بإنشاء ثلاثة كائنات مختلفة من نفس الوظيفة. ال جديد تقوم الكلمة الأساسية تلقائيًا بإنشاء رابط بين الكائن الذي يتم إنشاؤه و هذا الكلمة الأساسية داخل الوظيفة.

"هذا" داخل وظائف رد الاتصال

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

ال هذا تشير الكلمة الأساسية إلى سياق مختلف تمامًا عند استخدامها داخل وظائف رد الاتصال:

functionperson(name){
this.name = name
setTimeout(function() {
console.log(this)
}, 1000)
}

const me = new person("Kingsley") // returns the window object

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

هناك طريقتان لحل هذه المشكلة. الطريقة الأولى تستخدم ربط() لربط شخص وظيفة للكائن المنشأ حديثًا:

functionperson(name){
this.name = name
setTimeout(function() {
console.log(this)
}.bind(this), 1000)
}

const me = new person("Kingsley") // returns the me object

مع التعديل أعلاه، هذا في رد الاتصال سوف يشير إلى نفسه هذا كوظيفة المنشئ ( أنا هدف).

الطريقة الثانية لحل مشكلة هذا في وظائف رد الاتصال يتم استخدام وظائف الأسهم.

"هذا" داخل وظائف السهم

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

functionperson(name){
this.name = name
setTimeout(() => {
console.log(this)
}, 1000)
}

const me = new person("Kingsley") // returns the me object

تعرف على المزيد حول جافا سكريبت

لقد تعلمت كل شيء عن الكلمة الأساسية "هذه" وما تعنيه في جميع السياقات المختلفة في JavaScript. إذا كنت جديدًا في استخدام JavaScript، فسوف تستفيد بشكل كبير من تعلم كافة أساسيات JavaScript وكيفية عملها.